Next.js全栈开发实战与面试指南

第一步：优化后的专业级 Next.js 技术博客提示词（前端架构师标准）

前端架构师视角 · Next.js 全栈开发实战手册 + 面试指南

核心定位

面向中高级前端开发者/面试者 ，打造可直接开发复用、可直接背诵面试 的权威技术博客，内容专业、结构严谨、图文并茂，覆盖企业级实战 + 大厂高频面试考点。

写作要求

1. 发展历程
   • 前端渲染模式演进（静态页面 → jQuery → SPA(CSR) → SSR → SSG → ISR → 流式渲染 → RSC）；
   • Next.js 诞生背景、版本迭代（v12/v13/v14/v15 核心差异）、核心定位、App Router 与 Pages Router 深度对比、优势与适用场景。
2. 基础核心语法
   • 路由体系（App Router 文件路由、动态路由、并行路由、拦截路由、嵌套路由、路由组）；
   • 服务端组件（RSC）/客户端组件（'use client' 指令、渲染边界、数据获取差异）；
   • 数据获取（SSR/SSG/ISR/Streaming、fetch 缓存策略、Server Actions）；
   • 中间件、路由守卫、API Routes、服务端接口、Server Actions；
   • 内置优化（图片/字体/脚本/Metadata、Link 预取、Image 组件）；
   • Layout/Template/ErrorBoundary/Loading UI 布局系统。
3. 底层核心原理
   • React Server Components（RSC）运行原理、序列化与传输、客户端注水；
   • 服务端渲染 SSR / 静态生成 SSG / 增量渲染 ISR 原理与流程；
   • 流式渲染与 Suspense 工作流、Suspense Boundary；
   • Next.js 编译（SWC/TurboPack）、构建、缓存（数据/路由/全页）、预取、预渲染机制；
   • 渲染边界（服务端/客户端）原理、Hydration 优化。
4. 工程化与架构工具
   • Monorepo 架构设计、pnpm workspaces、依赖管理；
   • Turborepo 核心原理（增量构建、远程缓存、任务流水线、管道配置）、实战配置；
   • Next.js 项目工程化（TypeScript/ESLint/Prettier、环境变量、CI/CD、Docker 部署）；
   • 企业级项目规范（目录结构、代码规范、权限系统、监控埋点）。
5. 性能优化与最佳实践
   • 渲染策略选型、数据缓存、路由预取、图片优化、打包体积优化；
   • 服务端/客户端分离优化、大型项目架构拆分、虚拟列表、懒加载；
   • 流式渲染、Suspense 边界、Hydration 优化实战。
6. 面试高频考点
   • 原理类（RSC/SSR/ISR/Streaming、缓存机制、编译原理）；
   • 路由类（App Router 原理、路由组、并行/拦截路由）；
   • 工程化类（Monorepo/Turborepo、环境变量、CI/CD）；
   • 优化类（渲染策略、缓存策略、性能指标）；
   • 附标准答案 + 避坑点 + 加分项。
7. 格式要求
   • 必须包含 mermaid 思维导图；
   • 必须包含 原理流程图；
   • 必须包含可直接复制运行的代码；
   • 语言专业简洁、无废话、重点高亮、适合开发查阅 + 面试背诵。

---

第二步：前端架构师视角 · Next.js 企业级实战与面试指南（完整版）

（可直接用于开发查阅 + 面试背诵）
渲染错误: Mermaid 渲染失败: Parse error on line 19: ...型 服务端组件(RSC)：默认、无 Hooks、服务端运行 ----------------------^ Expecting 'SPACELINE', 'NL', 'EOF', got 'NODE_ID'

---

一、Next.js 发展历程与渲染模式演进

1.1 前端渲染模式进化史

模式	核心特点	优势	劣势
静态页面	纯 HTML/CSS/JS，无交互	最快、SEO 好	无动态内容
jQuery 时代	DOM 操作主导，轻量交互	简单、兼容好	代码混乱、难以维护
SPA(CSR)	客户端渲染，组件化，无刷新	交互流畅、前后端分离	首屏慢、SEO 差
SSR	服务端生成 HTML，客户端注水	首屏快、SEO 好	服务端压力大、重复渲染
SSG	构建时生成静态 HTML	极致性能、CDN 友好	无法实时更新
ISR	静态页面后台增量更新	兼顾性能与实时性	配置复杂
Streaming	分段返回 HTML，优先渲染核心	首屏体验好、TTI 快	需配合 Suspense
RSC	服务端组件，零 JS 交付	性能极致、安全	无交互能力

1.2 Next.js 诞生背景与核心定位

Next.js 由 Vercel 公司于 2016 年推出，核心解决 React 原生的三大痛点：

1. 路由缺失：React 无内置路由，需依赖 React Router；
2. 渲染复杂：手动实现 SSR/SSG 成本高；
3. 工程化繁琐：需自行配置 Webpack/Babel 等构建工具。

核心定位 ：生产级全栈 React 框架，内置路由、渲染、构建、缓存、优化、API 服务，让开发者专注业务逻辑。

1.3 Next.js 版本迭代核心差异

版本	核心特性	意义
v12	SWC 编译器、Middleware、Edge Functions	编译速度提升 10x+，边缘计算支持
v13	App Router、RSC、Streaming、Turbopack	革命性架构升级，服务端组件正式落地
v14	App Router 稳定、缓存增强、Server Actions	生产环境可用，简化服务端逻辑
v15	性能优化、Partial Prerendering、TurboPack 稳定	进一步提升首屏性能，构建速度再升级

1.4 App Router vs Pages Router 对比

维度	App Router	Pages Router
路由模式	文件即路由，app/ 目录	文件即路由，pages/ 目录
组件模型	默认服务端组件，'use client' 标记客户端	全客户端组件
数据获取	服务端组件直接 async/await	getServerSideProps/getStaticProps
布局系统	Layout/Template/Loading/Error 内置	需手动实现布局
性能	极致性能，零 JS 交付	传统 CSR/SSR，性能一般
适用场景	新项目、追求性能、全栈场景	旧项目迁移、简单场景

---

二、Next.js 基础核心语法（开发直接复用）

2.1 路由系统（App Router）

2.1.1 核心路由规则

• app/page.js → 路由 /
• app/about/page.js → 路由 /about
• app/[id]/page.js → 动态路由 /123
• app/(dashboard)/settings/page.js → 路由组 (dashboard) 不参与 URL
• app/@sidebar/page.js → 并行路由
• app/(.)login/page.js → 拦截路由

2.1.2 动态路由与路由组

// app/post/[id]/page.js
export default async function PostPage({ params }) {
  const { id } = params;
  const post = await fetch(`https://api.example.com/posts/${id}`).then(res => res.json());
  return <div>{post.title}</div>;
}

2.1.3 并行路由与拦截路由

• 并行路由：同时渲染多个页面（如侧边栏 + 主内容）；
• 拦截路由：拦截特定路由，显示模态框（如点击图片，在当前页打开详情）。

2.2 组件模型：服务端组件 vs 客户端组件

2.2.1 服务端组件（默认）

• 运行在服务端 ，无 useState/useEffect/事件监听；
• 可直接访问数据库、文件系统、环境变量；
• 零 JavaScript 发送到客户端，性能极致；
• 适合展示型、数据获取型组件。

// app/page.js（默认服务端组件）
async function getData() {
  const res = await fetch('https://api.example.com/posts', { cache: 'force-cache' });
  return res.json();
}

export default async function Home() {
  const posts = await getData();
  return (
    <div>
      <h1>Posts</h1>
      <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul>
    </div>
  );
}

2.2.2 客户端组件（'use client'）

• 需在文件顶部添加 'use client' 指令；
• 运行在客户端 ，支持 useState/useEffect/事件监听；
• 发送 JavaScript 到客户端，支持交互；
• 适合交互型、状态型组件。

// app/components/Counter.jsx（客户端组件）
'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2.3 数据获取：SSR/SSG/ISR/Streaming

2.3.1 核心数据获取方式

方式	代码示例	适用场景
SSR	fetch(url, { cache: 'no-store' })	实时数据、用户个性化内容
SSG	fetch(url, { cache: 'force-cache' })	静态内容、博客、文档
ISR	fetch(url, { next: { revalidate: 60 } })	内容更新不频繁、电商商品页
Streaming	Suspense 包裹异步组件	首屏体验优化、长页面

2.3.2 Server Actions（服务端函数）

// app/actions.js
'use server';

export async function createPost(formData) {
  const title = formData.get('title');
  const content = formData.get('content');
  // 直接操作数据库
  await fetch('https://api.example.com/posts', {
    method: 'POST',
    body: JSON.stringify({ title, content }),
  });
  // 重定向
  redirect('/posts');
}

// app/posts/new/page.js
import { createPost } from '@/app/actions';

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" />
      <textarea name="content" placeholder="Content" />
      <button type="submit">Create Post</button>
    </form>
  );
}

2.4 中间件与 API Routes

2.4.1 中间件（Middleware）

用于请求拦截、鉴权、重定向、修改请求/响应，运行在边缘函数。

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('token')?.value;
  const isLoginPage = request.nextUrl.pathname === '/login';

  if (!token && !isLoginPage) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

2.4.2 API Routes

服务端接口，用于构建 RESTful API。

// app/api/posts/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  const posts = await fetch('https://api.example.com/posts').then(res => res.json());
  return NextResponse.json(posts);
}

export async function POST(request) {
  const body = await request.json();
  const newPost = await fetch('https://api.example.com/posts', {
    method: 'POST',
    body: JSON.stringify(body),
  }).then(res => res.json());
  return NextResponse.json(newPost, { status: 201 });
}

2.5 内置优化与布局系统

2.5.1 图片优化（next/image）

import Image from 'next/image';

export default function PostImage() {
  return (
    <Image
      src="/post.jpg"
      alt="Post image"
      width={800}
      height={600}
      priority // 预加载关键图片
      placeholder="blur" // 模糊占位
    />
  );
}

2.5.2 布局系统

• layout.js：共享布局，不会随路由变化重新渲染；
• template.js：每次路由变化都会重新渲染；
• loading.js：Suspense 占位，显示加载状态；
• error.js：错误边界，捕获组件错误。

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My App</header>
        <main>{children}</main>
        <footer>© 2024 My App</footer>
      </body>
    </html>
  );
}

// app/loading.js
export default function Loading() {
  return <div>Loading...</div>;
}

// app/error.js
'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

---

三、Next.js 底层核心原理（面试必背）

3.1 React Server Components（RSC）运行原理

用户请求页面
Next.js 服务端
渲染服务端组件树
序列化 RSC 为特殊格式的数据流
客户端接收 RSC 流
客户端解析 RSC 流，渲染为 HTML
客户端组件 Hydration，激活交互
可交互页面

核心特点：

• 服务端渲染，不发送 JS 到客户端；
• 支持直接访问服务端资源（数据库、文件系统）；
• 与客户端组件严格隔离，避免安全风险；
• 零 Hydration 成本，性能极致。

3.2 SSR/SSG/ISR 原理对比

模式	渲染时机	缓存	适用场景
SSR	请求时	无	实时数据、个性化内容
SSG	构建时	永久	静态内容、博客、文档
ISR	构建时 + 后台定时	后台更新	内容更新不频繁、电商商品页

3.2.1 ISR 原理

1. 构建时生成静态 HTML；
2. 首次请求时返回静态 HTML；
3. 后台定时重新生成 HTML，更新缓存；
4. 下次请求时返回新的静态 HTML。

3.3 流式渲染与 Suspense 工作流

用户请求
服务端开始渲染
返回 HTML 骨架
客户端渲染骨架，显示 Loading
服务端异步获取数据
流式返回数据片段
客户端填充数据，更新页面
页面完全加载，可交互

核心优势：

• 缩短 TTFB（首字节时间）；
• 提升 TTI（可交互时间）；
• 优化用户感知性能。

3.4 缓存机制

Next.js 提供四层缓存：

1. 数据缓存 ：fetch 请求缓存，默认 force-cache；
2. 路由缓存：页面级缓存，默认 30s；
3. 全页缓存：构建时生成的静态 HTML；
4. 构建缓存：Turborepo 远程缓存，跨机器共享构建结果。

3.5 编译与构建原理

• SWC：用 Rust 编写的快速编译器，替代 Babel，编译速度提升 10x+；
• TurboPack：增量构建，仅重新构建变更的文件，热更新速度极快；
• Tree-Shaking：删除未使用的代码，减少打包体积；
• 代码分割：按路由/组件分割代码，按需加载。

---

四、工程化工具：Monorepo + Turborepo

4.1 Monorepo 架构设计

4.1.1 什么是 Monorepo？

Monorepo（单一仓库）是将多个项目放在一个 Git 仓库中，共享代码、依赖、构建工具。

4.1.2 Monorepo 目录结构

monorepo/
├── apps/
│   ├── web/          # Next.js 主应用
│   └── admin/        # Next.js 后台管理
├── packages/
│   ├── ui/           # 公共组件库
│   ├── utils/        # 工具函数库
│   └── config/       # 共享配置（ESLint/TS）
├── pnpm-workspace.yaml
└── turbo.json

4.1.3 pnpm workspaces 配置

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'

4.2 Turborepo 核心原理与实战

4.2.1 Turborepo 核心优势

• 增量构建：仅重新构建变更的文件，避免重复构建；
• 远程缓存：跨机器/团队共享构建缓存，CI/CD 速度提升 5~20 倍；
• 任务并行：并行执行多个任务，充分利用 CPU；
• 管道配置：定义任务依赖关系，自动化构建流程。

4.2.2 Turborepo 配置（turbo.json）

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {}
  },
  "remoteCache": {
    "enabled": true,
    "storageOptions": {
      "provider": "vercel"
    }
  }
}

4.2.3 与 Next.js 集成

• 安装 Turborepo：pnpm add turbo -Dw；
• 运行构建：pnpm turbo build；
• 运行开发：pnpm turbo dev；
• 开启远程缓存：pnpm turbo login。

4.3 Next.js 工程化配置

4.3.1 TypeScript/ESLint/Prettier

Next.js 内置 TypeScript/ESLint，只需安装 Prettier：

pnpm add prettier -D

4.3.2 环境变量

• .env.local：本地环境变量，不提交 Git；
• .env.development：开发环境变量；
• .env.production：生产环境变量；
• 服务端组件可直接访问 process.env；
• 客户端组件需加 NEXT_PUBLIC_ 前缀。

4.3.3 CI/CD 与 Docker 部署

• CI/CD：使用 GitHub Actions/Vercel 自动构建、部署；
• Docker：构建 Docker 镜像，部署到 Kubernetes/阿里云。

# Dockerfile
FROM node:20-alpine AS base
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN pnpm install
COPY . .
RUN pnpm turbo build
EXPOSE 3000
CMD ["pnpm", "start"]

---

五、Next.js 性能优化（面试 + 实战高频）

5.1 渲染策略选型（核心优化）

场景	推荐策略
静态内容（博客、文档）	SSG/ISR
实时数据（聊天、通知）	SSR/Streaming
交互组件（按钮、表单）	客户端组件
大列表（商品列表、文章列表）	虚拟列表 + ISR

5.2 缓存优化

• 数据缓存：fetch(url, { next: { revalidate: 60 } })；
• 路由缓存：export const revalidate = 60；
• 构建缓存：Turborepo 远程缓存；
• 避免过度缓存，确保数据实时性。

5.3 组件与打包优化

• 优先使用服务端组件，减少客户端 JS 体积；
• 代码分割：dynamic(() => import('./Component'), { suspense: true })；
• 懒加载：图片、组件、路由懒加载；
• 虚拟列表：react-window/react-virtualized 优化大列表。

5.4 其他优化手段

• 图片优化 ：next/image 自动压缩、格式转换、懒加载；
• 字体优化 ：next/font 自动子集化、预加载；
• 脚本优化 ：next/script 控制脚本加载时机；
• 路由预取 ：next/link 自动预取可见路由；
• 流式渲染 ：Suspense 包裹异步组件，提升首屏体验；
• Hydration 优化：减少客户端组件，优先服务端渲染。

---

六、Next.js 高频面试题（标准答案 + 避坑点）

6.1 原理类

6.1.1 什么是 RSC？与客户端组件的区别？

标准答案 ：

RSC（React Server Components）是 Next.js App Router 默认的组件模型，运行在服务端，不发送 JavaScript 到客户端，可直接访问服务端资源（数据库、文件系统），无交互能力；客户端组件需添加 'use client' 指令，运行在客户端，支持 useState/useEffect/事件监听，发送 JavaScript 到客户端，支持交互。

避坑点：

• 不要在服务端组件中使用 Hooks/事件监听；
• 不要在客户端组件中直接访问服务端资源（如数据库）。

加分项：

• 提到 RSC 序列化与传输、客户端注水原理；
• 提到 RSC 零 JS 交付、性能极致的优势。

6.1.2 SSR/SSG/ISR 的区别与选型？

标准答案：

• SSR：请求时渲染，适合实时数据、用户个性化内容；
• SSG：构建时渲染，适合静态内容、博客、文档，性能极致；
• ISR：静态页面后台增量更新，适合内容更新不频繁、电商商品页，兼顾性能与实时性。

避坑点：

• 不要混淆 ISR 与 SSR，ISR 是静态页面的后台更新，不是请求时渲染；
• 不要过度使用 SSR，静态内容优先 SSG/ISR。

加分项：

• 提到 ISR 的 revalidate 配置、后台更新机制；
• 提到 Streaming 与 SSR/ISR 的结合使用。

6.1.3 Next.js 缓存机制有哪些？

标准答案 ：

Next.js 提供四层缓存：

1. 数据缓存 ：fetch 请求缓存，默认 force-cache；
2. 路由缓存：页面级缓存，默认 30s；
3. 全页缓存：构建时生成的静态 HTML；
4. 构建缓存：Turborepo 远程缓存，跨机器共享构建结果。

避坑点：

• 不要混淆数据缓存与路由缓存，数据缓存是请求级别的，路由缓存是页面级别的；
• 不要过度缓存，确保数据实时性。

加分项：

• 提到 revalidate 配置、缓存失效机制；
• 提到 Turborepo 远程缓存的优势。

6.2 路由类

6.2.1 App Router 与 Pages Router 的区别？

标准答案：

• 路由模式 ：App Router 是 app/ 目录，Pages Router 是 pages/ 目录；
• 组件模型：App Router 默认服务端组件，Pages Router 全客户端组件；
• 数据获取 ：App Router 服务端组件直接 async/await，Pages Router 用 getServerSideProps/getStaticProps；
• 布局系统：App Router 内置 Layout/Template/Loading/Error，Pages Router 需手动实现；
• 性能：App Router 极致性能，Pages Router 传统 CSR/SSR。

避坑点：

• 不要在 App Router 中使用 Pages Router 的数据获取方法；
• 不要在 Pages Router 中使用 RSC。

加分项：

• 提到 App Router 的并行路由、拦截路由、路由组；
• 提到 App Router 的 Streaming、Suspense 支持。

6.2.2 什么是并行路由与拦截路由？

标准答案：

• 并行路由 ：同时渲染多个页面，如侧边栏 + 主内容，用 @folder 命名；
• 拦截路由 ：拦截特定路由，显示模态框，如点击图片，在当前页打开详情，用 (.)folder 命名。

避坑点：

• 不要混淆并行路由与嵌套路由；
• 不要在拦截路由中使用服务端组件。

加分项：

• 提到并行路由与拦截路由的实战场景；
• 提到并行路由与拦截路由的实现原理。

6.3 工程化类

6.3.1 什么是 Monorepo？优势是什么？

标准答案 ：

Monorepo（单一仓库）是将多个项目放在一个 Git 仓库中，共享代码、依赖、构建工具。优势：

1. 代码共享：避免重复造轮子；
2. 依赖统一：避免版本冲突；
3. 构建统一：统一构建流程，提升效率；
4. 协作高效：跨项目修改，无需发布版本。

避坑点：

• 不要将 Monorepo 与多仓库（MultiRepo）混淆；
• 不要过度使用 Monorepo，小项目无需。

加分项：

• 提到 pnpm workspaces、Turborepo 等 Monorepo 工具；
• 提到 Monorepo 与微前端的区别。

6.3.2 Turborepo 为什么快？

标准答案 ：

Turborepo 快的核心原因：

1. 增量构建：仅重新构建变更的文件，避免重复构建；
2. 远程缓存：跨机器/团队共享构建缓存，CI/CD 速度提升 5~20 倍；
3. 任务并行：并行执行多个任务，充分利用 CPU；
4. 管道配置：定义任务依赖关系，自动化构建流程。

避坑点：

• 不要将 Turborepo 与 Webpack/Rollup 混淆；
• 不要过度依赖远程缓存，确保缓存一致性。

加分项：

• 提到 Turborepo 的 turbo.json 配置、任务依赖；
• 提到 Turborepo 与 Next.js 的集成。

6.4 优化类

6.4.1 Next.js 性能优化手段有哪些？

标准答案：

1. 渲染策略选型：优先 SSG/ISR，动态内容用 SSR/Streaming；
2. 缓存优化：数据缓存、路由缓存、构建缓存；
3. 组件优化：优先服务端组件，减少客户端 JS 体积；
4. 打包优化：代码分割、懒加载、Tree-Shaking；
5. 资源优化 ：图片/字体/脚本优化，next/image/next/font/next/script；
6. 路由优化：路由预取、虚拟列表、流式渲染；
7. Hydration 优化：减少客户端组件，优先服务端渲染。

避坑点：

• 不要过度优化，避免过早优化；
• 不要忽视用户体验，优先优化核心路径。

加分项：

• 提到 Core Web Vitals（LCP、FID、CLS）；
• 提到 Next.js 内置的性能监控工具。

---

七、企业级最佳实践

7.1 权限系统设计

• 中间件：统一鉴权、重定向；
• 服务端组件：直接获取用户信息，避免客户端泄露；
• Server Actions：处理敏感操作，如创建/删除数据；
• API Routes：提供 RESTful API，统一权限控制。

7.2 多环境配置

• .env.local：本地环境变量，不提交 Git；
• .env.development：开发环境变量；
• .env.production：生产环境变量；
• next.config.js：配置环境变量、构建选项。

7.3 监控埋点

• 性能监控 ：使用 next/script 引入 Google Analytics、Plausible；
• 错误监控：使用 Sentry、LogRocket 捕获错误；
• 用户行为：使用 Mixpanel、Amplitude 分析用户行为。

7.4 大型项目架构拆分

• 按功能模块拆分 ：将项目拆分为多个功能模块，如 auth/、posts/、users/；
• 服务端/客户端分离：服务端组件负责数据获取，客户端组件负责交互；
• 公共代码抽离 ：将公共组件、工具函数、配置抽离到 packages/ 目录；
• Monorepo + Turborepo：统一构建、缓存、部署。

7.5 部署与运维

• Vercel：Next.js 官方推荐，一键部署，自动 CDN、缓存、监控；
• AWS/GCP/Azure：适合大型企业，自定义部署；
• Docker：容器化部署，便于迁移、扩容；
• Kubernetes：适合大规模集群，自动化运维。

---

八、总结

Next.js 是目前最流行的 React 全栈框架，凭借其极致性能 、完善的工程化 、丰富的生态，成为企业级 React 项目的首选。本文从发展历程、基础核心语法、底层原理、工程化工具、性能优化、面试高频考点、企业级最佳实践等方面，全面介绍了 Next.js 的核心知识，可直接用于开发查阅和面试背诵。

核心建议：

1. 新项目优先使用 App Router，拥抱 RSC；
2. 优先 SSG/ISR，动态内容用 SSR/Streaming；
3. 服务端组件优先，减少客户端 JS 体积；
4. Monorepo + Turborepo 是企业级项目的标配；
5. 关注 Core Web Vitals，持续优化性能。

---