Next.js12如何通过SSG和ISR实现动态增量静态页面生成？

2022-11-26 15:45:31

Next.js 12 中的 SSG 和 ISR：提升性能、稳定性和 SEO

一、什么是 SSG 和 ISR？

在当今的 Web 开发中，静态网站生成 (SSG) 和 增量静态生成 (ISR) 正受到越来越多的关注，因为它们可以大幅提升网站的性能、稳定性和 SEO 表现。

1. SSG（静态网站生成）

SSG 将网站的页面预渲染成 HTML 文件，然后部署到服务器上。当用户访问网站时，服务器直接向用户发送这些 HTML 文件，而无需动态生成页面内容。这种方式可以大大减少服务器的负载，提高网站的访问速度，同时对 SEO 非常友好。

2. ISR（增量静态生成）

ISR 是在 SSG 的基础上进一步优化，将部分页面内容预渲染成 HTML 文件，而将另一部分内容动态生成。当用户访问页面时，服务器会首先检查预渲染的 HTML 文件是否过期，如果过期，则重新生成 HTML 文件并返回给用户。这种方式可以同时兼顾性能和灵活性，非常适合那些内容频繁更新，但又需要快速加载的网站。

二、如何在 Next.js 12 中使用 SSG 和 ISR？

Next.js 12 提供了对 SSG 和 ISR 的开箱即用支持，开发者可以通过简单的配置就可以使用这些功能。

1. 配置 SSG

在 Next.js 项目中，可以在 pages 文件夹下创建需要进行 SSG 渲染的页面文件，并使用 export async function getStaticProps 方法来获取数据并预渲染页面。例如：

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://example.com/api/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

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

2. 配置 ISR

在 Next.js 项目中，可以在 pages 文件夹下创建需要进行 ISR 渲染的页面文件，并使用 export async function getServerSideProps 方法来获取数据并预渲染页面。例如：

// pages/blog/[slug].js
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://example.com/api/blog/${params.slug}`);
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

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