全栈框架学习笔记

1. 什么是全栈框架？

全栈框架指的是一种既能写前端页面，又能写后端逻辑的 Web 开发框架。

它通常会把下面这些能力整合在一起：

• 页面路由
• 组件渲染
• 服务端渲染
• API 接口
• 数据获取
• 表单提交
• 权限认证
• 缓存
• 部署

简单理解：

传统前后端分离：
前端项目 React/Vue + 后端项目 Express/Spring Boot

全栈框架：
一个框架里同时处理页面、接口、服务端逻辑和部署

常见全栈框架：

• Next.js
• Nuxt
• Remix
• SvelteKit
• SolidStart
• Astro

其中 Next.js 是 React 生态中最常见的全栈框架。

2. 为什么会出现全栈框架？

早期前端主要负责页面展示，后端负责数据和业务逻辑。

随着前端复杂度提高，纯前端框架逐渐遇到一些问题：

1. 首屏加载慢
2. SEO 不友好
3. 客户端 JS 包越来越大
4. 数据请求逻辑分散
5. 前端和后端接口联调成本高
6. 登录、鉴权、缓存、部署都需要额外方案

全栈框架的目标是：

把 Web 应用常见能力整合起来，让开发者用一套框架完成从页面到服务端逻辑的开发。

3. 全栈框架和普通前端框架的区别

3.1 普通前端框架

例如 React、Vue 本身主要解决的是：

• 组件如何写
• 状态如何管理
• 页面如何更新

但它们通常不直接规定：

• 路由怎么组织
• 服务端如何渲染
• API 怎么写
• 数据如何缓存
• 项目如何部署

所以使用 React 时，通常还要自己搭配：

• React Router
• Vite
• Axios
• Express
• 状态管理库
• 部署平台

3.2 全栈框架

全栈框架在前端框架基础上，继续提供：

• 文件系统路由
• 服务端渲染
• 静态生成
• API 路由
• 服务端数据获取
• 构建优化
• 图片优化
• 中间件
• 部署约定

例如 Next.js 基于 React，但比 React 提供了更多应用级能力。

4. 全栈框架主要解决的问题

4.1 路由组织

全栈框架通常采用文件系统路由。

例如 Next.js App Router：

app/
  page.tsx              -> /
  about/
    page.tsx            -> /about
  blog/
    page.tsx            -> /blog
  blog/[id]/
    page.tsx            -> /blog/:id

开发者不用手动配置路由表，文件结构就是路由结构。

4.2 渲染模式

全栈框架通常支持多种渲染方式：

• CSR：客户端渲染
• SSR：服务端渲染
• SSG：静态站点生成
• ISR：增量静态再生成
• RSC：React Server Components
• Streaming：流式渲染

不同页面可以选择不同策略。

例如：

后台系统：CSR 或 SSR
博客文章：SSG
电商商品详情：SSG + ISR
用户个人中心：SSR
搜索结果页：SSR
交互组件：CSR

4.3 API 接口

很多全栈框架允许在同一个项目中写 API。

例如 Next.js Route Handler：

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers()

  return Response.json(users)
}

这样前端页面和后端接口可以在同一个项目里开发。

4.4 数据获取

传统前端常见方式：

useEffect(() => {
  fetch('/api/user')
    .then(res => res.json())
    .then(data => setUser(data))
}, [])

全栈框架中，服务端组件或服务端加载函数可以直接获取数据：

export default async function Page() {
  const user = await getUser()

  return <div>{user.name}</div>
}

好处：

• 减少客户端请求瀑布流
• 数据更早准备好
• 敏感逻辑不暴露给浏览器
• 更容易做缓存和权限校验

4.5 性能优化

全栈框架通常内置很多优化能力：

• 代码分割
• 路由级懒加载
• 图片优化
• 字体优化
• 缓存策略
• 预加载
• 服务端渲染
• 流式响应

开发者不需要从零搭建完整优化体系。

4.6 部署约定

全栈框架通常和部署平台结合紧密。

例如：

• Next.js 常部署到 Vercel、Node 服务器、Docker
• Nuxt 常部署到 Node、Nitro、边缘环境
• Remix 可以部署到 Node、Cloudflare Workers 等环境
• SvelteKit 通过 adapter 适配不同平台

全栈框架不只关注开发，也关注上线。

5. 常见全栈框架介绍

5.1 Next.js

Next.js 是 React 生态中最流行的全栈框架之一。

主要特点：

• 基于 React
• 支持文件系统路由
• 支持 SSR、SSG、ISR
• 支持 App Router
• 支持 React Server Components
• 支持 Server Actions
• 支持 API Routes / Route Handlers
• 图片和字体优化能力强

适合场景：

• 官网
• 博客
• 电商
• SaaS 应用
• 后台管理系统
• 内容平台

5.2 Nuxt

Nuxt 是 Vue 生态中的全栈框架。

主要特点：

• 基于 Vue
• 支持文件系统路由
• 支持 SSR、SSG
• 支持服务端 API
• 支持自动导入
• 支持模块生态

适合已经熟悉 Vue 的开发者。

5.3 Remix

Remix 是 React 生态中的全栈框架。

它更强调 Web 标准和服务端数据流。

主要特点：

• 基于 React
• 重视 HTML Form、Request、Response 等 Web 标准
• 使用 loader 获取数据
• 使用 action 处理提交
• 嵌套路由能力强
• 错误边界设计清晰

Remix 的思想是：

尽量利用浏览器和 Web 平台已有能力，而不是全部交给客户端 JavaScript。

💡 现状说明：Remix 团队已将 Remix 的能力合并进 React Router v7，新项目官方推荐直接使用 React Router v7（它同时具备库模式和框架模式）。Remix 的 loader / action 等核心理念被延续了下来，学习时了解这层关系即可。

5.4 SvelteKit

SvelteKit 是 Svelte 生态中的全栈框架。

主要特点：

• 基于 Svelte
• 编译时优化
• 运行时代码少
• 文件系统路由
• 支持 SSR、SSG
• 通过 adapter 部署到不同环境

适合追求轻量、性能和简洁语法的项目。

5.5 Astro

Astro 是一个偏内容站点的现代框架。

主要特点：

• 默认输出更少 JavaScript
• 适合内容型网站
• 支持 React、Vue、Svelte 等多个 UI 框架
• Island Architecture，岛屿架构
• Markdown/MDX 支持好

适合：

• 博客
• 文档站
• 营销页
• 内容官网

6. 核心概念：CSR、SSR、SSG、ISR

6.1 CSR 客户端渲染

CSR，全称 Client Side Rendering。

流程：

浏览器下载 HTML 空壳 -> 下载 JS -> 执行 JS -> 请求数据 -> 渲染页面

优点：

• 交互体验好
• 适合后台系统
• 前后端分离清晰

缺点：

• 首屏可能较慢
• SEO 不友好
• 依赖客户端 JS

6.2 SSR 服务端渲染

SSR，全称 Server Side Rendering。

流程：

请求页面 -> 服务端获取数据 -> 生成 HTML -> 返回给浏览器 -> hydration 激活交互

优点：

• 首屏更快
• SEO 更好
• 用户能更早看到内容

缺点：

• 服务端压力更大
• 每次请求都可能要计算页面
• 缓存设计更复杂

6.3 SSG 静态生成

SSG，全称 Static Site Generation。

流程：

构建时生成 HTML -> 部署静态文件 -> 用户访问时直接返回 HTML

优点：

• 访问速度快
• 服务器压力小
• 安全性高
• 适合内容固定页面

缺点：

• 内容更新需要重新构建
• 不适合强个性化页面

6.4 ISR 增量静态再生成

ISR，全称 Incremental Static Regeneration。

它可以让静态页面按一定时间重新生成。

例如商品详情页：

第一次构建生成页面
用户访问时直接返回静态 HTML
超过缓存时间后，后台重新生成新页面

适合：

• 商品页
• 新闻页
• 博客页
• 内容更新不算特别频繁的页面

7. 全栈框架中的前后端关系

全栈框架并不是说前端开发者完全替代后端开发者。

它更像是把一部分后端能力放进前端项目中：

• 页面数据查询
• 轻量 API
• 表单提交
• 权限校验
• BFF 层
• 聚合多个后端接口

BFF，全称 Backend For Frontend，意思是“面向前端的后端”。

例如：

浏览器 -> Next.js 服务端层 -> Java / Go / Node 后端服务 -> 数据库

Next.js 这一层可以负责：

• 页面渲染
• 登录态读取
• 接口聚合
• 数据格式转换
• 缓存

真正复杂的业务系统仍然可以由专门后端服务承担。

8. 全栈框架的项目结构示例

以 Next.js App Router 为例：

my-app/
  app/
    page.tsx
    layout.tsx
    about/
      page.tsx
    blog/
      page.tsx
      [id]/
        page.tsx
    api/
      users/
        route.ts
  components/
    Header.tsx
    Footer.tsx
    Button.tsx
  lib/
    db.ts
    auth.ts
    utils.ts
  public/
    logo.png
  package.json

含义：

• app：页面路由和布局
• components：通用组件
• lib：工具函数、数据库、鉴权逻辑
• public：静态资源
• api：接口路由

9. 全栈框架中的数据流

一个典型页面的数据流可能是：

用户访问 /products
       ↓
服务端执行 products/page.tsx
       ↓
读取数据库或请求后端 API
       ↓
生成页面内容
       ↓
浏览器显示页面
       ↓
用户点击“加入购物车”
       ↓
Client Component 触发请求或 Server Action
       ↓
服务端更新数据

核心思想：

展示型数据尽量在服务端准备，交互型逻辑交给客户端和服务端动作配合完成。

10. 全栈框架的优势

10.1 开发体验更统一

页面、接口、服务端逻辑可以放在一个项目里。

好处：

• 少维护一个后端项目
• 类型共享更方便
• 联调成本更低
• 项目结构更统一

10.2 更好的首屏性能

通过 SSR、SSG、Streaming 等方式，用户能更快看到页面内容。

10.3 更好的 SEO

搜索引擎可以直接读取服务端生成的 HTML。

适合：

• 官网
• 博客
• 商品详情
• 文档站
• 新闻页面

10.4 更方便的服务端能力

全栈框架可以直接写服务端逻辑，例如：

• 读取 Cookie
• 验证登录状态
• 查询数据库
• 调用后端服务
• 处理表单提交
• 设置响应头

11. 全栈框架的缺点

11.1 心智负担更高

开发者需要理解：

• 哪些代码在服务端运行
• 哪些代码在客户端运行
• 缓存什么时候生效
• 页面什么时候重新生成
• 数据什么时候更新

这比纯 CSR 项目更复杂。

11.2 部署环境更复杂

普通 React/Vue 项目可以直接构建成静态文件。

但全栈框架如果使用 SSR、API、Server Actions，就需要 Node 服务或特定平台支持。

11.3 容易混淆前后端边界

比如在客户端组件里误用服务端代码，或者把敏感数据传给浏览器。

需要明确：

服务端：数据库、密钥、权限校验、敏感逻辑
客户端：交互、状态、浏览器 API、动画

11.4 缓存策略需要认真设计

全栈框架通常有多层缓存：

• 浏览器缓存
• CDN 缓存
• 页面缓存
• 数据请求缓存
• 构建缓存

如果不了解缓存规则，可能出现页面数据不更新的问题。

⚠️ Next.js 版本差异（重要）：缓存默认行为在不同版本中变化很大。Next.js 14 中 fetch 请求默认会被缓存；而从 Next.js 15 开始，fetch 请求和 GET Route Handler 默认不再缓存，需要显式开启（如 fetch(url, { cache: 'force-cache' })）。学习时一定要确认自己用的是哪个版本，避免照搬过时教程。

12. 什么时候适合用全栈框架？

适合：

• 需要 SEO 的网站
• 内容站、博客、文档站
• 电商网站
• SaaS 应用
• 需要服务端渲染的项目
• 需要前后端快速一体化开发的项目
• 希望减少客户端 JS 的项目

不一定适合：

• 非常简单的静态页面
• 纯后台管理系统且 SEO 不重要
• 已经有成熟后端体系，不需要服务端渲染
• 团队暂时不熟悉 SSR、缓存、部署

13. 全栈框架和传统前后端分离怎么选？

13.1 选择全栈框架

如果项目需要：

• SEO
• 首屏速度
• 页面级数据获取
• 服务端渲染
• 快速开发完整产品
• 前端团队掌控页面服务层

可以考虑全栈框架。

13.2 选择传统前后端分离

如果项目是：

• 内部后台系统
• 强业务后端
• 多端共用同一套 API
• 前后端团队分工明确
• 前端只负责页面交互

传统前后端分离仍然很合适。

14. 面试常见问题

14.1 什么是全栈框架？

全栈框架是同时支持前端页面和服务端逻辑的 Web 框架。它通常集成路由、渲染、API、数据获取、缓存和部署能力，例如 Next.js、Nuxt、Remix、SvelteKit。

14.2 Next.js 和 React 有什么区别？

React 是 UI 库，主要负责组件和状态更新；Next.js 是基于 React 的全栈框架，除了组件开发，还提供路由、服务端渲染、静态生成、API 路由、图片优化和部署能力。

14.3 什么情况下需要 SSR？

当页面需要更好的首屏速度、SEO，或者页面内容依赖服务端实时数据时，可以使用 SSR。例如商品详情页、搜索结果页、用户个人中心等。

14.4 SSG 和 SSR 有什么区别？

SSG 是构建时生成 HTML，访问速度快，适合内容相对固定的页面；SSR 是请求时生成 HTML，数据更新更实时，适合个性化或实时性更强的页面。

14.5 全栈框架会取代后端吗？

不会完全取代。全栈框架可以承担 BFF、页面渲染、轻量接口和表单处理等工作，但复杂业务、数据库设计、核心服务、微服务架构通常仍然需要后端系统。

14.6 全栈框架最大的难点是什么？

最大的难点是理解运行环境和缓存。开发者要清楚哪些代码运行在服务端，哪些运行在客户端，以及页面和数据什么时候会缓存、什么时候会重新获取。

15. 学习路线

建议按下面顺序学习：

1. 复习 React 或 Vue 基础
2. 理解 CSR、SSR、SSG 的区别
3. 学习文件系统路由
4. 学习服务端数据获取
5. 学习 API 路由或 Route Handler
6. 学习表单提交和服务端动作
7. 学习 Cookie、Session、登录鉴权
8. 学习缓存和重新验证机制
9. 学习部署方式
10. 做一个完整项目

推荐练手项目：

• 博客系统
• 商品列表和详情页
• 登录注册系统
• Todo 应用带数据库
• 后台管理系统
• Markdown 文档站

16. 和 RSC 的关系

RSC 是 React 的服务端组件模型，全栈框架是应用级框架。

以 Next.js 为例：

React：提供组件能力
RSC：让组件可以在服务端运行
Next.js：提供路由、渲染、数据获取、部署等完整应用能力

所以可以这样理解：

RSC 是 React 的能力，全栈框架会把这种能力整合进实际项目开发流程中。

17. 一句话总结

全栈框架的核心价值是：

用一套框架同时管理页面、数据、服务端逻辑、渲染性能和部署流程。

它让前端不只是写页面，也能参与应用架构和服务端渲染，是现代前端向全栈方向发展的重要工具。