第二章：使用 Next.js 框架

1. 从手动搭建到框架

上一章，我们通过手动搭建的方式，深入理解了 SSR 的工作原理、需要解决的核心问题（如同构、路由、数据预取、状态同步等）以及相应的解决方案。这个过程对于掌握 SSR 的本质至关重要。

然而，在实际的商业项目开发中，从零开始搭建 SSR 项目效率较低且容易出错。因此，我们通常会使用成熟的框架来处理这些复杂的底层配置。

1.1 为什么选择 Next.js？

目前主流的 React SSR 框架主要有两个：UmiJS 和 Next.js。

• UmiJS: UmiJS 3.0 版本发布后，其 SSR 功能仍在开发中 ("Coming soon")。旧的 2.0 版本虽然支持 SSR，但其 SSR 实现模式很大程度上参考了 Next.js。
• Next.js: 一个专门为 React 设计的、功能强大且被广泛应用的生产级框架。SSR 是其核心功能之一。

鉴于 UmiJS 的现状以及其与 Next.js 的相似性，学习 Next.js 不仅能掌握一个流行的框架，其知识也能平滑迁移到未来 UmiJS 的 SSR 功能上。因此，本章我们将重点学习 Next.js。

2. Next.js 快速入门

我们将参考 Next.js 官方文档 进行手动搭建，以便更清晰地理解其核心构成。

2.1. 步骤一：安装核心依赖

Next.js 需要三个核心包：next (框架本身), react, 和 react-dom。

npm install next react react-dom

2.2. 步骤二：配置 package.json 脚本

在 package.json 文件中添加官方推荐的三个脚本命令：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

• dev: 启动开发服务器。Next.js 会自动处理编译、热更新（Hot-Reloading）等工作。
• build: 为生产环境构建和优化应用。
• start: 启动生产环境服务器，该服务器用于运行 build 命令生成的应用。

2.3. 步骤三：创建页面与文件路由系统

Next.js 最具特色的功能之一就是基于文件系统的路由。

1. 在项目根目录下创建一个名为 pages 的文件夹。
2. 在该文件夹内创建的任何 React 组件文件都会被自动映射为一个路由。

示例:

1. 创建首页 (/):

   // pages/index.jsx
   const HomePage = () => {
       return <h1>首页</h1>;
   };
   export default HomePage;

   注意: 在新版的 Next.js 中，如果只是简单的 JSX，可以省略 import React from 'react';。

2. 创建电影页 (/movies):

   // pages/movies/index.jsx
   const MoviesPage = () => {
       return <h1>电影页</h1>;
   };
   export default MoviesPage;

   路由规则: pages 目录下的 movies/index.jsx 文件会映射到 /movies 路径。

3. 创建 Page1 (/page1):

   // pages/page1.js
   const Page1 = () => {
       return <h1>Page 1</h1>;
   };
   export default Page1;

   路由规则: pages 目录下的 page1.js 文件会映射到 /page1 路径。

3. 运行应用

3.1. 开发模式

1. 启动服务器:

   npm run dev

   Next.js 会在 3000 端口启动一个开发服务器，并自动创建一个 .next 目录用于存放编译后的文件和缓存。建议将 .next 目录添加到 .gitignore 文件中。

2. 验证:

   • 访问 http://localhost:3000 -> 显示 "首页"。
   • 访问 http://localhost:3000/movies -> 显示 "电影页"。
   • 访问 http://localhost:3000/page1 -> 显示 "Page 1"。
   • 在任意页面右键“查看网页源代码”，可以看到完整的 HTML 内容，证明 SSR 已成功运行。
   • 尝试修改任意页面文件的代码并保存，浏览器中的内容会自动更新，证明热更新已生效。

3.2. 生产模式

部署应用到生产环境需要两步：

1. 构建应用:

   npm run build

   此命令会生成一个经过代码分割、打包和优化的生产版本，输出到 .next 目录。

2. 启动生产服务器:

   npm run start

   此命令会启动一个高性能的 Node.js 服务器来运行构建好的应用。

通过以上简单的步骤，我们就利用 Next.js 快速搭建起了一个功能完备、性能优异的 SSR 应用。它自动处理了我们在第一章中手动解决的几乎所有问题，极大地提升了开发效率。