sveltekit-data-flow

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SvelteKit Data Flow

SvelteKit 数据流

Quick Start

快速入门

Which file? Server-only (DB/secrets):

+page.server.ts

| Universal (runs both):

+page.ts

| API:

+server.ts

Load decision: Need server resources? → server load | Need client APIs? → universal load

Form actions: Always

+page.server.ts

. Return

fail()

for errors, throw

redirect()

to navigate, throw

error()

for failures.

选择哪个文件？ 仅服务端（数据库/密钥）：

+page.server.ts

| 通用（两端运行）：

+page.ts

| API：

+server.ts

Load函数决策： 需要服务端资源？→ 服务端load | 需要客户端API？→ 通用load

表单操作： 始终使用

+page.server.ts

。返回

fail()

处理错误，抛出

redirect()

进行页面跳转，抛出

error()

处理失败情况。

Example

示例

typescript

// +page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const load = async ({ locals }) => {
	const user = await db.users.get(locals.userId);
	return { user }; // Must be JSON-serializable
};

export const actions = {
	default: async ({ request }) => {
		const data = await request.formData();
		const email = data.get('email');

		if (!email) return fail(400, { email, missing: true });

		await updateEmail(email);
		throw redirect(303, '/success');
	},
};

typescript

// +page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const load = async ({ locals }) => {
	const user = await db.users.get(locals.userId);
	return { user }; // Must be JSON-serializable
};

export const actions = {
	default: async ({ request }) => {
		const data = await request.formData();
		const email = data.get('email');

		if (!email) return fail(400, { email, missing: true });

		await updateEmail(email);
		throw redirect(303, '/success');
	},
};

Reference Files

参考文档

load-functions.md - Server vs universal
form-actions.md - Form handling patterns
serialization.md - What can/can't serialize
error-redirect-handling.md - fail/redirect/error
client-auth-invalidation.md - invalidateAll() after client-side auth

load-functions.md - 服务端与通用对比
form-actions.md - 表单处理模式
serialization.md - 可序列化/不可序列化内容
error-redirect-handling.md - fail/redirect/error方法处理
client-auth-invalidation.md - 客户端认证后调用invalidateAll()

Notes

注意事项

Server load → universal load via
```
data
```
param | ALWAYS
```
throw redirect()/error()
```
No class instances/functions from server load (not serializable)
Last verified: 2025-01-11

服务端load通过
```
data
```
参数传递给通用load | 始终使用
```
throw redirect()/error()
```
服务端load不能返回类实例/函数（不可序列化）
最后验证时间： 2025-01-11