免费不用抽的 SSR 服务端渲染大揭秘，小白也能看懂！

2023-12-16 12:37:12

什么是服务端渲染？

服务端渲染 (SSR) 是一种渲染技术，它在服务器上生成 HTML，而不是在客户端上。当用户请求一个 SSR 页面时，服务器会执行 JavaScript 代码并生成一个完全渲染的 HTML 页面。然后，将此页面发送到客户端浏览器，浏览器可以立即将其显示在屏幕上。

SSR 的优势

SSR 具有以下优势：

更快的首次加载时间： 由于 HTML 已在服务器上生成，因此客户端浏览器可以立即将其显示，而无需等待 JavaScript 代码加载并执行。
更好的 SEO： SSR 页面在请求时就已经是完全渲染的，这意味着搜索引擎可以轻松地抓取和索引它们。这对于网站的 SEO 至关重要。
更丰富的用户体验： SSR 提供了更流畅、更响应的用户体验，因为它消除了客户端渲染页面时常见的闪烁和加载延迟。

SSR 的局限性

SSR 也有一些局限性：

更高的服务器负载： SSR 需要服务器在每次请求时生成 HTML，这可能会增加服务器负载。
潜在的延迟： 如果服务器响应缓慢，则 SSR 页面可能需要更长时间才能加载。
不适用于单页面应用程序： SSR 不适用于单页面应用程序 (SPA)，因为 SPA 在客户端上加载并执行 JavaScript 代码。

服务端渲染框架 Next.js

Next.js 是一个流行的 SSR 框架，它使构建 SSR 应用程序变得更加容易。 Next.js 提供了开箱即用的功能，例如：

自动代码分割： Next.js 会自动将您的代码拆分为较小的块，从而提高加载性能。
热重载： Next.js 会在您保存代码时自动重新加载您的应用程序，从而简化开发过程。
内置的路由： Next.js 提供了内置的路由支持，使您可以轻松创建和管理您的应用程序的 URL。

如何使用 Next.js 优雅地进行服务端降级

服务端降级是一种技术，它允许您在服务器负载过高时将您的 SSR 应用程序降级到客户端渲染。 Next.js 提供了一个内置的 getInitialProps 方法，可用于实现服务端降级。

在 getInitialProps 方法中，您可以检查服务器负载并决定是否在服务器上渲染页面或将其降级到客户端渲染。例如：

export async function getInitialProps({ req }) {
  // 检查服务器负载
  if (req.headers['x-now-shards'] > 1) {
    // 服务器负载过高，降级到客户端渲染
    return { props: {} };
  }

  // 服务器负载正常，在服务器上渲染页面
  return { props: { ... } };
}