掌握 Next.js 中的 SSR：如何提升 SEO 和用户体验

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 (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

export default AboutPage;

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

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

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

import { GetServerSideProps } from 'next';

interface AboutProps {
  data: string;
}

const AboutPage: React.FC<AboutProps> = ({ data }) => {
  return (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// 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 (
    <div>
      <h1>About Us</h1>
      <p>{data}</p>
    </div>
  );
};

// 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 的文章。如果你想了解更多，可以关注我的网站。

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

以上是掌握 Next.js 中的 SSR：如何提升 SEO 和用户体验的详细内容。更多信息请关注PHP中文网其他相关文章！