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

发布日期： 2024-10-16 阅读量： 作者： 网络

掌握 nextjs 中的 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;

上一篇: 微信开发实战之顶部导航栏（选项卡）

下一篇: 4 年内驾驭数据分析就业市场

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

随便看看