我用五层架构重建了整个 Next.js 项目，从污染地狱爬上了性能天堂项目一度性能崩溃、组件混乱，直到我用五层架构彻底重

“我们不只是开发功能，更在搭建一座长期可演化的工程大厦。”

在 React Server Components（RSC）和 Next.js App Router 成为主流架构范式的今天，许多开发者仍在“性能”和“结构混乱”之间痛苦拉扯。本文将分享我在真实项目中不断试验、打磨，最终沉淀下来的架构设计方法——RSC 优先的五层架构模型（5-Layer Architecture） 。

它不仅提升了性能，更彻底解决了可维护性和可控性问题。

❌ 默认目录结构的问题

很多基于 Next.js 构建的项目会逐步陷入以下困境：

Client 组件向上传染，污染了原本能 SSR 的组件
过度依赖 index.ts 导致依赖边界不清晰
首屏加载变慢，LCP 高、TBT 爆炸、JS 包臃肿
小改动带来系统性结构崩溃，维护代价极高

经过多轮战斗之后，我终于明白：

架构应该服务于团队的长期演进，而不是阻碍它。

于是我彻底推翻原有结构，从零构建了一套新模型。

🧱 五层架构模型简介

RootLayout → Page Layout → Page → View → Component

每一层都有严格的职责边界，并明确规定了哪些层可以使用 Client Component（CSC）。

层级	职责说明	是否允许 CSC	是否允许改动
RootLayout	顶层布局：定义 `<html>`、全局 Provider、样式等	❌ 禁止	❌ 冻结不可改
Page Layout	路由级布局：如主框架导航栏、布局结构	❌ 禁止	❌ 冻结不可改
Page	页面入口：生成 Metadata，调用唯一 View	❌ 禁止	❌ 冻结不可改
View	视图层：组合多个组件构成完整页面	❌ 禁止直接 CSC	✅ 可随时调整
Component	原子组件：具备 UI 行为逻辑，可含 useState/useEffect	✅ 允许	✅ 可随时修改

✅ 架构执行规则（必须遵守）

1️⃣ 只有 Component 层可以使用 `use client`

绝不允许 View/Page/Layout 层直接使用 use client，只允许在组件中声明。

// ✅ 合法写法，仅在组件内使用
'use client';
export function Chart() {
  ...
}

// ❌ 非法写法，污染上层结构
'use client';
export function DashboardView() {
  ...
}

2️⃣ 所有 CSC 都必须 Lazy 加载

所有 CSC 组件都必须通过 next/dynamic + ssr: false 实现懒加载，并强制执行统一命名规范：

// ✅ 推荐方式
import { ChartLazy } from '@/components/csc/chart-lazy';

// ❌ 禁止方式
import { Chart } from '@/components/csc/chart';

📂 所有 CSC 组件统一放在 components/csc/ 目录下，并以 xxx-lazy.tsx 命名。

3️⃣ 每个 Page 只返回一个 View

页面只负责生成 SEO Metadata 和调用 View。内容结构全部交给 View 层负责拼装：

export default async function Page() {
  return <ImageResizeView />;
}

4️⃣ View 层必须保持纯 RSC，不可被污染

View 层可以使用 Lazy 的 CSC 组件，但绝不允许直接引入 CSC。

// ✅ 允许：View 使用 Lazy 组件
import { CompressChartLazy } from '@/components/csc/compress-chart-lazy';

// ❌ 禁止：直接引入 CSC 会污染 View
import { CompressChart } from '@/components/csc/compress-chart';

这是保障 RSC 流、缓存可用、HTML 可预生成的关键。

📁 目录结构示例

采用DDD范式驱动的目录分层结构

/src
  ├── app
  │   ├── layout.tsx                  # RootLayout
  │   └── [locale]
  │       ├── layout.tsx              # Page Layout
  │       └── tools
  │           └── image-compress
  │               └── page.tsx       # Page

  ├── features
  │   └── image-compress
  │       └── image-compress-view.tsx  # View

  └── components
      ├── ui/
      └── csc/
          └── compress-chart-lazy.tsx   # Client Component（CSC）

🚀 实际收益提升

这套架构在我主导的 Toolbox 项目中已经应用于数十个工具页面，收获如下：

指标	优化前 → 优化后
Lighthouse 分数	提升 15–30 分
TBT	降至 100ms 以下
首屏 JS（FLJ）	缩减 300KB+
LCP	控制在 2.5s 内
团队协作	职责边界清晰，写代码不迷路

next build 全部页面 FLJ大幅降低，页面需要处理的JS少了，自然也就快了！

🧠 写在最后

这套五层架构模型，适用于一切追求：

✅ 高性能
✅ 可维护性
✅ RSC-first
✅ SEO优化

的中大型 Next.js 项目。
它并不是一套通用的“套路”，而是一种严肃、稳定、可验证的架构哲学。

你需要做的，就是把复杂度往下沉，把污染挡在边界之外。

👨‍💻 作者：AiMuo / Toolbox 项目
📎 项目地址：aimuo.com
📌 更多工程实践持续分享中，欢迎关注！

我用五层架构重建了整个 Next.js 项目，从污染地狱爬上了性能天堂