服务端渲染和客户端渲染

渲染：把完整的html结构完善并展示

服务端渲染：将完善html结构这一块放在了服务端

客户端渲染：将完善html结构这块放在客户端（或者说浏览器中）

 

简单的理解：

//填充前
<div id="main"></div>

<?php
    //...操作div，对div进行填充
php>


//填充后
<div id="main">Jacky</div>

在服务端渲染中，对div填充这一块是是在服务端，也是常说的后端进行渲染的，返回到客户端的是填充好、完善好的html结构，完整的DOM树；

//填充前
<div id="main"></div>

<script>
    //...操作div，对div进行填充
</script>


//填充后
<div id="main">Jacky</div>

而客户端渲染，就是将整个html包含script代码一起返回给客户端，让客户端浏览器进行一个本地渲染。

 

客户端渲染和服务端渲染的优劣：

客户端渲染优点：前后端分离，开发效率高；开发单页面不会频繁跳转

客户端渲染缺点：前端响应慢；不利于SEO

服务端渲染优点：前端资源占用少，速度更快，用户在速度上的体验更好；完整的DOM树利于爬虫，利于SEO

服务端渲染缺点：非前后端分离，开发效率低；渲染在服务端执行，加大服务端压力

 

应用：

由于服务端渲染有利于SEO，现阶段部分需求应该回归服务端渲染，而不是都客户端渲染。

比如博客，一些广告等，用服务端渲染较好，现在大部分网站都会做一个简单的页面用来做服务端渲染，从而优化SEO。

现阶段的一些服务端渲染：react的next.js、vue的nuxt.js