SvelteKit使用adapter-static预渲染时解决多语言LayoutLoad并行问题

问题根源 #

预渲染阶段SvelteKit会并行处理多个页面请求，你的sveltekit-i18n翻译逻辑依赖全局共享状态，不同页面的loadTranslations调用会互相覆盖状态，导致语言串扰。另外你的LayoutServerLoad代码里存在明显错误：调用loadTranslations时传入的是initLocale而非当前页面检测到的locale，这会直接导致服务器端翻译初始化错误。

修复步骤 #

1. 修正LayoutServerLoad的参数错误

首先把服务器端加载函数里的initLocale替换为当前检测到的locale：

/** @type {import('./$types').LayoutServerLoad} */
export async function load(attrs: any) {
    const startsWith = ['pt', 'es', 'de'].find((e) => attrs?.url?.pathname.startsWith(`/${e}`));
    const locale = startsWith ?? defaultLocale;
    // 替换为当前页面的locale
    await loadTranslations(locale, attrs?.url?.pathname);
    return { locale };
}

2. 实现请求级别的翻译状态隔离

sveltekit-i18n默认是全局单例，要支持并行请求（比如预渲染），需要为每个请求创建独立的翻译实例，避免状态串扰。

服务器端隔离方案

修改翻译初始化逻辑，在LayoutServerLoad中创建当前请求专属的翻译实例，再通过data传递必要信息给客户端：

import { createI18n } from 'sveltekit-i18n';

/** @type {import('./$types').LayoutServerLoad} */
export async function load(attrs: any) {
    const startsWith = ['pt', 'es', 'de'].find((e) => attrs?.url?.pathname.startsWith(`/${e}`));
    const locale = startsWith ?? defaultLocale;
    
    // 为当前请求创建独立的i18n实例
    const i18n = createI18n({
        locales: ['en', 'de', 'es', 'pt'],
        defaultLocale: defaultLocale,
        loaders: [
            // 你的翻译加载器配置
        ]
    });
    
    await i18n.loadTranslations(locale, attrs.url.pathname);
    // 传递locale和已加载的翻译数据给客户端
    return { 
        locale,
        translations: i18n.getTranslations(locale)
    };
}

客户端适配

在LayoutLoad中，使用服务器端传递的locale和translations初始化客户端翻译，避免依赖全局单例：

import { i18n } from '$lib/i18n';

/** @type {import('./$types').LayoutLoad} */
export async function load({ data, url }: any) {
    // 用服务器端传递的上下文初始化客户端翻译
    await i18n.loadTranslations(data.locale, url.pathname, data.translations);
    return { locale: data.locale };
}

3. 客户端状态隔离优化

如果客户端使用全局$t，可以利用Svelte的setContext/getContext为每个路由树提供独立的翻译上下文，确保不同语言页面的状态不互相干扰。

额外建议 #

• 不要依赖预渲染页面顺序来规避问题，这只是临时方案，核心还是解决状态隔离。
• 检查sveltekit-i18n官方文档，确认是否有内置的请求级实例隔离机制，部分版本已提供相关支持。

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