CLONE CODING

[Next.js] 三种渲染方式 - SSR、CSR、SSG：优缺点分析

CloneCoding
Web / Next.js
2023年9月6日

在制作网页应用时，传达内容给用户的方式是其中的关键环节。网页渲染的方法有很多，每种方法都有其优势和劣势。在这篇文章中，我们将详细探讨三种主要的网页渲染方法：SSR（服务器端渲染）、CSR（客户端渲染）以及SSG（静态站点生成），并为初学者明确解释每种方法的使用场景及其优缺点。

了解SSR(服务器端渲染)

SSR（Server Side Rendering）指的是在服务器上呈现网页的方法。

当用户访问某个网页时，服务器会完全渲染该页面的内容，并将完整的HTML格式页面发送到用户的浏览器。因此，浏览器可以直接显示页面，无需额外执行JavaScript。

SSR(服务器端渲染)的工作流程

请求：当用户请求访问一个网页时，这一请求会被发送到服务器。
数据获取：服务器通过数据库或API来获取该网页所需的数据。
渲染：服务器利用所获取的数据完整地渲染出网页。
响应：服务器将渲染好的网页发送给用户。
显示：用户的浏览器会展示从服务器接收到的完整网页。

SSR示例：使用Next.js的简单示例

Next.js为我们提供了便捷的工具来实现SSR。以下是一个使用Next.js实现的简单SSR网页示例。

1. 编写数据获取函数：首先，我们在服务器上编写一个数据获取函数。在这个示例中，我们将使用一个返回模拟数据的函数。

javascript

function fetchData() {
  return {
    title: "与Next.js共舞的SSR",
    content: "理解使用Next.js进行的服务器端渲染"
  };
}

2. 页面渲染：在Next.js中，我们可以使用getServerSideProps函数从服务器获取数据，并将这些数据传递给页面组件。

javascript

export async function getServerSideProps() {
  const data = fetchData();
  return {
    props: { data }
  };
}

function HomePage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default HomePage;

在上述示例中，getServerSideProps只在服务器端运行。通过此函数获取的数据会被传递给HomePage组件。因此，用户能够直接看到渲染后的HomePage组件。

使用Next.js，我们只需几行简单的代码就能实现SSR。对于那些希望提高网页加载速度和改进SEO的开发者来说，SSR是一个非常有用的工具。

SSR(服务器端渲染)的优点与缺点

SSR 是在 Web 应用中采用服务器对页面进行渲染的技术。虽然这种技术在某些情况下带来巨大的优势，但也存在一些局限性。了解这些优缺点有助于判断 SSR 是否适合您的项目。

SSR的优点

快速的首屏加载时间：用户可以直接接收到包含所有所需数据的渲染页面，从而大大加快了首屏的加载速度，显著提高了用户体验（UX）。
SEO 优化：搜索引擎的爬虫可以轻松地在不执行 JavaScript 的环境中识别并索引服务器渲染的页面内容，从而提高 SEO 效果。
高效的缓存机制：在 SSR 的环境下，可以将一次渲染的 HTML 页面存储在缓存中，当接收到相同的请求时，可以使用缓存数据进行快速响应。例如，热门的博客文章或不经常更新的静态页面在首次渲染后可以存储其结果，为后续请求提供快速响应，从而减轻服务器负担，为用户提供快速的页面加载体验。
浏览器兼容性：使用基于 JavaScript 的前端框架时，旧版本的浏览器可能不支持某些 JS 功能。采用 SSR，服务器渲染页面并向客户端提供完成的 HTML，这意味着它不再依赖客户端的 JavaScript 执行，从而确保在旧版浏览器上也能正确显示页面。

SSR的缺点

服务器负担增加：需要为每个用户渲染页面，这会给服务器带来额外的负担。在高流量的情况下，服务器的压力可能会显著增加。
开发复杂度提高：客户端与服务器之间的交互可能变得更加复杂，这可能增加开发和调试的难度。
TTFB（首字节响应时间）延迟：由于服务器需要额外的页面渲染时间，第一个数据包到达用户的时间可能会稍有增加。

了解CSR(客户端渲染)

客户端渲染（CSR）是指不在服务器端预先渲染页面，而是在客户端（即用户的网页浏览器）渲染页面的方式。

当用户访问网页时，服务器不提供初始HTML结构，而仅发送JavaScript文件。浏览器执行此JavaScript，通过API调用等方式获取所需数据，然后构建网页。

CSR(客户端渲染)的工作流程

请求: 当用户访问网页时，初始的HTML几乎为空，但它包含必要的JavaScript和CSS。
下载: 用户浏览器会下载所需的JavaScript和CSS文件。
渲染: 一旦JavaScript下载并执行，它会从API或其他外部资源中获取所需数据。然后，根据这些数据在客户端渲染网页。
展示: 当数据到达浏览器时，网页会向用户显示渲染的内容。

这种方法可能会导致初次加载时间较长，但由于数据或视图更改时无需重新加载整个页面，只需更新变更的部分，因此可以为用户提供流畅的体验。

使用CSR时，Next.js是否必要？

虽然仅使用React.js就可以实现CSR，但使用Next.js比仅使用React.js具有许多明显的优势。以下是Next.js的主要特点和优势：

基于页面的路由: Next.js根据文件和文件夹结构自动提供路由，从而无需额外的路由设置就能轻松实现页面间的导航。
内置的优化: Next.js内置了自动代码分割、优化图像处理、全局CSS和模块CSS支持等多种优化功能。
API路由: 在Next.js中，您可以在/pages/api中创建API路由，简化后端逻辑处理。这意味着即使没有单独的服务器，也可以处理API请求。
插件和社区支持: Next.js支持多种插件和扩展功能，并得到了庞大、活跃的社区的支持，为解决各种问题和提供资源。

因此，如果只需要CSR，那么仅使用React.js可能就足够了。但考虑到Web应用程序的成长、扩展性、多种渲染方法的需求和优化功能，使用Next.js会带来许多优势。

CSR示例：使用Next.js的简单示例

javascript

import { useEffect, useState } from 'react';

function HomePage() {
  const [data, setData] = useState({ title: '', content: '' });

  useEffect(() => {
    async function fetchData() {
      // 此处可以通过API调用实际获取数据。
      // 在此示例中，我们使用setTimeout模拟异步处理。
      const mockData = await new Promise(resolve => {
        setTimeout(() => {
          resolve({
            title: '通过CSR渲染的标题',
            content: '这是通过CSR渲染的内容。'
          });
        }, 1000);
      });
      setData(mockData);
    }

    fetchData();
  }, []);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default HomePage;

此代码是在Next.js项目中以CSR方式加载并渲染数据的示例。useEffect和useState是React的Hooks，用于管理组件状态和生命周期。

在代码中，useEffect内的fetchData函数在网页首次加载时执行一次，异步获取数据，并将其设置为状态。随后，此数据在组件中渲染。

CSR(客户端渲染)的优点与缺点

客户端渲染(CSR)是指所有渲染工作均在浏览器(客户端)中进行的技术方法。这种方法适用于处理网络应用的动态部分，尤其在现代网络应用如单页面应用(SPA)中经常被采用。

CSR的优点

快速的交互体验：初次加载后，所有渲染资源已在客户端加载完成，因此与用户的互动非常迅速。这意味着页面切换、动画等UI交互流畅无阻。
减轻服务器负担：服务器只需要提供静态文件(如JavaScript、CSS、HTML)，从而减少了渲染的负担。
前后端分离：由于采用API来获取数据，前端与后端的开发可以分开进行。这意味着可以同时进行开发，并且可以轻松地构建高重用性的组件结构。

CSR的缺点

初始加载延迟：由于客户端需要下载并执行所有JavaScript文件，因此初始页面加载速度可能较慢。
SEO问题：传统的网络爬虫仅扫描HTML内容而不执行JavaScript，因此可能难以识别完全通过CSR方法渲染的页面内容。但近年来，许多搜索引擎已经具备执行JavaScript的能力，以解决此问题。
浏览器负担：由于所有的渲染工作都在浏览器中完成，低配置的设备或浏览器可能会出现性能下降。
安全问题：在客户端进行的代码对用户完全公开，因此难以在客户端隐藏重要的逻辑或数据。

总体而言，虽然CSR在某些网络应用中可能非常有效，但在使用之前，确保它与应用的需求相匹配是很重要的。

了解SSG(静态网站生成)

SSG（静态站点生成）是一种预先将所有网页转化为静态文件的方法。

这种生成的网页会在每次服务器请求时为客户端提供相同的文件。此方法非常适合博客、市场营销网站、文档站点等内容不经常更改的网站。

SSG(静态网站生成)的工作流程

构建时间：在开发者构建网站时，所有网页会预先转化为静态文件。此时，它会从外部资源（如：数据库、API）中提取所需的数据并加入其中。
请求：当用户请求访问某个网页时，此请求会被传递到服务器或CDN。
响应：已经生成的静态文件会立即提供给用户，用户可以直接接收文件，无需额外的渲染或数据获取过程。
展示：用户的浏览器会显示从服务器接收到的静态文件。

SSG示例：使用Next.js的简单示例

javascript

export async function getStaticProps() {
  const data = await fetchData(); // 从外部获取数据的函数
  return {
    props: { data }
  };
}

function BlogPage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default BlogPage;

以上代码示例展示了如何利用Next.js的SSG功能静态生成博客页面。getStaticProps函数在构建时执行，用于获取数据，并使用这些数据生成静态页面。

SSG(静态网站生成)的优点与缺点

SSG的优点

加载速度快：因为提供预生成的静态文件，无需服务器处理时间，通过CDN可以在全球任何地方快速提供内容。
搜索引擎优化：预生成的静态页面被搜索引擎的爬虫很好地识别，因此有助于搜索引擎优化。
服务器成本低：由于无需动态处理，服务器的负担减少，从而可能节省托管费用。
安全性高：仅提供静态文件，因此对各种服务器端攻击都是安全的。

SSG的缺点

构建时间：对于大型网站，生成所有页面可能需要较长时间。
实时更新的限制：内容更改后，需要重新构建网站。因此，对于需要实时数据更新的应用可能不太适用。
动态处理限制：需要为每个用户单独执行的功能（例如：用户账户功能）可能需要单独的客户端逻辑。

总的来说，根据特定的情况和需求，SSG可能非常有用。但是，选择适当的渲染方法时，需要考虑应用的特点和所需功能。

在Web开发中，渲染占据了非常重要的部分。SSR、CSR以及SSG都可以在各自的环境和需求下表现出色。不能说其中一个方法在所有情况下都是最好的。当您开发一个网站或应用时，重要的是深入了解其特性和用户的需求，并考虑本文介绍的这三种方法的优劣，从而选择最佳的方法。

Web / Next.js 类别的其他文章

[Next.js] 何时使用 SSR、SSG 与 CSR - 探讨适当的应用场景	2023年9月7日
[Next.js] 三种渲染方式 - SSR、CSR、SSG：优缺点分析	2023年9月6日
[Next.js] 使用环境变量的简单方法	2023年8月11日