SSR（服务器端渲染）是 Next.js 中生成页面的另一种方法。在本文中，我想解释什么是 SSR、它是如何工作的，以及如何在 Next.js 项目的 Page Router 和 App Router 中实现它。

什么是SSR？

SSR是一种在用户发出请求后生成静态页面（或预渲染页面）的方法。这意味着每次请求都会生成一个静态页面。此方法对于需要经常更新的页面很有用，因为它可以确保数据始终是新鲜的

SSR 如何工作？

当您在Next.js中使用SSR时，每次用户请求实现了SSR的页面时，都会在发出请求后生成该页面。这意味着用户必须等待 Next.js 为每个请求再次生成并捆绑静态内容。静态页面准备好后，用户就可以看到请求的页面。

需要注意的是，SSR仅在服务器上运行，并且它会为每个请求生成一个静态页面，因此它不会在项目的构建过程中运行。

如何在 App Router 中实现 SSR

要在 App Router 中实现 SSR，您不需要编写特殊函数或设置特定配置，因为它在您的服务器组件中默认启用。

例如，如果您有一个静态页面并从 API 获取数据，则该页面将默认使用 SSR。需要注意的是，当使用 SSR 时，页面不会在构建时捆绑或预渲染。如果您在项目中使用动态页面，如果您不获取任何数据，它将默认使用 SSG。但是当您从 API 获取时，它将切换到 SSR，并且在构建期间不会捆绑任何静态页面。

这是在静态路由中实现SSR的示例：

import React from 'react';

const AboutPage = async () => {
  // Fetch data from an API or any server-side source
  const data = getDataFromApi();

  return (
    

      
About Us
      
{data}
    
  );
};

export default AboutPage;

如何在页面路由器中实现 SSR

要在页面路由器中实现 SSR，您需要在文件中创建 getServerSideProps 函数。该函数将在每次用户请求后调用。如果您使用动态路由，例如 [id] 文件，则还需要在文件中使用 getServerSideProps。该函数采用一个参数，通常称为 context，您可以从中检索 id，即动态页面的值。服务器在每次用户请求时都会调用此函数。

这是在 tsx 文件中实现的示例：

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export const getServerSideProps: GetServerSideProps = async () => {
  const data = getDataFromApi();
  return {
    props: {
      data,
    },
  };
};

export default AboutPage;

这是在 jsx 文件中实现的示例：

const AboutPage = ({ data }) => {
  return (
    

      
About Us
      
{data}
    
  );
};

// This function runs on the server on every request
export async function getServerSideProps() {
  const data = getDataFromApi();

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

export default AboutPage;

结论

SSR 是捆绑或创建静态页面的有用方法，但它不会在构建期间发生。当您需要根据每个用户请求更新页面以便用户可以看到最新数据时，您可以使用 SSR。但是，需要注意的是，它可能需要更多时间，并且不如 SSG（静态站点生成）或 ISR（增量静态重新生成）等其他方法那么快，因为它会为每个用户请求生成一个静态页面。

希望您喜欢这篇文章！如果您有任何疑问，请随时问我。如果您想了解 ISR 和 SSG，可以在此处查看我关于 ISR 和 SSG 的文章。如果你想了解更多，可以关注我的网站。

感谢您的阅读！暂时再见！