前端面试题口述系列: 客户端和服务端渲染

面试题01: 什么是客户端和服务端渲染?

首先网站是可以在客户端和服务端两种环境下进行的。HTML

在客户端渲染(CSR)中, 客户端会先向服务器请求 HTML 文件, 然后服务器返回一个基础的 HTML 文件, 其中包含必要的JavaScript脚本。这些脚本会在浏览器端运行, 动态请求后端的数据, 生成网页内容并渲染到页面上, 也就是要当浏览器的渲染完成之后, 用户才能看到页面内容。

而服务端渲染(SSR)是直接服务器端渲染生成的 HTML 文档发送到服务端, 浏览器直接显示服务端返回的 HTML 文档就可以了。在这种方式下, 当用户请求一个网页时, 服务器会调用后端获取数据, 并处理JavaScript脚本生成完整的 HTML 文档, 然后将其发送到客户端(浏览器)。浏览器接收到 HTML 后,直接展示页面内容, 不用再动态地向后端发送请求来获取数据。

面试题02:客户端和服务端渲染的区别?各自的优点缺点是什么?

客户端渲染和服务端渲染的主要区别在于渲染过程发生的地点不同。如客户端渲染的渲染压力主要在于客户端, 会比较考验用户端的网络和性能, 在网络不良的情况下白屏加载的时间往往会比较长, 造成较差的用户体验。

而服务器渲染的渲染压力主要是在服务器, 适合追求性能和SEO的企业级项目, 如b站,携程,CSDN 都是采用的服务器渲染, 白屏加载的时间会比客户端渲染少很多, 会比较考验服务器的承载能力。

不过客户端渲染可以使开发更方便灵活, 开发者不需要区分哪些数据要做服务端加载, 哪些数据要在客户端加载, 也不用担心哪些API无法在服务端使用。便于实现更加复杂和动态的用户界面, 适合用来构建单页应用(SPA)和需要频繁交互的应用, 在跳转新页面的时候也不需要向服务器再次请求资源, 从而让整个网站的使用体验上更加流畅。

而服务端渲染也有一个很重要的优点就是SEO比较友好, 因为搜索引擎只认识 HTML 里的内容, 识别不到js的内容, 所以用服务端渲染的 HTML 页面在搜索引擎的排名往往会比客户端渲染出来的页面更好, 也就更容易被用户搜索到。

面试题03:是否可以将客户端和服务端渲染的优点综合利用起来?什么是部分预渲染?

部分预渲染是一种将服务端渲染与客户端渲染结合的技术。

在构建阶段或请求阶段, 页面的静态部分在服务端预先渲染(如导航栏\页脚等), 页面加载时有限看到静态部分, 动态部分有JavaScript在客户端加载并渲染, 通过水合过程, 客户端的JavaScript接管已经渲染的静态内容, 并继续处理动态交互。

这样一来, 就兼具了SSR的SEO友好和快速初始加载, 以及CSR灵活动态交互的优点。

还有一个跟部分预渲染相似的概念叫同构渲染, 是指同一套代码可以在服务端和客户端运行, 并在服务端渲染页面的初始内容, 然后在客户端接管渲染和交互。

水合(Hydrate)过程: 客户端加载额外的 JavaScript 代码, 并在服务端渲染的 HTML 上绑定事件监听器, 使页面可交互, SSR的瓶颈也就取决于 hydrate 水合的过程。