Svelte SSR中可写存储（writable store）数据跨请求留存的原因排查

这种问题我之前做Svelte SSR的时候也碰到过，核心原因其实是Node.js的模块加载机制和SSR的运行环境特性导致的，咱们一步步拆解清楚：

问题根源：模块级Store的单例共享 #

你在@/utils/app里直接导出的title和desc是模块级别的可写store，而Node.js的模块系统有个关键特性：模块只会被加载一次，之后会缓存起来复用。也就是说，当你的SSR服务启动后，所有进来的请求都会共享同一个title和desc store实例——这就意味着：

• 当第一个请求（页面A）修改store值后，这个值会存在于Node.js进程的内存里
• 第二个请求（页面B）进来时，会直接复用这个已经存在的store，修改后覆盖掉原来的值
• 当你刷新页面A时，SSR进程会用当前已经被页面B修改过的store值来渲染，自然就显示页面B的标题了

而客户端不会有这个问题，因为每个浏览器tab都是独立的JavaScript运行上下文，模块会在各自的上下文里重新加载，store实例是隔离的。

验证这个问题的小技巧 #

你可以在@/utils/app里加一段日志，看看store的实例ID或者引用情况：

// @/utils/app
import { writable } from 'svelte/store';

export const title = writable('Default');
export const desc = writable('');

// 打印store实例的唯一标识
console.log('Store instance created:', title);

启动SSR服务后，你会发现不管来了多少个请求，这个日志只会打印一次——这就证明所有请求都在复用同一个store实例。

解决方法：用工厂函数创建请求隔离的Store #

解决思路很简单：不要在模块级别直接创建store，而是写一个工厂函数，让每个请求都生成独立的store实例：

1. 修改store模块为工厂函数 #

// @/utils/app
import { writable } from 'svelte/store';

export function createAppStores() {
  // 每个调用这个函数的请求，都会得到全新的store实例
  const title = writable('Default Title');
  const desc = writable('');
  return { title, desc };
}

2. 在SSR请求流程中实例化Store #

结合Laravel Inertia的SSR机制，你需要在每个请求的组件渲染流程里，调用这个工厂函数创建专属的store。比如：

• 在页面组件的load函数（Inertia的页面数据加载函数）里初始化store
• 或者在SSR的入口文件中，为每个请求创建store并注入到组件上下文里

这样就能保证每个SSR请求都有独立的store实例，不会出现跨请求的数据污染了。

额外提醒：SSR中的全局状态都要注意隔离 #

不止是Svelte store，任何模块级别的全局变量、单例对象，在SSR环境下都会面临同样的跨请求污染问题。比如全局的配置对象、工具类实例等等，都要确保它们是请求级别的，而不是进程级别的共享实例。

备注：内容来源于stack exchange，提问作者coderboy