# Next.js 入门（服务端渲染、静态生成）

URL: https://caijiao.org/react/chapter18/nextjs
Source: docs/react/chapter18/nextjs.md
Description: Next.js 是一个基于 React 的开发框架，支持服务端渲染（SSR）和静态生成（SSG）。它通过提供简单的 API 和优化的构建过程，使开发者能够轻松构建高效、可扩展的应用。本文将介绍 Next.js 的基础概念，并通过实例展示服务端渲染与静态生成的使用方法。

Next.js 是一个开源的 React 框架，它使得 React 应用能够在服务端渲染（SSR）和静态生成（SSG）之间进行灵活的选择。通过 Next.js，开发者能够创建既能在客户端执行的应用，又能在服务器上预渲染的页面，从而提升性能和 SEO。

## 服务端渲染（SSR）

服务端渲染（SSR）是指应用的 HTML 页面在服务器上预先生成，然后发送给客户端。这意味着用户在访问页面时，可以立即看到页面内容，而不是等待 JavaScript 加载后再渲染。

在 Next.js 中，启用 SSR 很简单，只需在页面组件中使用 `getServerSideProps` 方法即可。

### 使用 `getServerSideProps` 实现 SSR

`getServerSideProps` 是 Next.js 提供的一个异步函数，它会在每次请求时运行，获取数据并将数据传递给页面组件。

```javascript
// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>服务端渲染页面</h1>
      <p>{data}</p>
    </div>
  );
};

// getServerSideProps 会在每次请求时运行
export async function getServerSideProps() {
  const data = '这是从服务端获取的数据';
  return {
    props: { data }, // 传递给页面组件的属性
  };
}

export default Home;
````

在上面的代码中，`getServerSideProps` 会在页面加载之前执行，并将数据传递给页面组件。

## 静态生成（SSG）

静态生成（SSG）是指在构建时（而不是每次请求时）生成 HTML 文件，这些文件可以直接部署到 CDN 上，从而提供更快的加载速度。

在 Next.js 中，启用 SSG 只需在页面组件中使用 `getStaticProps` 方法。`getStaticProps` 会在构建时执行一次，生成静态内容。

### 使用 `getStaticProps` 实现 SSG

```javascript
// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>静态生成页面</h1>
      <p>{data}</p>
    </div>
  );
};

// getStaticProps 会在构建时执行一次
export async function getStaticProps() {
  const data = '这是静态生成的数据';
  return {
    props: { data }, // 传递给页面组件的属性
  };
}

export default Home;
```

在上面的代码中，`getStaticProps` 会在构建时执行并将数据传递给页面组件。这个方法适用于静态内容和无需频繁更新的页面。

## SSR 和 SSG 的区别

| 特性   | 服务端渲染（SSR）                 | 静态生成（SSG）                    |
| ---- | -------------------------- | ---------------------------- |
| 渲染时机 | 每次请求时都会在服务器上渲染页面           | 页面只在构建时渲染一次，生成静态 HTML 文件     |
| 性能   | 请求时需要等待服务器处理，因此加载速度稍慢      | 静态页面加载非常快，通常通过 CDN 提供        |
| SEO  | 适合 SEO，因为 HTML 在服务器渲染时已经生成 | 适合 SEO，页面在构建时生成并直接部署到服务器     |
| 数据更新 | 页面每次请求时都会获取最新的数据           | 页面数据只能在构建时获取，如果数据变化，需要重新构建应用 |

## 如何选择 SSR 或 SSG？

* 使用 SSR：适合那些需要动态更新的数据，或者需要在每次请求时获取最新内容的页面。
* 使用 SSG：适合那些不常变化的数据，或静态内容，例如博客文章、新闻页面等。

Next.js 允许你在同一个应用中同时使用 SSR 和 SSG，给你提供最大的灵活性。

## 总结

Next.js 通过提供 `getServerSideProps` 和 `getStaticProps`，让你能够轻松地在 React 应用中实现服务端渲染（SSR）和静态生成（SSG）。根据不同的业务需求，你可以选择适合的渲染方式，提升用户体验和性能。

* `getServerSideProps` 用于服务端渲染，适合动态页面。
* `getStaticProps` 用于静态生成，适合静态页面。
* Next.js 允许你灵活选择渲染方式，并在项目中结合使用。