如何在Svelte中检测脚本来自+page.server.js还是+page.svelte？

在SvelteKit中，你可以通过以下几种方式区分脚本的运行环境，进而判断它是在服务端脚本（+page.server.js）还是客户端组件（+page.svelte）中执行：

• 使用$app/environment提供的环境变量
  这是最直接的方式，SvelteKit内置了两个变量来标识运行环境：

  • browser：在客户端（包括+page.svelte的hydration阶段）为true，服务端（+page.server.js）为false
  • server：与browser相反，服务端为true，客户端为false

  代码示例：

  import { browser, server } from '$app/environment';
  
  if (browser) {
    console.log('当前运行在客户端（如+page.svelte）');
  } else if (server) {
    console.log('当前运行在服务端（如+page.server.js）');
  }
  

• 利用Svelte的onMount钩子
  onMount是Svelte的内置钩子，仅会在客户端执行（服务端渲染阶段不会触发）。如果你的代码放在onMount回调里，就可以确保它只在+page.svelte的客户端环境运行：

  import { onMount } from 'svelte';
  
  onMount(() => {
    // 这里的代码只会在客户端执行
    console.log('仅在+page.svelte的客户端环境运行');
  });
  

额外说明：+page.server.js本身就是服务端专属文件，里面的代码永远不会被打包到客户端，只会在服务器端执行；而+page.svelte中的脚本会在服务端渲染（SSR）时执行一次，之后在客户端hydration时再执行一次，通过上述方法可以区分这两个阶段。

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