第四章：剧场里的特殊文件，到底各演什么角色

SvelteKit 最核心的入口在 src/routes。
这个目录就像剧场的场次与舞台分区总目录。

一个典型结构：

src/routes
├── +layout.svelte
├── +layout.server.ts
├── +error.svelte
├── +page.svelte
├── plays
│   ├── +page.ts
│   ├── [slug]
│   │   ├── +page.server.ts
│   │   └── +page.svelte
│   └── +page.svelte
├── box-office
│   ├── +page.server.ts
│   └── +page.svelte
└── api
    └── plays
        └── +server.ts

这些 + 文件不是随便约定，它们就是剧场的标准岗位。

可以这样记：

• +page.svelte
  • 一个具体场景，真正给观众看的演出画面
• +layout.svelte
  • 共享舞台骨架，给整片子舞台提供统一布景
• +error.svelte
  • 演出事故时的应急舞台
• +page.ts/js
  • 通用后台调度，既可能在服务端跑，也可能在浏览器跑
• +page.server.ts/js
  • 只在服务端运行的后台调度
• +layout.ts/js
  • 布局层的通用调度
• +layout.server.ts/js
  • 布局层的服务端调度
• +server.ts/js
  • 独立请求处理器，像剧场侧门的服务台

一个非常重要的稳定规则是：

+server 文件只在服务端运行
其余路由文件都可能参与服务端和客户端这两个阶段

所以你在 SvelteKit 里，永远要有“这段代码到底在哪个舞台后台运行”的意识。