next.js实现SSR入门

Next.js 是一个基于 React 的框架，支持服务端渲染（Server-Side Rendering，简称 SSR）和静态站点生成（Static Site Generation，简称 SSG）。SSR 是指在服务端生成 HTML 页面后再发送到浏览器，而不是将所有工作交给客户端。这种方式可以提升页面的首屏加载速度并有助于 SEO。

第一部分：next.js实现SSR入门

以下是实现 Next.js 服务端渲染（SSR）的入门教程：

1. 初始化 Next.js 项目

安装 Next.js 项目

npx create-next-app@latest my-next-app
# 或者使用 yarn
# yarn create next-app my-next-app
# 或者使用 pnpm
# pnpm create next-app my-next-app

项目初始化完成后，进入项目目录：

cd my-next-app

然后启动开发服务：

npm run dev
# 或
# yarn dev
# 或
# pnpm dev

默认情况下，开发服务器运行在 http://localhost:3000。

2. 创建一个页面并实现 SSR

在 Next.js 中，SSR 的实现主要依赖于页面级别的 getServerSideProps 方法。getServerSideProps 是一个异步函数，用于在服务端获取数据并将其通过 props 传递给页面组件。

示例：创建一个简单的 SSR 页面

在 pages 目录下创建一个新的文件，例如 pages/ssr.js：

// pages/ssr.jsexport async function getServerSideProps(context) {// 模拟从 API 或数据库获取数据const data = { message: 'Hello from Server-Side Rendering!' };return {props: { data }, // 将数据作为 props 传递给页面组件};
}export default function SSRPage({ data }) {return (<div><h1>Server-Side Rendering Example</h1><p>{data.message}</p></div>);
}

启动开发服务器，访问 http://localhost:3000/ssr，你应该能看到页面展示的内容。

3. `getServerSideProps` 的工作原理

每次请求该页面时，Next.js 都会在服务端执行 getServerSideProps 方法。
getServerSideProps 的返回结果会被序列化为 JSON 数据，并通过 props 传递给页面组件。
当你需要动态获取数据并在页面渲染时始终保持最新时，getServerSideProps 是一个不错的选择。

4. 使用 API 数据

Next.js 中可以结合服务端 API 获取数据。例如：

在 pages/api 目录下创建一个简单的 API 路由 hello.js：

// pages/api/hello.jsexport default function handler(req, res) {res.status(200).json({ message: 'Hello from API!' });
}

修改 pages/ssr.js，从 API 获取数据：

// pages/ssr.jsexport async function getServerSideProps(context) {// 调用内部 APIconst res = await fetch(`http://localhost:3000/api/hello`);const data = await res.json();return {props: { data }, // 将数据作为 props 传递给页面组件};
}export default function SSRPage({ data }) {return (<div><h1>Server-Side Rendering with API</h1><p>{data.message}</p></div>);
}

5. 动态路由与 SSR

Next.js 支持动态路由，你可以结合动态路由和 SSR。

创建一个动态路由页面，例如 pages/post/[id].js：

// pages/post/[id].jsexport async function getServerSideProps(context) {const { id } = context.params;// 模拟从 API 或数据库获取与动态路由相关的数据const data = { id, title: `Post ${id}`, content: `This is the content of post ${id}.` };return {props: { data },};
}export default function PostPage({ data }) {return (<div><h1>{data.title}</h1><p>{data.content}</p></div>);
}