Next.js 中不同形式的预渲染

在 Next.js 中，预渲染（pre-rendering）是一种将页面提前在服务器端生成 HTML 的技术，这样做可以提高页面加载速度并改善 SEO（搜索引擎优化）。Next.js 支持多种不同形式的预渲染，本文将介绍这些不同的预渲染方法。

静态生成

静态生成（static generation）是一种在构建时生成 HTML 并将其缓存的预渲染方法。它可以提供最快的加载速度，并且可以缓存 HTML，以减少服务器负载。

在 Next.js 中，可以通过在页面组件中导出 getStaticProps 函数来实现静态生成。这个函数可以异步地获取必要的数据，并将其传递给页面组件。

示例代码：

export default function HomePage({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

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

  return {
    props: {
      posts,
    },
  }
}

在上面的代码中，getStaticProps 函数会异步地获取数据，并将其提供给 HomePage 组件。当页面被生成时，页面组件将使用这些数据来呈现页面。这样，您的页面就可以在生成时进行预渲染，并提供最佳的加载性能。

基于路由参数的静态生成

有时候，您希望根据不同的路由参数来生成不同的静态页面。在 Next.js 中，可以通过在页面组件中导出 getStaticPaths 和 getStaticProps 函数来实现这个目的。

getStaticPaths 函数定义了所有可能的路由参数，并将其传递给 getStaticProps 函数。getStaticProps 函数获取相关数据，并将其用于生成静态页面。

示例代码：

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

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

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

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`)
  const post = await res.json()

  return { props: { post } }
}

在上面的代码中，getStaticPaths 函数异步地获取了所有可能的路由参数，这些参数会通过 params 对象传递给 getStaticProps 函数。在 getStaticProps 函数中，根据路由参数获取了相关数据，并将其传递给了页面组件。

客户端渲染

客户端渲染（client-side rendering）是一种在页面加载后使用 JavaScript 在客户端浏览器中生成 HTML 的技术。虽然客户端渲染可能比预渲染更慢，但它可以支持动态内容和交互。

在 Next.js 中，可以将页面组件导出为默认导出即可使用客户端渲染。在客户端渲染中，组件将在访问页面时，使用浏览器的 JavaScript 引擎动态生成 HTML。

示例代码：

export default function HomePage() {
  const [posts, setPosts] = useState(null)

  useEffect(() => {
    async function fetchPosts() {
      const res = await fetch('https://api.example.com/posts')
      const posts = await res.json()
      setPosts(posts)
    }

    fetchPosts()
  }, [])

  if (!posts) {
    return <div>Loading...</div>
  }

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

在上面的代码中，使用 useState 和 useEffect 进行数据获取和更新。在组件渲染时，页面将动态生成 HTML。

总结

在 Next.js 中，有多种不同的预渲染方法可供选择，包括静态生成和客户端渲染。选择正确的预渲染方法取决于您的应用程序的性能需求和内容类型。无论您选择哪种方法，都可以从 Next.js 所提供的优秀的工具和 API 中受益。