JS面试题17-比较一下服务端渲染与客户端渲染

服务端渲染

服务端渲染（Server-Side Rendering，SSR）是指在服务器端生成完整的HTML页面并将其返回给浏览器，与传统的客户端渲染方式相反。

在传统的客户端渲染中，浏览器首先接收到一个空的HTML页面，在页面加载期间，浏览器使用JavaScript来动态生成页面内容。而在服务端渲染中，服务器端负责构建整个HTML页面，包括将数据和组件渲染为HTML，然后将整个HTML页面返回给浏览器。

服务端渲染的优势包括：

更快的首次加载时间：由于浏览器直接接收到完整的HTML页面，网页可以更快地呈现给用户。
更好的SEO：搜索引擎爬虫可以直接抓取到完整HTML页面的内容，不需要通过JavaScript解析。
更好的性能：对于复杂的应用程序，服务端渲染可以分担客户端的负载，减轻浏览器的负担，并提供更流畅的体验
SSR 的响应性在服务端是不必要的，因为没有用户交互和 DOM 更新。为了更好的性能，默认情况下响应性在 SSR 期间是禁用的
在 SSR 期间，只有 beforeCreate 和 created 这两个生命周期钩子会被调用，其他像mounted或 updated 这样的生命周期钩子不会在 SSR 期间被调用，而只会在客户端运行。因此，我们应该避免在 beforeCreate 和 created 钩子中使用会产生副作用且需要被清理的代码
SSR 适用于需要更快的到达时间的场景，优势在于慢网络和运行缓慢的设备场景。相比传统的 SPA，SSR 服务器渲染标记在服务端渲染 HTML 后即可显示，用户会更快的看到首屏渲染页面
SSR 不适用于同构资源的处理。在使用三方 API 时必须保证运行不报错，需要特殊处理使其支持服务端和客户端都可运行。结合 Vue 的钩子来说，能在 SSR 中调用的生命周期只有 beforeCreate 和 created
VNode 是 Vue 中用来描述虚拟 DOM 的数据结构，本身是 js 对象，兼容性极强，不依赖当前的执行环境，从而可以在服务端渲染及原生渲染。虚拟 DOM 频繁修改，最后比较出真实 DOM 需要更改的地方，可以达到局部渲染的目的，减少性能损耗
SSR 的实现流程大体与客户端渲染类似。浏览器请求 URL，前端服务器接收到 URL 请求之后，根据不同的 URL，前端服务器向后端服务器请求数据，请求完成后，前端服务器会组装一个携带了具体数据的 HTML 文本，并且返回给浏览器，浏览器得到 HTML 之后开始渲染页面，同时，浏览器加载并执行 `JavaScript脚本，给页面上的元素绑定事件，让页面变得可交互。当用户与浏览器页面进行交互，如跳转到下一个页面时，浏览器会执行JavaScript` 脚本，向后端服务器请求数据

一些服务端的框架,如NuxtJs

客户端渲染

客户端渲染是一种将网站或应用的代码逻辑从服务器端转移到客户端进行执行，以加快页面加载速度和交互性能的技术。

在客户端渲染中，网页或应用的代码被编译成 JavaScript 代码，然后在用户的浏览器中运行。

相对于传统的服务器端渲染，客户端渲染可以更加快速地呈现页面，并且允许进行更多的动态交互，例如即时搜索和动画效果。

然而，客户端渲染也有一些缺点。由于大部分渲染工作需要在用户的浏览器中执行，因此客户端渲染可能导致页面加载速度更慢，并且可能对浏览器的性能造成一定的负担。

此外，在处理搜索引擎优化（SEO）时，客户端渲染也可能会导致问题，因为搜索引擎爬虫可能无法正确地读取动态生成的内容

通常用vue-cli生成的脚手架代码,都是客户端渲染,有各个生命周期,执行不同的函数逻辑

服务端渲染和客户端渲染是处理网页的两种不同方法。服务端渲染 (SSR) 是在服务器上获取动态内容，将其转换为 HTML 并将其发送到浏览器的过程

客户端渲染 (CSR) 是在浏览器中处理网页以显示不同的方法。以下是比较服务端渲染和客户端渲染的几个方面：

渲染过程：服务端渲染在服务器上生成 DOM 树，而客户端渲染在客户端浏览器上生成 DOM 树
响应速度：服务端渲染可以加快页面的响应速度，因为它可以在浏览器请求页面之前预先准备好 HTML。相比之下，客户端渲染需要在浏览器中加载 JavaScript 和其他资源，这可能会导致页面响应速度较慢
SEO 优化：服务端渲染更有利于爬虫爬取信息，因为所有内容都在 HTML 中，爬虫可以轻松地找到和索引页面内容。相比之下，客户端渲染需要在浏览器中加载 JavaScript 和其他资源，爬虫可能无法找到或索引页面内容
Web 应用程序 VS 网站：Web应用程序涉及更多的用户交互，确保用户交互不会花费很长时间是至关重要的。因此，与 SSR 相比，CSR 更适用于 Web 应用程序。而网站通常是提供信息内容的，所以可以使用 SSR
页面加载时间：在客户端渲染的情况下，由于所有支持脚本都是提前加载的，因此客户端渲染的加载时间更快。除非需要加载惰性 JavaScript 模块，否则它不会向服务器发送请求。对于服务端渲染，在第一页加载中遵循的完整请求周期是重复的。这意味着服务端渲染对网页加载时间几乎没有任何影响。因此，在这种情况下，客户端渲染响应更快
缓存的影响：在客户端渲染中，基于 CSR 的 Web 应用程序也可以在没有互联网的情况下运行（除非您调用数据 API）。加载后，应用程序不再需要向服务器发送请求。这允许浏览 Web 应用程序，就像一个简单的桌面应用程序。然而，在服务端渲染中，总是向服务器发送请求。因此，与 CSR 相比，SSR 的页面加载时间无疑更长。缓存确实提高了 SSR 的内容渲染

代码示例

我们可以使用以下Node.js代码来设置服务器，并使用React渲染

服务端代码

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // 或者你的入口组件

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>服务端渲染</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `);
});

app.use(express.static('public')); // 客户端代码静态资源存放在public目录下

app.listen(PORT, () => console.log(`Server started on port ${PORT}`))

客户端代码

除了服务器端代码之外，我们还需要编写客户端代码，以便可以在浏览器中运行JavaScript，并且React可以在客户端中呈现DOM和管理其状态我们可以用以下客户端代码来启动React应用程序

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // 或者你的入口组件

ReactDOM.render(<App />, document.getElementById('root'));

通过以上代码，我们可以实现服务端渲染，以提高应用程序的性能和SEO效果。但是需要注意的是，服务端渲染可能会增加代码的复杂度，需要更多的配置和调试工作，因此需要仔细考虑是否需要使用服务端渲染来达到最佳的效果