Cheat Sheet速查表
跳转到主要内容

React 与 Next.js 架构分层与工程决策速查表 (UI方案 vs 全栈框架 vs BFF)

核心架构认知：不要把 React、Next.js 与 Node.js 当成同一层级的技术。

  • React 是 UI 库（声明式界面抽象方案）；
  • Next.js 是 应用全栈框架（把应用跑起来，负责路由、编译与服务端交付）；
  • Node.js 是 运行时引擎（支撑服务端代码执行的底层底座）。

现代 Web 全栈五层架构拓扑全景

从终端用户在浏览器点击交互，到数据在服务端持久化，现代工程遵循清晰的分层流转模型：

flowchart TD
    subgraph Client ["客户端 (Client Runtime)"]
        L1["① 浏览器环境 (Browser)<br>HTML / CSS / DOM / Web API / 本地存储"]
        L2["② React UI 抽象层 (UI Library)<br>组件 (Component) / 状态 (State) / Props / 虚拟DOM调度"]
    end

    subgraph Edge_Server ["服务端与中间层 (Server & Edge Runtime)"]
        L3["③ Next.js 应用层 (Full-stack Framework)<br>App Router / RSC (服务端组件) / SSR·SSG·ISR / 产物打包"]
        L4["④ API / BFF 层 (Service Orchestration)<br>接口聚合 / 权限校验 / 限流熔断 / 响应数据裁剪 / 协议转换"]
    end

    subgraph Backend ["后端领域基础设施 (Domain & Storage)"]
        L5["⑤ 领域服务与存储层 (Core Backend & DB)<br>Go/Java 核心微服务 / PostgreSQL / Redis / S3 / 消息队列"]
    end

    L1 <-->|"事件监听 / DOM 重绘"| L2
    L2 <-->|"RSC 流式传输 / 水合 (Hydration)"| L3
    L3 <-->|"Server Actions / HTTP / gRPC"| L4
    L4 <-->|"内部 RPC / 高性能专线"| L5

    classDef client fill:#e8f4fd,stroke:#1d70b8,stroke-width:1px,color:#0b0c0c;
    classDef server fill:#f3f0ff,stroke:#6e40c9,stroke-width:1px,color:#0b0c0c;
    classDef backend fill:#fef3c7,stroke:#d97706,stroke-width:1px,color:#0b0c0c;
    class L1,L2 client;
    class L3,L4 server;
    class L5 backend;

五大分层职责与工程权衡矩阵

层级核心定位与职责技术选型示例核心收益工程权衡与代价值
① 浏览器层
(Browser)		提供 HTML/CSS/JS 执行沙箱；负责像素级渲染、用户手势捕获、Cookie/IndexedDB 存储与网络交互Chrome, Safari, WebKit, V8 引擎最终用户体验承载点、即时交互响应受制于客户端设备性能与网络带宽差异
② React UI 层
(UI Scheme)		声明式状态到视图的映射；管理组件树生命周期、Hooks、状态分发与合成事件系统React 19, JSX/TSX, React DOM极致灵活、心智模型简洁、庞大组件生态仅关注 UI，本身不提供路由、数据请求与构建工具，需搭配框架
③ Next.js 应用层
(Framework)		把 React 跑成完整生产应用：基于文件系统的路由、服务端组件 (RSC)、多模式渲染 (SSR/SSG/ISR)、打包优化与部署适配Next.js 14/15, Turbopack, App Router开箱即用、首屏加载极快、卓越的 SEO、零配置代码分割强约定规范、学习曲线陡峭、需要深入理解服务端/客户端运行时边界
④ API / BFF 层
(Orchestration)		服务编排：屏蔽微服务复杂性；跨服务聚合拼装数据；鉴权校验与防刷限流；为前端端型定制契约Next.js Route Handlers, NestJS, Hono, Fastify前后端彻底解耦；减少客户端 HTTP 请求轮次；保护内部核心系统引入额外中间跳跃（Hop）；需要维护一套 BFF 接口契约
⑤ 领域与数据层
(Core Backend)		复杂业务领域建模；金融级 ACID 事务持久化；长生命周期系统集成与高性能并行计算Go, Java (Spring), PostgreSQL, Redis, Kafka极致性能、强类型数据一致性、高可用与灾备研发周期相对较长，迭代更新较前台更加审慎

底座技术：语言与运行时引擎

五层架构之上是跨越前后端的同一套语言体系与运行环境：

flowchart LR
    A["JavaScript / TypeScript<br><b>统一开发语言</b><br>(全栈类型共享 / 语法契约)"] --> B["Node.js / Bun / Edge<br><b>服务端运行时底座</b><br>(提供非阻塞 I/O / 文件系统 / 网络套接字)"]
    B --> C["Next.js / BFF 框架<br><b>上层运行时宿主</b><br>(Serverless Functions / Node 容器)"]

    classDef base fill:#f6f8fa,stroke:#d0d7de,stroke-width:1px,color:#24292f;
    class A,B,C base;
  • JavaScript / TypeScript (语言层面)：统一前后端编码语法，实现 DTO（数据传输对象）类型定义的端到端复用。
  • Node.js / Edge Runtime (运行时层面)：为 Next.js 服务端渲染、Route Handlers 及 BFF 提供执行环境，负责处理 HTTP 套接字、读写缓存与系统交互。

React vs Next.js：本质区别与全维度对比

很多初学者容易将两者混淆，下表直观厘清两者的本质差异：

维度React (UI 方案)Next.js (全栈应用框架)
产品定位用于构建用户界面的 JavaScript 库基于 React 构建的企业级全栈 Web 应用框架
是否包含路由❌ 否（需依赖 React Router 或 TanStack Router）是（基于文件系统的 App Router / Pages Router）
代码执行宿主默认全部在客户端浏览器执行（SPA 单页应用模式）双宿主混合执行（服务端 Node/Edge + 客户端浏览器）
渲染模式仅客户端渲染 (CSR - Client Side Rendering)多模式混合：RSC、SSR、SSG、ISR、Streaming
数据获取机制useEffect()、fetch()、SWR、React Query服务端 async/await 直接查库 + Server Actions + Route Handlers
SEO 与首次有效绘制弱（初始 HTML 为空 div#root，依赖 JS 动态注入）极强（在服务端预生成完整语义化 HTML）
编译构建工具需自行配置 Vite、Webpack 或 Rspack内置 Turbopack / Webpack，深度整合 SWC 编译器
首屏包体积优化需手动做 React.lazy() 代码动态切分自动按页面路由分割，内置图片/字体/脚本优化组件

Next.js 关键边界：Server Component vs Client Component

Next.js App Router 引入了 React 革命性的组件边界概念。明确区分代码运行位置是避免打包体积失控的关键：

flowchart TD
    Page["页面入口 (Page / Layout)<br><b>默认: Server Component (服务端)</b>"] --> SC["纯展示/数据抓取组件<br>(直接访问服务端资源/安全调用API)"]
    Page --> CC["交互组件 ('use client')<br>(浏览器执行，注入交互行为)"]
    
    CC --> Hook["状态与事件<br>useState / useEffect / onClick"]
    SC --> DB["服务端资源<br>直接访问 Database / fs / 私有密钥"]

    classDef sc fill:#e1f5fe,stroke:#0288d1,stroke-width:1px,color:#01579b;
    classDef cc fill:#fff3e0,stroke:#f57c00,stroke-width:1px,color:#e65100;
    class Page,SC sc;
    class CC,Hook cc;
    class DB sc;

决策快速选型表

开发需求 / 使用场景组件类型选择声明标识与注意事项
直接读取数据库、操作服务端文件、使用私有 API 密钥Server Component默认无须声明；代码零包体积下发给浏览器
保持极小客户端 Bundle 体积（纯展示型大依赖，如 Markdown 解析库）Server Component第三方库仅在服务端执行，浏览器只接收编译后的 HTML
需要用户交互事件（onClick、onChange、onSubmit）Client Component必须在文件首行标记 'use client'
需要使用 React 状态与生命周期（useState、useEffect、自定义 Hook）Client Component需标记 'use client'，状态维护在浏览器端
需要访问浏览器专有 API（window、localStorage、navigator）Client Component需标记 'use client'，并在挂载后执行

现代 Web 渲染机制速查矩阵 (CSR / SSR / SSG / ISR / Streaming)

渲染模式渲染发生时机与位置适用场景优势与收益劣势与挑战
CSR
(客户端渲染)		浏览器加载 JS 后在本地即时渲染后台管理系统 (Admin)、深度交互仪表盘、SaaS 桌面端 Web服务器零渲染压力，交互无缝流畅首屏白屏时间较长，SEO 支持差
SSG
(静态站点生成)		项目构建编译时在服务端一次性生成 HTML文档中心、技术博客、营销官网、电商活动页极致加载速度（直接上 CDN 全球缓存），极高稳定性内容更新必须重新触发完整 Build
SSR
(动态服务端渲染)		用户发起 HTTP 请求时在服务端即时生成 HTML强个性化页面、用户个人中心、高动态时效新闻流强 SEO 支持，首屏即有可见内容增加服务器 CPU 与并发压力，TTFB 取决于后端耗时
ISR
(增量静态再生)		构建时生成，配置 revalidate 在后台静默按需重新生成大型电商海量商品详情页、社区论坛帖子详情兼具 SSG 的 CDN 性能与 SSR 的动态更新能力存在短暂的数据一致性窗口期（陈旧数据命中）
Streaming SSR
(流式渲染)		服务端利用 HTTP 流分块传输，配合 Suspense 逐步推送到浏览器包含复杂模块的电商首页（慢查询不阻塞主屏渲染）关键首屏秒开，次要区块骨架屏渐进式水合替换需要更复杂的异步状态设计与 Suspense 边界规划

什么时候需要引入 API / BFF 层？

并非所有项目都需要独立的 BFF 层。根据系统演进规模做出科学决策：

flowchart LR
    A{系统规模与复杂度} -->|小型/中型团队 单一数据库| B["架构一：Next.js 全栈直连<br>利用 Server Actions / Route Handlers<br>(架构极简，研发效率最高)"]
    A -->|跨平台 / 复杂微服务 / 多端协同| C["架构二：独立 API / BFF 层<br>为 Web/App 定制裁剪数据<br>(隔离微服务变动，解耦发布节奏)"]

    classDef opt fill:#f8fafc,stroke:#64748b,stroke-width:1px,color:#1e293b;
    class B,C opt;

1. 适合直接采用 Next.js 内置全栈方案（无须独立 BFF）

  • 项目属于初创期或中小型业务，核心逻辑以前端交付为主；
  • 数据层简单，可通过 Prisma / Drizzle 直接安全访问 PostgreSQL/MySQL；
  • 团队规模小（全栈工程师主导），过度分层会增加维护成本。

2. 必须引入独立 BFF 层的典型场景

  • 后端由数十个深层微服务构成：页面展示需要调用商品、库存、优惠券、风控、推荐等 5+ 个微服务，若由浏览器直接发起会导致严重网络瀑布（Waterfall）。BFF 在内网高速聚合后一次性返回；
  • 多端消费（Web + iOS + Android + 小程序）：各端对数据字段、图片尺寸与权限校验要求差异巨大，BFF 承担“千人千面”的数据裁剪转换；
  • 跨团队协作防腐：前端团队拥有 BFF 层的控制权，无需等待核心后台团队排期修改底层接口格式。

关联速查与拓展阅读

分类:编程与开发
标签: ReactNext.js前端架构BFFNode.js全栈开发速查表