浅析客户端渲染（CSR）与服务端渲染（SSR）

最近刚好公司有项目需要用到服务端渲染，于是花了些时间了整理了关于服务端渲染与客户端渲染的知识，现在记录下来，希望能帮助大家提升对浏览器渲染，服务端渲染的理解，在项目选型上做出正确的决策。

本文会涉及这几个关键词：

• 客户端渲染（client-side rendering）
• 服务端渲染（server-side rendering）
• 预渲染（Prerendering）
• 同构渲染（Rehydration）

为了更好的理解客户端，服务端渲染我们要抛出一个老生常谈的面试点，浏览器输入一个url地址到页面显示，这个过程经历了什么？

客户端渲染（client-side rendering）

基于上面的图，我给大家总结一下，大致过程就是 :
用户输入地址，客户端向服务器发送请求
=> 服务器传给浏览器相应的网页文件
=> 浏览器解析文件
=> 遇到ajax请求则向服务器再次请求一些数据
=> 服务器再次向浏览器发送相应的数据
=> 浏览器拿到ajax请求返回的数据后，将数据渲染在页面上

可见客户端请求需要经历这么繁杂的步骤，整个过程下来也需要花费不少时间。这里应该有人会说，有没有一种方法能够能够一次性拿到渲染好的数据，客户端直接进行渲染？答案是有的，服务端渲染！

服务端渲染（server-side rendering）

同样的，看完图我给大家总结一下，服务器渲染的步骤就是：
客户端向服务器发送一次请求
=> 服务器接收请求，并在服务端操作网页文件，将对应数据导入文件
=> 服务器在服务端渲染好整个网页，发送给客户端
=> 客户端接收服务器发送过来的网页文件，不需要做任何操作，直接呈现

通过上面两种渲染方式的对比分析，可以看出服务器渲染的方式对比客户端渲染少了二次请求数据等步骤，页面呈现更加干脆，浏览器直接拿到数据展示就可以了。

预渲染（Prerendering）

预渲染是指用户请求之前，页面已经合成好了，服务端无需再次合成页面，直接将页面返回给客户端。也就是静态页面。对于用户来说，预渲染的体验和服务端渲染体验类似，首屏展示速度比客户端渲染快。

同构渲染（Rehydration）

同构渲染，实际上就是把CSR和SSR的优势结合起来，让同一套代码在服务器上跑一遍，生成首屏内容，然后再在客户端跑一遍，绑定事件。这样既提供了更快的首屏速度、更好的SEO支持，又能避免对服务器带来过大的负载。
关于同构渲染，业界已经有成熟的解决方案，基于react的nextjs以及基于vue的nuxtjs，他们都是神级的同构框架，我们只需要简单的二次封装就定制符合业务的服务端渲染框架。如果是一个新的项目，要实现SEO，解决白屏等问题，则可以考虑直接使用此类框架搭建。

客户端渲染（CSR） VS 服务端渲染（SSR）

总结

现在想必对客户端，服务端渲染有一个整体印象了吧。其实一般的页面中，两种渲染是相结合着使用的，因为我们会有些数据不想过早的传过来，想要被用到时再去拿数据，同时也不想被爬虫那么轻易的爬取，而且也不需要被搜索引擎搜索并展示，我们就可以用客户端渲染。但有时，我们想让我们网页的数据被搜索引擎搜索到，能让用户在使用搜索引擎的时候，查找到我们的数据信息，我们就可以使用服务器渲染。
关于客户端，服务端渲染的概念我就说这些，大家有什么疑问可以楼下评论去探讨探讨~