服务端渲染和客户端渲染区别

微信公众号：  [大前端驿站]
关注大前端驿站。问题或建议，欢迎公众号留言。 这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

我们在面试中经常被问到服务端渲染这个概念，今天来简单总结一下客户端渲染过程和服务端渲染过程大致有哪些不同。

客户端渲染与服务端渲染对比

概念

客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

对比客户端渲染，服务端首屏渲染快，更快的内容到达时间，还有就是利于SEO，现在，大部分搜索引擎都已经能够索引同步JavaScript程序或应用，注意是同步。如果网站通过Ajax异步加载内容，并渲染到页面上，搜索引擎是无法感知的，所以这个时候服务端渲染时一个更好的选择。，缺点是配置麻烦，增加了服务器的计算压力

渲染过程

• 客户端渲染过程

1. 访问客户端渲染的网站。
2. 服务器返回一个包含了引入资源语句和 <div id="app"></div> 的 HTML 文件。
3. 客户端通过 HTTP 向服务器请求资源，当必要的资源都加载完毕后，执行 new Vue() 开始实例化并渲染页面。

• 服务端渲染过程

1. 访问服务端渲染的网站。
2. 服务器会查看当前路由组件需要哪些资源文件，然后将这些文件的内容填充到 HTML 文件。如果有 ajax 请求，就会执行它进行数据预取并填充到 HTML 文件里，最后返回这个 HTML 页面。
3. 当客户端接收到这个 HTML 页面时，可以马上就开始渲染页面。与此同时，页面也会加载资源，当必要的资源都加载完毕后，开始执行 new Vue() 开始实例化并接管页面。

从上述两个过程中可以看出，区别就在于第二步。客户端渲染的网站会直接返回 HTML 文件，而服务端渲染的网站则会渲染完页面再返回这个 HTML 文件。

周末结束，又要开启一周的工作，大家加油！

~~ 感谢观看

【分享、点赞、在看】三连吧，让更多的人加入我们