在服务器端使用 props 释放 Next.js 预渲染

Next.js 是一种流行的 JavaScript 框架，提供服务器端渲染和静态站点生成功能。预渲染是 Next.js 的一项重要功能，它允许开发人员在将页面发送到客户端之前在服务器上渲染页面。它允许更快地将页面发送到客户端，从而使用户体验更快、更流畅。此外，还可以将服务器端的 props 传递给页面，使页面更加个性化和动态化。在本文中，我们将讨论使用 Next.js 进行预渲染的基础知识，以及如何使用服务器端 props 来创建更多动态页面。

什么是预渲染？

预渲染是一种在将页面内容发送到客户端之前在服务器上生成页面内容的技术。从 NextJS 端，您准备页面呈现所需的所有值并将它们作为道具传递。只需定义缓存标头即可为内容启用缓存。加载内容后，NextJS 会启动一个称为 hydration 的过程。在此过程中，它附加所有事件和其他侦听器，以便在它之后，应用程序开始作为常规单页应用程序运行。

预渲染的好处

这种技术有很多好处，但最主要的是速度。在典型的单页应用程序中，通常的过程是获取所需的静态内容。这意味着需要一组 JavaScript、库、CSS 和模板。之后，它请求获取该页面所需的数据。一旦它都被加载，它就会开始构建内容并在浏览器中呈现它。
与服务器端呈现的不同之处在于，根据客户端的请求，在服务器上准备数据并生成内容。最终结果作为一个包发送给客户端。这样可以更快地交付内容，这也意味着改进和更流畅的用户体验以及更好的 SEO。

使用服务器端道具

对于使用服务器端渲染的例子，我们可以从使用一个简单的组件开始，它只显示人的名字和姓氏。

// /server-side-props
export default function ServerSideProps({ person }) {
  const { firstName, lastName } = person;

  return (
    <>
      Hello {firstName} {lastName}
    </>
  )
}

该组件不会使用服务器端呈现，但也没有必要。然而，我们可以有一个显示不同人姓名详细信息的动态页面。然后我们可以使用服务器端渲染来准备这些值并根据请求开始渲染它们。我们可以通过在公开页面组件的同一文件中导出 getServerSideProps 函数来启用它。

// /server-side-props
export default function ServerSideProps({ person }) {
  const { firstName, lastName } = person;

  return (
    <>
      Hello {firstName} {lastName}
    </>
  )
}

export async function getServerSideProps(context) {
  return {
    props: {
      person: { firstName: "John", lastName: "Doe" }
    }, // will be passed to the page component as props
  }
}

在上面的示例中，使用的值作为 props 传递给组件。但是，在 getServerSideProps 中，值是硬编码的。这打破了服务器端渲染的重点。但是这些值可能取决于某些 URL 路径参数，并且可以从某些 API 或数据库中检索这些值。

在这种情况下，我们需要一个路径 ID。函数 getServerSideProps 有一个参数，context，我们在其中获取所有需要的请求数据，包括 id 参数。

export async function getServerSideProps(context) {
  const personId = context.params.id;
  const personData = await fetchData(personId);
  return {
    props: {
      person: personData
    },
  }
}

在上面的代码中，使用 await 调用了 fetchData 函数。这是可能的，因为 getServerSideProps 函数被标记为异步，因此您可以在其中发出异步请求。

在 getServerSideProps 中从本地 API 获取数据

如果预渲染内容使用在 NextJS 项目 API 上公开的数据，不希望在 getServerSideProps 函数中调用该 API。如果这样做，首先，用户会请求获取内容，然后会发出另一个请求来获取数据。请求完成后，运行预渲染内容，全部发送给用户。更好的解决方案是排除 API 路由使用的数据逻辑，并直接在 getServerSideProps 函数中调用它。

何时使用服务端渲染

只要应用程序依赖于需要根据请求获取的数据，就可以使用服务器端渲染。这可能是授权数据或地理位置。但是当你在编写代码时，如果有数据需要在开始时获取而不是更新，可能是使用服务器端渲染的一个很好的指标。