Next.js 自动静态优化

Next.js 是一个流行的 React 框架，具有内置的服务器渲染功能。它还提供了自动静态优化功能，这意味着它可以在构建时根据页面和数据自动确定哪些页面可以预渲染为静态页面，哪些页面需要在每次请求时动态生成。

静态页面生成

静态页面生成（SSG）指将页面内容提前生成为 HTML 文件，然后在用户访问页面时，直接返回静态文件，从而提高性能。Next.js 内置了静态页面生成功能。在构建时，可以通过将页面的 getStaticProps 函数导出来，来指定需要在构建时进行静态页面生成的页面。

以下是一个简单的示例：

import React from 'react';

export default function MyPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <div>{data.content}</div>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://my-api.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

首先，进行必要的导入，并定义一个 MyPage 组件。然后，在页面代码之外，定义了一个 getStaticProps 函数。这个函数发起了 HTTP 请求，获取特定的数据，并返回给页面组件。由于函数被导出，它在构建时被自动调用，数据将在页面构建时提前生成并缓存为静态页面。

运行时生成

运行时生成（SSR）指当页面被访问时，服务器动态生成内容，然后发送给客户端。这适用于需要根据用户请求动态生成内容，例如博客文章页面，评论系统等。您可以使用 getServerSideProps 方法来指定页面需要在每次请求时动态生成。

以下是一个简单的示例：

import React from 'react';

export default function MyPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <div>{data.content}</div>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch('https://my-api.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

在这个示例中，getServerSideProps 函数返回与 getStaticProps 函数相同的数据格式，但是每次请求都会被调用，并动态计算页面的数据。

结论

使用 Next.js，可以轻松地在项目中实现静态页面生成和运行时生成。具有快速生成和自动缓存优化的优点，大大提高了页面的性能和速度。