Next.js - 预渲染

简介

Next.js 是一个 React 应用程序的轻量级框架，提供了许多工具和功能，以便快速创建各种应用程序。

其中一个功能是预渲染（Pre-rendering），即在运行应用程序之前，将所有可能的页面预先生成为 HTML 文件。在访问网站时，这些文件将直接提供给浏览器，从而提高了网站的性能。

静态生成（Static Generation）

Next.js 提供了两种预渲染方式：静态生成（Static Generation）和服务器端渲染（Server-side Rendering）。

在静态生成中，每个可能的页面都会在构建时预先生成为静态文件。这些文件可以像普通的 HTML 文件一样进行浏览器缓存和 CDN 缓存，从而给用户提供更快的加载速度。

将页面预先生成为静态文件的好处包括：

• 更快的加载速度
• 更好的 SEO（搜索引擎优化）表现
• 更少的服务端压力

生成静态文件的方式有两种：

预渲染所有页面

通过在 Next.js 的配置文件中启用预渲染，将所有页面都静态生成为 HTML 文件。这样可以方便快捷地生成每个页面的静态文件。

// next.config.js

module.exports = {
  // 配置选项
  exportPathMap: async function (defaultPathMap) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/contact': { page: '/contact' }
    }
  }
}

在这个配置中，我们通过 exportPathMap 方法指定了每个页面的路径和名称。

通过运行 next build 和 next export 命令，可以将所有这些页面预先生成为静态 HTML 文件。

预渲染一部分页面

如果只需要预渲染部分页面，也可以使用 Next.js 提供的 getStaticProps 方法。这个方法用于获取页面的数据，并将其传递给页面组件。

// pages/about.js

function AboutPage(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export async function getStaticProps(context) {
  return {
    props: {
      title: 'About Page',
      description: 'This is the about page content'
    }
  }
}

export default AboutPage

在这个例子中，我们使用 getStaticProps 方法获取了页面的数据，并将其作为 props 传递给组件。在构建时，Next.js 会将这个页面预先生成为静态 HTML 文件。

基于数据的静态生成

在预渲染页面时，如果需要根据数据生成页面，可以使用 Next.js 的另一个方法：getStaticPaths。这个方法用于获取所有可能的 URL 参数，在构建时将它们预先生成为静态 HTML 文件。

// pages/[id].js

function PostPage(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  )
}

export async function getStaticPaths() {
  const response = await fetch('https://api.example.com/posts')
  const posts = await response.json()

  const paths = posts.map(post => ({
    params: { id: post.id }
  }))

  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps(context) {
  const { id } = context.params

  const response = await fetch(`https://api.example.com/posts/${id}`)
  const post = await response.json()

  return {
    props: {
      title: post.title,
      content: post.content
    }
  }
}

export default PostPage

在这个例子中，我们使用 getStaticPaths 方法获取了所有可能的 URL 参数，在构建时将它们预先生成为静态 HTML 文件。与此同时，我们也使用 getStaticProps 方法获取了页面的数据，并将其作为 props 传递给组件。

认知

预渲染是 Next.js 的一个强大功能，它可以显著提高网站的性能和 SEO 表现。通过使用 Next.js 提供的静态生成和基于数据的静态生成，可以快速方便地将所有可能的页面预先生成为静态 HTML 文件。