⚛️ 前端框架选型

01 为什么要认真选框架？

前端框架不只是"写页面的工具"。它决定了：

• 渲染模式 — CSR/SSR/SSG/ISR，直接影响 SEO、首屏速度、服务器成本
• 路由系统 — 文件路由 vs 配置路由，影响项目结构和开发体验
• 数据获取 — 服务端组件、Loader、SWR，影响数据流和缓存策略
• 部署方式 — Node.js 服务器、Edge Runtime、纯静态，影响运维复杂度
• 生态系统 — 组件库、插件、社区回答数，影响开发效率
• 团队学习曲线 — React 开发者 vs Vue 开发者，招人难度不同

02 渲染模式全景图

理解渲染模式是选框架的前提。2026 年的主流框架都支持多种模式，但默认策略不同：

模式	何时渲染	适合场景	SEO	首屏速度	服务器成本
CSR	浏览器端	登录后的仪表盘、工具	❌ 差	❌ 慢	✅ 低
SSR	每次请求时	动态内容、个性化页面	✅ 好	🟡 中	🔴 高
SSG	构建时	博客、文档、营销页	✅ 好	✅ 快	✅ 低
ISR	构建时 + 按需重新验证	电商、内容站	✅ 好	✅ 快	🟡 中
Streaming SSR	请求时流式	复杂页面局部加载	✅ 好	✅ 快	🟡 中

03 Next.js HOT

是什么

React 生态的元框架，Vercel 官方维护。App Router (2023+) 引入了 React Server Components，将服务端和客户端渲染深度整合。2026 年 React 19 稳定后，Next.js 是 React 全栈开发的事实标准。

核心架构

• React Server Components (RSC) — 组件默认在服务端渲染，零 JS 发送到客户端。数据库查询直接写在组件里
• App Router — app/ 目录下的文件即路由，layout.tsx 嵌套布局，loading.tsx 自动 Suspense
• Server Actions — 表单提交直接调服务端函数，不需要手写 API Route
• Middleware — Edge Runtime 中运行的路由守卫，认证、重定向、A/B 测试
• ISR + On-Demand Revalidation — revalidatePath() / revalidateTag() 精准更新缓存

代码示例：SaaS 仪表盘页面

// app/dashboard/layout.tsx — 嵌套布局
import { Sidebar } from '@/components/sidebar'
import { auth } from '@/lib/auth' // 认证检查

export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const session = await auth()
  if (!session) redirect('/login')

  return (
    <div className="flex h-screen">
      <Sidebar user={session.user} />
      <main className="flex-1 overflow-auto">{children}</main>
    </div>
  )
}

// app/dashboard/page.tsx — 服务端组件，直接查数据库
import { db } from '@/lib/db'

export default async function DashboardPage() {
  const stats = await db.query('SELECT * FROM user_stats WHERE uid = $1', [userId])
  const recentOrders = await db.query('SELECT * FROM orders ORDER BY created_at DESC LIMIT 10')

  return (
    <div>
      <h1>仪表盘</h1>
      <StatsGrid data={stats} />
      {/* 客户端组件：交互、动画、实时更新 */}
      <LiveOrders initialData={recentOrders} />
    </div>
  )
}

// app/dashboard/actions.ts — Server Actions
'use server'
import { revalidateTag } from 'next/cache'

export async function updateProfile(formData: FormData) {
  const name = formData.get('name') as string
  await db.execute('UPDATE users SET name = $1 WHERE id = $2', [name, userId])
  revalidateTag('user-profile') // 精准刷新
}

代码示例：Middleware 认证守卫

// middleware.ts — Edge Runtime，零冷启动延迟
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const token = request.cookies.get('session-token')?.value
  
  // 受保护路由
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    if (!token) {
      return NextResponse.redirect(new URL('/login', request.url))
    }
    // 可在此验证 token 有效性（Edge 限制：不能用 Node.js API）
  }
  
  // 已登录用户访问登录页 → 重定向到仪表盘
  if (request.nextUrl.pathname === '/login' && token) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  
  return NextResponse.next()
}

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

优劣对比

何时选 Next.js

• 团队有 React 经验，想用 React 全栈开发
• SaaS 需要 SEO（营销页 + App 混合）
• 计划部署到 Vercel 或接受其自部署方案
• 需要丰富的第三方组件库和社区支持
• 需要 ISR 处理半静态内容

替代方案

如果不需要 SSR：纯 Vite + React (SPA) 更简单。如果嫌 Next.js 太重：Remix 更轻量但生态小。如果要极致性能：看 SvelteKit。

04 Nuxt STABLE

是什么

Vue 生态的元框架，由 Vue 核心团队成员 Sébastien Chopin 主导。Nuxt 3 (2022+) 基于 Vue 3 + Vite，引入了 Nitro 服务器引擎，支持多种部署目标。Vue 在中国和欧洲市场尤其流行。

核心架构

• Nitro — 独立的服务器引擎，支持 Node.js / Deno / Bun / Cloudflare Workers / Vercel / Netlify 等 15+ 部署目标
• Auto-imports — 组件、composables、工具函数自动导入，无需手动 import
• Server Routes — server/api/ 目录即 API 路由，内置 h3 框架
• useFetch / useAsyncData — 统一的 SSR-friendly 数据获取，自动去重和缓存
• Nuxt Layers — 模块化架构，可继承配置、组件、布局

代码示例：SaaS 仪表盘

// pages/dashboard.vue
<script setup lang="ts">
// Auto-imported — 不需要 import
const { data: stats, pending } = await useFetch('/api/user/stats', {
  // key 用于 SSR 数据去重和客户端缓存
  key: 'dashboard-stats',
  // 默认值防止模板 undefined 报错
  default: () => ({ revenue: 0, users: 0, orders: 0 }),
})

// 实时数据轮询
const { data: liveOrders } = await useFetch('/api/orders/live', {
  poll: 5000, // 每 5 秒轮询
})

// 认证中间件
definePageMeta({
  middleware: 'auth', // 会找 middleware/auth.ts
})
</script>

<template>
  <div>
    <h1>仪表盘</h1>
    <div v-if="pending">加载中...</div>
    <StatsGrid v-else :data="stats" />
    <LiveOrders :orders="liveOrders" />
  </div>
</template>

// server/api/user/stats.get.ts — API Route
export default defineEventHandler(async (event) => {
  const session = await getUserSession(event)
  if (!session) throw createError({ statusCode: 401 })

  const stats = await db.query(`
    SELECT revenue, user_count, order_count 
    FROM dashboard_stats WHERE tenant_id = $1
  `, [session.tenantId])

  return stats
})

代码示例：Nuxt Layer 复用

// nuxt.config.ts — 继承 SaaS 基础 Layer
export default defineNuxtConfig({
  extends: [
    '@my-saas/base-layer', // 共享布局、认证、样式
  ],
  // 只覆盖本项目特有配置
})

// layers/base/nuxt.config.ts — 基础 Layer
export default defineNuxtConfig({
  app: {
    head: { titleTemplate: '%s — MySaaS' },
  },
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode'],
  // 基础 Layout、中间件、composables 都在此定义
  // 子项目自动继承
})

优劣对比

何时选 Nuxt

• 团队有 Vue 经验，或主要面向中国市场
• 需要灵活的部署目标（不想绑 Vercel）
• 喜欢 Vue 单文件组件的开发体验
• SaaS 需要多租户 + 多品牌（Layer 继承很适合）

替代方案

如果不需要 SSR：Vite + Vue (SPA) 就够了。如果想用 Vue 但要更轻：Vinxi 是新选择。如果团队可切换技术栈：Next.js 生态更大。

05 SvelteKit RISING

是什么

Svelte 的官方应用框架，由 Svelte 创建者 Rich Harris 主导。Svelte 的核心哲学是编译时框架——没有虚拟 DOM，组件编译成原生 DOM 操作，运行时极小。SvelteKit 在此基础上提供 SSR/SSG/CSR 全支持。

核心架构

• Svelte 5 Runes — 新响应式系统：$state()、$derived()、$effect()，比 Svelte 4 的编译器魔法更明确
• +page.ts / +page.server.ts — Load 函数在服务端/客户端统一执行，类型安全
• Form Actions — 类似 Server Actions，但更简洁：+page.server.ts 导出 actions
• Adapters — 类似 Nuxt Nitro，支持 Vercel / Cloudflare / Node / 静态等
• 零运行时成本 — 组件编译成命令式 DOM 操作，bundle 体积比 React 小 5-10x

代码示例：SaaS 仪表盘

<!-- src/routes/dashboard/+page.svelte -->
<script lang="ts">
  // Svelte 5 Runes 语法
  let searchQuery = $state('')
  
  // Page data 由 +page.ts 的 load 函数提供
  let { data } = $props()
  
  // 派生状态：自动响应 searchQuery 变化
  let filteredOrders = $derived(
    data.orders.filter(o => 
      o.customer.includes(searchQuery)
    )
  )
</script>

<div>
  <h1>仪表盘</h1>
  <StatsGrid stats={data.stats} />
  
  <input bind:value={searchQuery} placeholder="搜索订单..." />
  
  <ul>
    {#each filteredOrders as order (order.id)}
      <li>{order.customer} — {order.amount}</li>
    {/each}
  </ul>
</div>

// src/routes/dashboard/+page.ts — Load 函数
import type { PageLoad } from './$types'

export const load: PageLoad = async ({ fetch, parent }) => {
  const { user } = await parent() // 从 layout 继承认证信息
  
  const [statsRes, ordersRes] = await Promise.all([
    fetch('/api/user/stats'),
    fetch('/api/orders/recent'),
  ])
  
  return {
    stats: await statsRes.json(),
    orders: await ordersRes.json(),
  }
}

// src/routes/dashboard/+page.server.ts — Form Actions
export const actions = {
  default: async ({ request, locals }) => {
    const formData = await request.formData()
    const name = formData.get('name') as string
    
    await db.updateUserProfile(locals.user.id, { name })
    return { success: true }
  },
}

代码示例：共享类型安全的 API

// src/routes/api/orders/+server.ts — API Route
import { json } from '@sveltejs/kit'
import type { RequestHandler } from './$types'

export const GET: RequestHandler = async ({ url, locals }) => {
  const page = Number(url.searchParams.get('page') ?? '1')
  const orders = await db.getOrders(locals.user.tenantId, { page })
  return json(orders) // 类型自动推断到前端
}

// 类型在整个 app 中共享——前端 load 函数、API Route、
// 组件都能获得完整的 TypeScript 类型推导
// 这是 SvelteKit 的隐藏杀手级特性

优劣对比

何时选 SvelteKit

• 性能是核心竞争力（ToC 产品、移动端优先）
• 团队小而精，愿意学习新技术
• SaaS 是内部工具或垂直领域（不需要巨大生态）
• 追求开发效率和代码简洁

替代方案

如果喜欢编译时理念但想要更大生态：等 SolidStart 成熟。如果需要 React 兼容：Next.js 是唯一选择。如果追求极致简洁但不用 Svelte：Astro + 岛屿架构。

06 Astro STABLE

是什么

内容优先的 Web 框架，核心创新是岛屿架构 (Islands Architecture)——默认零 JS 输出，只在需要交互的"岛屿"才水合。更独特的是：Astro 可以在同一个项目里混用 React / Vue / Svelte / Solid 组件。2026 年 Astro 5 引入了 Content Layer API 和 Server Islands。

核心架构

• 岛屿架构 — <ReactComponent client:load /> 只水合这个组件，其余保持纯 HTML
• 多框架支持 — 同一页面混用 React + Svelte + Vue 组件，互不干扰
• Content Collections — 类型安全的内容管理，Markdown/MDX 自动类型推导
• Astro DB — 内置 SQLite 数据库支持，适合轻量 SaaS
• View Transitions — 内置页面过渡动画，零配置 SPA-like 导航

代码示例：SaaS 营销站 + 仪表盘混合

---
// src/pages/index.astro — 营销首页，零 JS
import Hero from '../components/Hero.astro'
import Pricing from '../components/Pricing.astro'
import Newsletter from '../components/Newsletter.astro'
// 导入 React 交互组件 — 只这个组件会水合
import LiveDemo from '../components/LiveDemo.tsx'
---

<html>
  <body>
    <!-- 纯 HTML，零 JS -->
    <Hero />
    <Pricing />
    
    <!-- 这个组件会水合，其余不会 -->
    <LiveDemo client:visible />
    
    <!-- 表单提交也不需要 JS -->
    <Newsletter />
  </body>
</html>

---
// src/components/Newsletter.astro — 表单不需要 JS
---
<form action="/api/subscribe" method="POST">
  <input type="email" name="email" placeholder="your@email.com" required />
  <button type="submit">订阅</button>
</form>

---
// src/components/LiveDemo.tsx — React 交互组件
---
import { useState } from 'react'

export default function LiveDemo() {
  const [input, setInput] = useState('')
  const [result, setResult] = useState('')
  
  const handleSubmit = async () => {
    const res = await fetch('/api/demo', { 
      method: 'POST', 
      body: JSON.stringify({ input }) 
    })
    setResult(await res.text())
  }

  return (
    <div>
      <input value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={handleSubmit}>试一试</button>
      {result && <p>{result}</p>}
    </div>
  )
}

优劣对比

何时选 Astro

• SaaS 主要是内容/营销站，交互较少
• 文档站、博客、Landing Page 为主
• 需要混合不同框架的遗留组件
• SEO 和首屏速度是最高优先级

替代方案

如果同时需要内容站 + 复杂 App：Next.js (App Router) 一个搞定。如果纯文档站：Docusaurus / VitePress 更专精。如果想要零 JS 但不需要多框架：SvelteKit SSG 模式。

07 SolidStart EMERGING

是什么

Solid.js 的官方元框架。Solid.js 借鉴了 React 的 JSX 语法和 Hooks 概念，但用编译时响应式替代了虚拟 DOM——结合了 React 的熟悉感和 Svelte 的性能优势。SolidStart 提供了完整的 SSR/SSG/CSR 解决方案。

核心架构

• Fine-grained Reactivity — 不像 React 整组件重渲染，Solid 只更新变化的 DOM 节点
• Signals — createSignal() 是核心原语，类似 React useState 但更精确
• No Virtual DOM — 编译成真实 DOM 操作，和 Svelte 一样高效
• JSX — React 开发者零学习成本（语法层面）
• Vinxi — 底层构建框架，支持多种部署目标

代码示例

// src/routes/dashboard.tsx
import { createSignal, createResource } from 'solid-js'
import { Title } from '@solidjs/meta'

export default function Dashboard() {
  const [search, setSearch] = createSignal('')
  
  // 资源：自动追踪依赖，search 变化时重新获取
  const [orders] = createResource(search, async (q) => {
    const res = await fetch(`/api/orders?q=${q}`)
    return res.json()
  })

  return (
    <div>
      <Title>仪表盘 — MySaaS</Title>
      <h1>仪表盘</h1>
      <input 
        value={search()} 
        onInput={(e) => setSearch(e.currentTarget.value)} 
      />
      <Suspense fallback={<p>加载中...</p>}>
        <For each={orders()}>
          {(order) => <OrderCard order={order} />}
        </For>
      </Suspense>
    </div>
  )
}

// 服务端函数 — 类似 RPC
// src/routes/dashboard.ts (server function)
import { server$ } from 'solid-start/server'

export const getStats = server$(async () => {
  return await db.getDashboardStats()
})

优劣对比

何时选 SolidStart

• 团队是 React 背景但追求极致性能
• 愿意赌技术前沿，接受生态不成熟的风险
• 产品是高性能要求的工具类 SaaS

替代方案

如果想要 React 语法 + 性能但更稳定：Next.js + React Compiler。如果想要性能 + 编译时：SvelteKit 更成熟。如果想要 React 生态：Next.js 无可替代。

08 全面对比表

维度	Next.js	Nuxt	SvelteKit	Astro	SolidStart
底层框架	React	Vue 3	Svelte 5	多框架	Solid.js
渲染模式	CSR/SSR/SSG/ISR/Streaming	CSR/SSR/SSG/ISR/Hybrid	CSR/SSR/SSG	SSG (主) / SSR	CSR/SSR/SSG
Bundle 体积 (Hello World)	~85KB	~50KB	~10KB	~0KB (默认)	~15KB
运行时性能	🟡 中	🟡 中	✅ 快	✅ 最快	✅ 快
开发体验	🟡 有坑	✅ 好	✅ 最好	✅ 好	🟡 良好
生态规模	🔴 最大	🟡 大	🟡 中	🟡 中	🟡 小
招人难度	✅ 容易	🟡 中（中国易）	🔴 难	🔴 难	🔴 极难
部署灵活度	🟡 偏 Vercel	✅ 多平台	✅ 多平台	✅ 多平台	🟡 中
成熟度	✅ 生产级	✅ 生产级	✅ 生产级	✅ 生产级	🟡 前期
GitHub Stars	~130K	~55K	~20K	~50K	~5K
适合 SaaS 类型	全类型	全类型	性能敏感型	内容/营销型	工具型

09 决策树：选哪个？

10 SaaS 实战：前端架构模式

不管选哪个框架，SaaS 前端都有一些通用的架构模式：

10.1 认证流程

// 通用 SaaS 认证流程（以 Next.js 为例，其他框架同理）
// 1. Middleware 守卫：Edge 层拦截未认证请求
// 2. Layout 层获取 session：避免子页面重复获取
// 3. 客户端 token 刷新：access token 过期自动刷新

// lib/auth.ts — 统一认证工具
export async function getSession(): Promise<Session | null> {
  // 服务端：从 cookie 验证 JWT
  // 客户端：从内存/sessionStorage 读取
  // 两者逻辑统一，框架无关
}

// 中间件模式（所有框架都有）：
// Next.js: middleware.ts
// Nuxt: middleware/auth.ts
// SvelteKit: hooks.server.ts
// Astro: middleware.ts
// SolidStart: server functions + entry-server

10.2 多租户前端

// 多租户 SaaS 的前端策略
// 1. 子域名路由：{tenant}.mysaas.com
// 2. URL 路径：/t/{tenant}/dashboard  
// 3. 运行时切换：登录后选择租户

// Next.js — 子域名路由
// middleware.ts
export function middleware(req: NextRequest) {
  const hostname = req.headers.get('host')
  const subdomain = hostname?.split('.')[0]
  
  if (subdomain && subdomain !== 'www' && subdomain !== 'app') {
    // tenant.mysaas.com → 重写为 /t/[tenant]/...
    return NextResponse.rewrite(
      new URL(`/t/${subdomain}${req.nextUrl.pathname}`, req.url)
    )
  }
}

// 所有框架的通用模式：
// - Layout 层获取 tenant 信息
// - CSS 变量实现品牌定制（主色、Logo）
// - Feature flag 按租户控制功能

10.3 实时更新

// SaaS 仪表盘实时更新模式
// 1. WebSocket：双向实时（协作编辑、聊天）
// 2. SSE：单向推送（通知、状态更新）
// 3. Polling：简单但效率低（兼容性最好）

// 通用实时 Hook (框架无关)
function useRealtime<T>(url: string, initialValue: T) {
  const [data, setData] = useState(initialValue)
  
  useEffect(() => {
    // 优先 SSE
    const source = new EventSource(url)
    source.onmessage = (e) => setData(JSON.parse(e.data))
    
    // 降级 Polling
    source.onerror = () => {
      source.close()
      const interval = setInterval(async () => {
        const res = await fetch(url)
        setData(await res.json())
      }, 5000)
      return () => clearInterval(interval)
    }
    
    return () => source.close()
  }, [url])
  
  return data
}

// Svelte 版本更简洁：
// const data = createRealtimeResource('/api/live') 
// 自动追踪依赖，无需手动管理

11 与 Agent 架构的关联

如果你在构建 AI/Agent SaaS，前端框架选择有额外考量：

AI SaaS 需求	最佳框架	原因
AI Chat 界面	Next.js / SvelteKit	流式渲染 + 丰富组件库
AI 代码编辑器	Next.js	Monaco + react-dnd 生态
AI Agent 可视化	Next.js / SvelteKit	Canvas/WebGL 库 + 响应式状态
AI 文档/知识库	Astro	Content Collections + 零 JS
AI Dashboard	Next.js / Nuxt	Chart 库 + ISR + 认证生态

12 迁移与共存策略

已经有项目在跑了，想换框架怎么办？

12.1 微前端 / 渐进迁移

// 方案一：Module Federation（Webpack 5+ / Rspack）
// 新功能用新框架写，旧功能不变
// 适合大型遗留系统

// webpack.config.js (旧 React 应用)
new ModuleFederationPlugin({
  name: 'legacy_app',
  exposes: { './UserWidget': './src/widgets/UserWidget' },
})

// 新 Next.js 应用消费
const UserWidget = lazy(() => import('legacy_app/UserWidget'))

// 方案二：Astro 作为胶水层
// 新页面用 Astro 写，嵌入旧 React 组件
// <LegacyDashboard client:load /> — 旧 React 组件原封不动
// 逐步替换，不用 Big Bang 重写

12.2 Monorepo 多框架共存

// 推荐结构：Turborepo / Nx
// apps/
//   marketing/    → Astro (营销站)
//   dashboard/    → Next.js (仪表盘)
//   docs/         → Astro/VitePress (文档)
// packages/
//   ui/           → 共享组件 (React)
//   shared/       → 工具函数、类型
//   database/     → Prisma/Drizzle schema

// turbo.json
{
  "pipeline": {
    "build": { "dependsOn": ["^build"], "outputs": [".next/**"] },
    "dev": { "cache": false }
  }
}

13 性能优化清单

不管选哪个框架，这些优化对所有 SaaS 前端都适用：

• 代码分割 — 路由级自动分割 + 动态 import 大组件
• 图片优化 — Next.js Image / Nuxt Image / CDN 变换，自动 WebP/AVIF
• 字体优化 — next/font / @fontsource，避免 CLS
• 预加载关键资源 — <link rel="preload"> 首屏 CSS/JS
• ISR/缓存 — 半静态页面用 ISR，动态页面用 stale-while-revalidate
• Edge Runtime — 中间件和轻量 API 跑 Edge，降低延迟
• Bundle 分析 — @next/bundle-analyzer / rollup-plugin-visualizer
• Lighthouse CI — 每次 PR 自动跑 Lighthouse，回归检测

14 2026 趋势与展望

15 推荐阅读与链接

资源	链接
Next.js 文档	nextjs.org/docs
Nuxt 文档	nuxt.com/docs
SvelteKit 文档	kit.svelte.dev/docs
Astro 文档	docs.astro.build
SolidStart 文档	start.solidjs.com
框架对比 (2026)	framework-benchmarks
Agent 构建指南	→ Agent 构建方法论
Agent 工具系统	→ 工具系统设计
Agent 提示词工程	→ Cache Boundary / 注入防护