第三章：Meta Framework —— 门店不是只要装修，还要能营业 - 现代前后端完全指南：软件城市宇宙

这一章里，把 Meta Framework 看成“商场运营系统”。它不只决定店铺长什么样，还决定货怎么进、顾客怎么走、门什么时候开、服务台放哪。

纯 UI 框架只解决“页面怎么写”。

但真正上线时你还要考虑：

路由
服务端渲染
静态生成
数据加载
提交表单
API
打包和部署

这时候你要的是 Meta Framework。

#Next.js —— 纽约式综合商圈

tsx

// app/page.tsx
export default async function Page() {
  const now = new Date().toISOString();

  async function save() {
    'use server';
    console.log('saved');
  }

  return (
    <form action={save}>
      <h1>{now}</h1>
      <button type="submit">Save</button>
    </form>
  );
}

Next.js 的关键词：

App Router
React Server Components
Server Actions
Streaming
ISR

适合：

内容站 + 登录区混合体
电商
SaaS
React 全栈团队

不适合：

你只想做一个非常纯的静态站
你不想承担 RSC、缓存和服务端边界的复杂度

#Nuxt —— 上海式 Vue 商业区

// server/api/hello.get.ts
export default defineEventHandler(() => ({ msg: 'Hello Nuxt' }));

vue

<script setup lang="ts">
const { data } = await useFetch('/api/hello');
</script>

<template>
  <h1>{{ data?.msg }}</h1>
</template>

Nuxt 的强项是：

Vue 全栈体验更统一
SSR / CSR / Hybrid Rendering 切换顺手
server/ 目录直接带 API 能力

#Remix —— 柏林式 Web 原教旨商圈

tsx

import { json } from '@remix-run/node';
import { Form, useLoaderData } from '@remix-run/react';

export async function loader() {
  return json({ count: 1 });
}

export default function Route() {
  const data = useLoaderData<typeof loader>();
  return (
    <Form method="post">
      <h1>{data.count}</h1>
      <button type="submit">Refresh</button>
    </Form>
  );
}

Remix 的心智模型是：

loader 取数据
action 改数据
表单优先
渐进增强

它更尊重 Web 本身的规则，不是把浏览器完全当“壳子”。

#SvelteKit —— 哥本哈根式轻量商场

// src/routes/+page.server.ts
export const load = async () => ({ now: new Date().toISOString() });

export const actions = {
  default: async () => ({ ok: true }),
};

SvelteKit 的特点是：

load
form actions
ssr / csr / prerender
adapter 部署

它很轻，但边界要看清楚：

哪段代码跑服务端
哪段代码跑浏览器

#Astro —— 京都式内容街区

astro

---
import Counter from '../components/Counter.jsx'
---
<html>
  <body>
    <h1>Hello Astro</h1>
    <Counter client:load />
  </body>
</html>

Astro 的哲学不是“整站都是一个大前端应用”，而是：

默认静态 HTML
必要的地方再上交互
岛屿架构

非常适合：

博客
文档
品牌站
营销站

#TanStack Start —— 深圳式新施工区

tsx

import { createFileRoute } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';

const getNow = createServerFn().handler(async () => {
  return { now: new Date().toISOString() };
});

export const Route = createFileRoute('/')({
  loader: () => getNow(),
  component: Home,
});

function Home() {
  const data = Route.useLoaderData();
  return <h1>{data.now}</h1>;
}

TanStack Start 的气质更像：

类型安全优先
Router/Data Layer first
SSR / SPA / Static / ISR 可切

截至 2026-03-28，它仍偏新，适合愿意吃新工程能力的团队。

Meta Framework 速查：

框架	更适合什么城建项目
Next.js	React 全栈综合体
Nuxt	Vue 全栈综合体
Remix	表单流、CRUD、渐进增强
SvelteKit	轻量但完整的 Web 应用
Astro	内容站、文档、品牌站
TanStack Start	类型安全重度 React 团队

核心判断：

text

UI 框架解决：组件怎么写
Meta Framework 解决：组件怎么路由、怎么取数、怎么渲染、怎么提交、怎么部署