客户端渲染 VS 服务器端渲染 VS 静态网站生成

DebugUsery
941 阅读14分钟

客户端渲染vs.服务器端渲染vs.静态网站生成

今天，网站很像应用程序。你可以发送消息，进行交易，购物，以及更多。简而言之，在用户端需要更多的互动。因此，服务器端的渲染不再能同时处理所有这些。它正在退居二线，为许多先进的渲染技术让路。

在过去的发展历史中，网站只是基本信息，很少或没有页面上的互动。它们是没有动态元素的静态网页。HTML、CSS和JavaScript是在浏览器上样式、脚本和显示页面的标准方法。为了在屏幕上显示这些HTML元素，你必须准备一个HTML文档，并在服务器端将其送入。

当用户请求一个页面时，服务器将把HTML元素转换为用户屏幕上的有意义的信息。当时的网站几乎是静态的。服务器端渲染是加载一个.html 页面的唯一方法。这种方法在当时非常有效，因为大多数页面都显示纯文本和图像。

快进到今天，情况不再是这样了，网站已经进步了。企业希望获得动态内容并正确显示。他们希望网站能够快速流畅地加载，具有完美的性能，拥有良好的用户体验，并在搜索排名结果上得到搜索引擎的优化。因为网站是大多数公司的销售线索。

这些新的先进渲染技术包括客户端渲染（CSR）、服务器端渲染（SSR）和静态网站生成（预渲染）。开发人员经常发现自己对这些术语感到困惑。如果你发现自己处于这个圈子，本教程就是为你准备的。我们将讨论这些技术术语，探讨它们的优点和缺点，以及何时考虑采用A或B方法。

客户端渲染（CSR）

客户端渲染是在引入了这种开发风格的JavaScript框架后开始流行的。这些框架包括Angular、React、Vue.js等。

在客户端渲染的网络应用中，JavaScript控制页面上显示的内容。通常情况下，不是使用HTML文件加载所有的网页内容，而是包含一个JavaScript文件来处理网站加载的动态架构。

这就是网站在客户端呈现时的情况。

  • 用户使用网站地址（链接）在浏览器上发送一个访问网站内容的请求。
  • 服务器在客户端第一次请求访问网站时，将静态文件（CSS和HTML）提供给客户端的浏览器。
  • 客户端浏览器将首先下载HTML内容，然后是JavaScript。这些HTML文件连接着JavaScript。这个加载过程发生在用户看到由网站开发者定义的加载符号时。网站对用户来说还不可见。
  • 浏览器下载JavaScript后，内容就在客户端的浏览器上动态生成。
  • 当客户端导航并与网站互动时，网站内容就变得可见。

这个过程意味着初始加载的时间延长了。在初始加载时间过后，网站的导航将是超级流畅和超级快速的，只需要进行API调用来动态获取内容。

初始加载自然很慢，因为浏览器正试图将网站的初始运行时间数据加载到客户的浏览器中。

这一切结束后，网站将动态加载。JavaScript框架控制网站导航，使用{内容交付网络}(/cdn-edge-compute-platform/)来处理客户端浏览器中的DOM。

这个过程涉及在客户端（浏览器）而不是网络服务器上获取和处理数据，因此被称为 "客户端渲染"。

客户端渲染的一个伟大用例是单页应用程序（SPA）。在SPA中，每个页面都是在客户端浏览器上渲染的。服务器只提供一个单一的HTML文档。

一旦HTML被加载，React等JavaScript框架将在浏览器上控制网站的DOM结构。在这种情况下，每个页面将从框架的API获取的数据历史中加载。一旦初始加载结束，访问不同的路线或重新加载页面将是超级快的。

支持客户端渲染开发风格的JavaScript框架包括React、Angular和Vue.js。

让我们举一个使用Vue.js的CSR的简单例子。

这里有两个主要文件，HTML标记和JavaScript文件。

在大多数情况下，内容被包裹在容器内divs ，根ids ，以控制应用程序的状态和数据。

下面是一个例子。

index.html

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Learning Vue</title>
		<script src="https://unpkg.com/vue@3.0.0"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ title }} - by {{ author }}, {{ age }} years old</p>

			<button v-on:click="age++">Increase age</button>
			<button @click="age--">Decrease age</button>
			<div @click="changeTitle('Oathbringer')">Change book title</div>
		</div>
		<script src="app.js"></script>
	</body>
</html>

当你把这个文件提供给客户端浏览器时，网页通常是一个空白的裸体HTML文档。它通常几乎不包含任何可见内容。

在这种情况下，Vue.js将完全控制这个页面。也就是说，内容是用JavaScript渲染的。

让我们继续，并将其包含在app.js 。

const app = Vue.createApp({
	data() {
		return {
			title: "The Way of Kings",
			author: "Brandon Sanderson",
			age: 45,
		};
	},
	methods: {
		changeTitle(title) {
			// this.title = 'Words of Radiance'
			this.title = title;
		},
	},
});
app.mount("#app");

刷新页面。现在网站内容是可见的。Vue.js渲染了该页面所需的不同组件。

如果你点击OnClick 处理程序，不同视图和组件之间的链接和路由将在浏览器中呈现，而不是在服务器上。JavaScript拦截了这些请求。它不会到服务器上。相反，Vue.js在浏览器中处理这些。网站感觉更快、更顺畅。

服务器端渲染（SSR）

SSR是常用的渲染解决方案之一。它与客户端渲染几乎是相反的。

在SSR解决方案中，渲染是由服务器进行的。用户向服务器发出请求；服务器按需处理HTML、CSS和JavaScript，并向用户的浏览器提供一个完全填充的页面。

与客户端渲染不同的是，以后每当用户采取行动访问一个不同的页面时，渲染过程都会重复进行。服务器每次都会按需提供页面。浏览器为每一个新的页面，以及每一个请求，不断向服务器发出请求。

SSR的缺点是，它是资源密集型的，会延迟向用户提供内容。与单一页面的应用程序相比，它增加了页面加载时间。这是因为服务器必须重复渲染动态内容。而在CSR上，内容是静态的，在页面重新加载时几乎是即时显示。

当你的网站经历了大量的用户涌入时，可能会导致连接错误。这发生在有太多的用户试图访问资源，而你的后台服务器没有足够的计算能力来处理所有这些请求。

在这种方法中，发送到浏览器的一切都来自于服务器。服务器负责获取网络内容，处理并在浏览器上显示这些内容。每一次请求的处理都是在服务器上完成的，因此被称为服务器端渲染。

看一下这个例子。假设你有一个假想的服务器，其HTTP地址为test.com ，并且你正在托管以下index.html 文档作为主页面。

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Home page</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <a href="blog.html">Go to blog page</a>
    <h1>My new website</h1>
    <p>This is the Home page</p>
</html>

当你打开地址test.com ，浏览器会向服务器发出请求。服务器向浏览器返回一个包含请求内容的响应。在本例中，是一个链接、一个标题和一个段落。

假设你现在想点击这个渲染过的主页上的链接，加载blog.html ，如下图所示。

<!DOCTYPE html>
<html>
<head>
    <title>My Blog Page</title>
    <meta name="description" content="My awesome blog">
    <meta name="keywords" content="design blog, web blog">
</head>
<body>
    <a href="index.html">Go to Home page</a>
    <h3>Blog Post One</h3>
    <small>Posted by Section on April 5 2021</small>
    <p></p>
</head>
<body>
</html>

当你点击链接访问blog.html ，整个页面将以新的内容重新呈现。

如果你再点击Go to Home page 。浏览器将进入互联网并向服务器发出请求。服务器将对index.html 文件进行全新渲染，尽管这个页面之前已经被渲染过了。你明白这一点吗？每一个页面都是独立的，都是独立渲染的。

静态网站生成（SSG）

基本上，静态网站生成器是一个程序或工具，用于生成基于原始数据和模板的静态HTML网站和页面。静态网站生成器将不得不手动编码HTML页面的过程自动化。

这些生成器预先建立HTML页面并提前提供给用户。这意味着，每当用户请求一个页面时，它的加载没有任何延迟。由于网站是静态的，生成器在构建时就渲染了页面，所以这发生得非常快。

静态网站生成器的一个近亲是内容管理系统（CMS），如WordPress。内容管理工具被用来生成和管理网站内容和网页。它们都使用模板的概念来避免手动编写、格式化和编码网页。

在CMS的情况下，内容存储在CMS数据库中，当用户请求页面时，服务器从这个数据库中查询这些内容，将其填入适合这个网页内容的模板中，生成所请求的页面，并在浏览器上提供给用户。

另一方面，静态网站生成在模板上使用相同的概念来自动生成页面。然而，与CMS不同的是，内容是静态的，而且模板提前加载。这些页面立即就可以在用户的浏览器上显示。

这意味着服务器没有调用API来渲染任何HTML文档。这些页面是在建立阶段渲染的。你所有的页面都会加载得非常快，因为它们已经预先缓存、预先生成和预先渲染了。

提供静态网站托管服务的常见平台包括Section、GitHub和Netlify。你不需要一个你自己的数据库。因此，这使得使用这种托管服务和运行自动构建的静态生成的页面变得无比容易。

一些流行的静态网站生成工具包括Next.js、Gatsby、Jekyll和Hugo等。

我推荐的静态网站生成器工具之一是Next.js。Next.js为你提供了静态网站生成的好处和服务器端渲染的灵活性。增量式静态再生提供了静态网站生成（SSG）和服务器端渲染（SSR）的好处。

该功能允许你在已经建立了你的网站后更新静态内容。这意味着你的用户可以通过最新的数据获得极快的体验。

也可以试试其他生成器。

小贴士

客户端渲染

优点

它们速度快。虽然网站的第一次加载可能很慢，但一旦渲染，其他要求的页面就会立即提供。

缺点

它们的初始加载时间较长。这增加了用户体验不佳的可能性，当用户在等待CSR完全渲染网站时感到沮丧，他们可能会离开你的网站。

搜索引擎优化受到打击。CSR最大的缺点之一是它影响搜索引擎机器人。CSR使用JavaScript。当搜索引擎机器人在网站上爬行时，这会减慢它们的速度。搜索引擎机器人首先抓取和索引一个HTML文件页面。

这意味着，在索引过程中，JavaScript内容可能会被遗漏和不被包括，导致部分索引，影响SEO。当页面被完全加载时，网站只加载一个初始的HTML标记。你将只有一个元标签用于所有页面。

何时使用CSR

当你有大量的用户访问你的网页内容时，这种方法很适合。内容在每个用户请求时被渲染一次。

如果你的应用程序有一个复杂的用户界面和大量的动态内容，而这些内容又不一定依赖于搜索引擎优化，那么这种方法就很适合。

CSR是混合网络应用的一个好选择。如果你想创建一个网站，感觉更像一个移动应用程序，这将是一个单页应用程序的使用案例。例如，Twitter，当你切换页面时，你没有页面刷新，当数据加载时，你也有旋转器，等等。

服务器端渲染

优点

在搜索引擎优化方面，这是最好的。每个页面都是在网站的服务器上独立渲染的。看看一个博客网站。每篇博客文章都是一个独立的页面，并且是独立地从服务器上获取的。因此，你可以根据页面的内容插入元标签。

SSR允许页面内容集中，与社会爬虫相关。因此，谷歌和其他搜索引擎机器人将能够考虑到你的网页的表现，以提高你的网页内容排名。

缺点

使用SSR，页面会重新加载，访问一个新的页面必须再次点击服务器请求。这就带来了服务器上高内存使用和高处理能力的负担。它消耗了不必要的互联网带宽，显然会增加主机成本。

何时使用SSR

每个网页内容都是独立提供的。这将是一个追赶社会爬虫的好机会，以获得高的SEO排名为目标。

它的整体渲染速度较慢，因此，当你的用户较少，用户界面简单，页面较少，动态数据较少，互动性较差时，它很适合。

静态网站生成

优点

它们是超快速的。你的网站的所有内容都是提前生成的HTML文件。当用户来到你的应用程序，并要求一个主页或任何他们要求的页面，服务器将迅速响应并加载它。它不需要做任何处理。它不需要生成任何HTML；它只是提供它。

与动态网站相比，它们更安全。当你建立一个静态网站时，你给了访问网站的用户你的一切。没有后台可以入侵，也没有数据库或文本框可以注入恶意代码。

静态网站是简单明了的，只是在服务器上托管的HTML文件的集合。与其他内容管理系统相比，如WordPress，其内容托管在后台的数据库中，可以被黑客攻击，恶意活动可以注入你的网站中。

它们的主机是直接的。他们没有任何东西需要配置，也没有环境需要设置。这就像把几个HTML文件上传到网络服务器一样简单。

托管一个静态网站是非常便宜的。他们没有很多资源来为静态网站提供服务，因此带宽和内存使用量很低，从而减少了托管服务的成本。托管一个网站静态甚至可以是免费的。

你可以在任何地方托管你的网站。你可以把它托管在s3 bucket或任何云CDN上，使你的应用程序更容易在全球范围内扩展，并非常迅速地提供数据。

缺点

提供的数据可能是陈旧的和旧的。更新它的唯一方法是重新建立应用程序，这可能需要一些时间。你仍然必须将内容部署到CDN/服务器上才能看到更新。如果你的应用程序需要更新，你将不得不重新启动构建过程。

这可以通过采用Next.js支持的增量静态再生（ISR）概念来缓解。这样，你就可以获得最新的数据，而不必完全重建你的应用程序。

何时使用SSG

当你有大量的静态内容时，SSG很适合；它的速度很快，可以改善静态HTML文件的加载时间。

它被认为是SEO排名内容的一个好选择。

总结

本指南已经解释了三种主要的渲染方法。每种方法都是完美的、可扩展的。这在很大程度上取决于你想建立的应用程序的种类（用户界面、功能和网页数量），要显示的内容（动态或静态），以及你想实现的目标（SEO和加载时间）。

avatar
文章
阅读
粉丝