NuxtJS学习 服务端渲染与客户端渲染比较

一、客户端渲染

1、客户端渲染流程

a、客户端通过AJAX向服务端(servlet)发送http请求数据接口。

b、服务端(servlet)将获取的接口数据封装成json，响应给客户端。

c、客户端拿到JSON进行渲染，生成DOM元素，然后将页面展示给用户。

具体流程如下图

2、客户端渲染特点

a、服务端只响应数据，不生成html页面。

b、浏览器负责发送请求获取数据，然后渲染成页面。

3、客户端渲染优点缺点

优点：服务端与客户端脱离开了，服务端只用写接口，不用进行html操作，html交给前端，将前端与后台进行了很好地解耦。后端做数据输出，前端展示。

缺点：与服务端相渲染相比内容加载速度比较慢。

二、服务端渲染（SSR）

1、服务端渲染流程

a、客户端通过向服务端(servlet)发送http请求。

b、服务端(servlet)接受请求，并通过JSP生成html页面，响应给浏览器。

c、浏览器将收到的html页面展示。

具体流程如下图

2、服务端渲染特点

a、在服务端生成html页面。

b、浏览器只负责显示页面内容。

3、客户端渲染优点缺点

优点：因为浏览器不需要进行数据处理，所以浏览器端响应速度快。

缺点：服务端既要进行数据输出，也要生成html页面，这样代码耦合性不好，服务端压力大。

三、使用服务端渲染（SSR）的原因

与传统的单页面应用程序(SPA)相比，服务端渲染的优势

1、更好的SEO，便于搜索引擎抓取。

2、因为服务端只需要返回渲染好的HTML，这部分代码量很小，首屏内容加载速度更快，所以用户体验更好。

使用服务器端渲染(SSR)时需要权衡之处

1、开发成本高，在声明周期钩子函数(例如VUE中的beforeCreate、created)能同时运行在服务端和客户端，此时就需要能支持其在服务端运行的第三方库。

2、服务端渲染要用Node.js坐中间层，所以部署时，需要Node.js server运行环境，在高流量环境下，要做好服务器负载和缓存策略。

感谢阅读，如有错误和瑕疵欢迎指出

真正高贵的人，不是优于别人，而是优于过去的自己