从 Next.js 到帕累托：哪些在变，哪些不变

2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

你熟悉 Next.js。你了解基于文件的路由、布局、加载器和服务器端渲染（SSR）。你也可能深有体会其中的痛点：服务器组件与客户端组件的区分、“use client” 的繁琐操作、神秘的水合错误，以及在你写任何一行应用代码之前就已高达 233 KB 的客户端打包体积。

帕累托（Pareto） 提供了相同的 SSR 模式，但没有这些复杂性。它使用标准的 React 组件，用 Vite 替代 Webpack/Turbopack，客户端打包体积仅为 62 KB。本文将详细说明从 Next.js 迁移到帕累托时哪些地方发生了变化，哪些依然熟悉。

思维模式的转变

Next.js（App Router）： 默认情况下，每个组件都是服务器组件。想要使用 useState？那就得加上 "use client"。数据获取通过 async 服务器组件或路由级别的 generateMetadata 实现。你总是在思考服务器与客户端的边界问题。

帕累托（Pareto）： 每个组件都是可在服务器和客户端同时运行的标准 React 组件。数据获取发生在 loader.ts 文件中——这一模式借鉴自 Remix。这里没有 "use client" 指令，因为根本不存在服务器组件与客户端组件的划分。

Next.js 思维模式：  “这是服务器组件还是客户端组件？”
帕累托思维模式：   “这是数据还是界面？”

路由：几乎完全相同

如果你熟悉 Next.js App Router 的约定，那么帕累托的路由会立刻让你感到熟悉：

最大的区别在于：帕累托使用专门的 loader.ts 文件进行数据获取，而不是将页面组件设为异步函数。

数据获取：加载器取代异步组件

Next.js（App Router）：

// app/dashboard/page.tsx（服务器组件）
export default async function Dashboard() {
  const stats = await db.getStats()
  return <h1>{stats.total} 名用户</h1
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。