服务器端渲染的特点

Posted 2020-09-03

服务器端渲染固然耗CPU，但可以使用服务器端缓存的方式解决，并不是每个用户访问都需要重新渲染一遍。而且服务器端渲染甚至可以潜在地增加服务器效率（这点在参考资料第二个里有提到，不过是纯英文的，我有空会翻译下）。2. 服务器端和客户端可以共享某些代码，避免重复定义。这样可以使结构更清晰，增加可维护性3. 首次加载页面的速度加快。客户端渲染的一个缺点是，当用户第一次进入站点，此时浏览器中没有缓存，需要下载代码后在本地渲染，时间较长。而服务器渲染则是，用户在下载的已经是渲染好的页面了，打开速度比本地渲染快。4. SEO。服务器端渲染可以让搜索引擎更容易读取页面的meta信息以及其他SEO相关信息，大大增加网站在搜索引擎中的可见度。其实并不一定要争个好坏，服务器端和客户端渲染各有各的优缺点。建议根据实际需求，在某些页面使用服务器渲染，某些页面使用客户端渲染，以达到最佳解决方案。

首先，是服务器渲染的好处，很明显，服务器渲染肯定比客户端渲染，首屏加载的速度要快一些。配合bigpipe这种网页加载模型速度会显著提升。

其次，服务器渲染使用react的好处是，服务端和网页端可以共享同一套jsx代码。不使用js的话，通常服务器需要自己使用后端语言拼接字符串，或者php，jsp，asp这种代码/html混写的风格，或者特定平台的模板引擎库去输出页面。无论，那种，服务端都要自己实现一段代码。而前端页面js也要写一套代码用来渲染ajax的异步数据，其实这部分工作是重复的。如果使用nodejs开发，那么前后端因为都使用js语言，因为前后端同构可以避免这种重复代码。

总结一下：1.提升了团队的工作效率（想想前后端配合的各种坑）。2.代码复用度更好。3.网站性能更好。

react.js在服务器端渲染好处：

　　提升性能是需要再浏览器端的性能提升还是服务端的 性能提升，是两个概念，服务端渲染会给服务端造成一定的压力，减轻客户端的压力；好处：在整个页面级别的应用会使得浏览器在解析dom完成之后马上有东西可以渲染。再者就是对seo比较友好一些；

　　渲染的流程主要是：

1. 准备数据，一般从数据库或外部API获得 (一般要先 render React 一次，去触发所需的API)

2. 数据和React结合生成HTML Markup

3. 除了把HMTL Markup输出外， 还要把‘State‘输出，这要在客户端才能保留‘State‘