如何在SvelteKit组件中启用CSR？

在SvelteKit中，export const csr这类渲染控制配置仅在路由级文件（如layout.ts、page.ts）生效，组件本身无法通过该方式单独启用CSR。要让指定组件仅在客户端渲染，可采用以下几种方案：

方案1：使用onMount钩子控制渲染时机 #

onMount是Svelte的客户端专属钩子，只会在浏览器环境中执行。通过它标记客户端状态，控制组件内容的渲染：

<!-- MyComponent.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  let isClient = false;

  onMount(() => {
    isClient = true;
  });
</script>

{#if isClient}
  <!-- 此处内容仅在客户端渲染 -->
  <div>客户端专属内容</div>
{/if}

方案2：动态导入组件 #

在页面中通过onMount动态导入目标组件，确保组件仅在客户端加载和渲染：

<!-- page.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  let MyComponent;

  onMount(async () => {
    const module = await import('$lib/components/MyComponent.svelte');
    MyComponent = module.default;
  });
</script>

<!-- 服务器端渲染内容 -->
<div>服务器渲染的内容</div>

{#if MyComponent}
  <svelte:component this={MyComponent} />
{/if}

方案3：使用browser环境变量 #

从$app/environment导入browser变量，该变量在服务器端为false，客户端为true，以此控制组件渲染：

<!-- MyComponent.svelte -->
<script lang="ts">
  import { browser } from '$app/environment';
</script>

{#if browser}
  <!-- 仅客户端渲染的内容 -->
  <div>仅在浏览器中显示</div>
{/if}

内容的提问来源于stack exchange，提问作者Sebastiano