SvelteKit中SSR完成后Moment.js自动切换为'en' locale的问题

问题根源 #

SvelteKit的SSR（服务器端渲染）与客户端 hydration 过程中，Moment.js的locale状态无法跨环境同步：服务器端渲染时设置的locale仅在服务器进程生效，客户端初始化Moment时会默认重置为'en'，导致页面先显示正确的本地化日期，随后闪回英文格式。

解决方案1：同步SSR与客户端的Moment Locale #

步骤1：导入目标Locale文件

Moment.js默认仅包含英文locale，需手动导入目标语言包（如俄语）：

npm install moment

在代码中导入对应locale：

import 'moment/locale/ru';

步骤2：在服务器端与客户端同步设置Locale

在routes/+layout.ts（SvelteKit 1.x为__layout.ts）中，通过load函数在服务器端设置locale，并将其传递给客户端：

import moment from 'moment';
import 'moment/locale/ru';

export async function load() {
    // 服务器端初始化locale
    moment.locale('ru');
    return {
        currentLocale: 'ru'
    };
}

在routes/+layout.svelte中，接收服务器传递的locale并在客户端同步设置：

<script lang="ts">
    import moment from 'moment';
    import 'moment/locale/ru';
    export let data;

    // 客户端hydration时同步locale，避免重置
    moment.locale(data.currentLocale);
</script>

解决方案2：客户端专属初始化设置 #

在SvelteKit的客户端初始化文件中提前设置locale，确保所有客户端代码执行前Moment已加载正确语言：

创建src/hooks.client.ts（若不存在），添加以下代码：

import moment from 'moment';
import 'moment/locale/ru';

// 客户端启动时直接设置locale
moment.locale('ru');

推荐方案：替换Moment.js为原生Intl API（优化版） #

Moment.js已停止维护，推荐使用浏览器原生Intl.DateTimeFormatAPI，结合Svelte Store实现响应式本地化：

优化辅助函数

修改lib/helpers/date.ts，使用derived Store自动响应locale变化：

import { locale } from "$lib/store/locale";
import { derived } from "svelte/store";

// 派生Store：根据当前locale生成格式化函数
export const formatDate = derived(locale, (currentLocale) => {
    return (date: Date, options?: Intl.DateTimeFormatOptions) => {
        return date.toLocaleDateString(
            currentLocale,
            options ?? { year: 'numeric', month: 'long', day: 'numeric' }
        );
    };
});

组件中使用

<script lang="ts">
    import { formatDate } from '$lib/helpers/date';
    const today = new Date();
</script>

<p>{$formatDate(today)}</p>

此方案无需依赖第三方库，完全利用浏览器原生能力，且符合Svelte响应式设计，避免了Moment.js的环境同步问题。

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