大家好，我是阿萨。今天介绍下服务器端渲染和客户端渲染。
服务器端渲染(SSR)的基本概念
服务器端渲染是指在服务器端为网页生成HTML。
- 请求时的SSR: 服务器端呈现可能发生在请求时，在这种情况下，服务器在运行时为每个URL请求动态生成HTML。这也称为动态服务器端渲染。
- 构建时的SSR:或者，web页面的HTML可以在“构建”时在服务器端预先生成，当网页被请求时，这个预先生成的静态HTML将返回给浏览器即HTML是预先生成的，而不是在请求时实时生成的。这也被称为预渲染。
客户端渲染(CSR)的基本概念
客户端呈现意味着在浏览器端生成HTML组件，方法是在浏览器中执行Javascript代码，操作HTML DOM来构建HTML节点。
服务器端渲染(SSR)
在服务器端渲染(SSR)中，网页的HTML组件是在服务器端生成的。当浏览器请求SSR网页时，浏览器会收到一个完全形成的HTML网页，其中已经创建了HTML组件，看起来像这样，
<!DOCTYPE html><html><head><title> Web Page Rendered on Server Side </title></head><body><h1> This is a Heading </h1><p> This is a paragraph </p><div><p> This is a form </p><form><label for="fname">First name:</label><br><input type="text" id="fname" name="fname"><br><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname"></form><div></body></html>
浏览器所要做的就是解析这个HTML来生成HTML DOM并显示网页。服务器端呈现可以在构建时完成，这将预先生成HTML，或者服务器端呈现可以在来自浏览器的每个传入请求的请求时完成。
动态服务器端呈现(SSR)，即请求时的服务器端呈现，需要在运行时运行web服务器，以接收导航请求，获取外部数据(在服务器端)，动态生成HTML，然后将完全形成的HTML返回给浏览器。
网站是使用传统的服务器端语言，如PHP, ASP。NET (ASP)， Java (JSP)， Ruby等是完全的服务器端渲染。请注意，浏览器只理解HTML、CSS和Javascript，而服务器端语言(即PHP、。net、Ruby等)基本上是在服务器端以编程方式生成HTML，然后将HTML发送给浏览器。
所以不管你是使用PHP, Java，还是Ruby，作为你的后台语言，在SSR中它们都会生成HTML并返回给浏览器。服务器端语言通常在开发过程中使用一些web框架和HTML模板来促进服务器端HTML的生成。
SSR的优势
- 更好的搜索引擎优化和页面排名，因为HTML是完全形成在服务器端和网络爬虫更容易能够索引HTML页面。
- CSR App的初始页面呈现加载时间更快，因为从服务器接收到的HTML可以被浏览器快速解析并立即显示，并且不需要单独的JS包下载和执行来显示网页。
- 一旦网页在浏览器中可见，它就是完全交互的 即FCP = TTI
- 由于网页的HTML是在服务器端生成的，即使浏览器Javascript被禁用，网页也会显示出来。
SSR的缺点
- 由于Internet连接较低或没有Internet连接，响应性较差，因为每个页面导航都要往返于服务器以接收HTML。
- 对于动态SSR，随着网络流量的增加，服务器负载也会增加，因为服务器需要为每个请求动态生成HTML。
客户端渲染(CSR)
在客户端呈现(CSR)中，HTML组件通过在浏览器中执行Javascript代码在客户端生成。在这种情况下，当浏览器请求一个网页时，初始服务器请求返回一个最小的HTML文件，作为应用程序容器，主要包含到React/Vue JavaScript包的链接，看起来像这样:
<html><head><title> CSR App </title></head> <body><div id="app"> </div><script src="../src/index.js"> </script></body></html>
在这种情况下，没有HTML供浏览器解析以生成HTML DOM。相反，浏览器必须完全下载HTML中链接的JS包，然后在浏览器中运行JS包(使用浏览器JS引擎)，然后在客户端生成网页HTML DOM。此外，在应用程序中单击导航链接会操作HTML DOM客户端来创建所请求导航的DOM，而不是从服务器请求HTML(这通常是由下载的JS代码中的“路由器”模块处理的，
例如。React-Router Vue-Router)。浏览器通过在浏览器中执行Javascript在客户端生成HTML组件。客户端呈现使用JavaScript来创建DOM，而不是解析HTML来创建DOM。因为对于典型的客户端渲染应用程序，浏览器只接收一个作为应用程序容器的HTML页面，它们有时也被称为单页应用程序(spa)。传统的React(即Create-React-App)， Vue应用程序完全是客户端渲染。
CSR的优势
在初始加载后，速度非常快，响应迅速，因为在初始加载后，网站的所有HTML都是在客户端生成的(通过Javascript)，无需往返于服务器以获取HTML。此外，任何实时数据获取都可以通过客户端Javascript代码进行外部API调用来处理。
CSR的缺点
- 初始加载时间较长，浏览器必须等待整个Javascript包下载并在客户端执行，然后才进行初始呈现。在此期间，用户盯着一个空白的网页。代码分割或惰性加载策略可以用来减少浏览器在初始页面渲染时需要下载的资源数量，这可以极大地提高大型捆绑包应用的TTI(交互时间)。
- - https://ssr.vuejs.org/guide/routing.html#routing-with-vue-router
- 对SEO和页面排名的负面影响，由于CSR网页大部分是空的，只包含生成HTML的JS代码的链接，网络爬虫可能会将其视为空页面。谷歌网络爬虫可以触发网站的JS HTML渲染，但如果JS包很大，它可能会显示一个“加载”页面，网络爬虫可能无法正确读取页面，因此无法索引它。如果浏览器Javascript被禁用，用户将看到一个空白页面。
- 如果用户在他们的浏览器上禁用了Javascript, JS包将永远不会在客户端运行，因此HTML将永远不会生成，网页将永远不会呈现。在这种情况下，用户将永远不会看到网站，只是继续看到一个空白页面。
![[Git] 深入理解 Git 的客户端与服务器角色](https://ucc.alicdn.com/mf7bdqcba64nc/developer-article1650288/20250122/5c93959780854f9180ee54fd63b232a2.png?x-oss-process=image/resize,h_160,m_lfit)
