1、客户端渲染(CSR - Client Side Render)

（1）后端只提供数据，前端做视图和交互逻辑(SPA应用就是典型的客户端渲染)

（2）客户端渲染过程

①　客户端请求html (请求)
②　服务端返回html
③　客户端渲染HTML,找到依赖的JS/CSS文件
④　客户端请求对应的JS/CSS文件 (请求)
⑤　服务端返回对应的JS/CSS文件
⑥　客户端等待JS/CSS文件下载完成
⑦　客户端加载并初始化下载好的JS文件
⑧　客户端执行JS代码向后端请求数据 (请求)
⑨　服务端返回数据
⑩　客户端利用服务端返回的数据填充网页

（3）最大优点: 交互体验好可以做局部更新

（4）最大缺点: 首屏加载慢(因为要等到HTML下载完才会去下载JS/CSS, 要等到JS下载完初始化完才会去获取数据)

2、服务端渲染(SSR - Server Side Render)

（1）后端既提供数据又提供视图和交互逻辑，也就是服务器接到客户端请求之后，找到对应的数据并根据找到的数据生成对应的视图，然后将包含数据的视图一次性发给客户端，客户端直接将渲染即可。

（2）服务端渲染过程

①　客户端请求html (请求)
②　服务端内部查找对应的html文件和数据
③　服务器内部根据数据html文件和数据生成完整网页
④　服务端返回完整网页
⑤　客户端渲染HTML,找到依赖的JS/CSS文件
⑥　客户端请求对应的JS/CSS文件 (请求)
⑦　客户端等待JS/CSS文件下载完成
⑧　客户直接展示网页

（3）最大优点:

首屏加载快(因为服务器返回的网页已经包含数据, 所以之下载完JS/CSS就可以直接渲染)，每次请求返回的都是一个独立完成的网页, 更利于SEO。

（4）最大缺点:网络传输数据量大

3、预渲染

（1）无需服务器实时动态编译，采用预渲染，在构建时针对特定路由简单的生成静态HTML文件，本质就是客户端渲染, 只不过和SPA不同的是预渲染有多个界面。
（2）最大优点: 由于有多个界面, 所以更利于SEO
（3）最大缺点: 首屏加载慢, 预编译会非常的慢
（4）使用预渲染解决SPA应用SEO问题
https://www.npmjs.com/package/vue-cli-plugin-prerender-spa
通过配置让需要独立seo信息的页面生成单独页面，注意点: Router必须使用history模式。

4、如何选择

（1）注重SEO的新闻、电商网站，建议采用服务器端渲染
（2）强交互的页面，不注重SEO，采用客户端渲染
（3）两者之间, 只需改善少数页面的SEO，采用预渲染

5、使用vue-meta-info统一管理SEO三大标签

https://www.npmjs.com/package/vue-meta-info

6、Jsdom:在nodejs中使用document

https://www.npmjs.com/package/jsdom

最后

以上就是激动草莓为你收集整理的常见的三种网页渲染方式1、客户端渲染(CSR - Client Side Render)2、服务端渲染(SSR - Server Side Render)3、预渲染4、如何选择5、使用vue-meta-info统一管理SEO三大标签6、Jsdom:在nodejs中使用document的全部内容，希望文章能够帮你解决常见的三种网页渲染方式1、客户端渲染(CSR - Client Side Render)2、服务端渲染(SSR - Server Side Render)3、预渲染4、如何选择5、使用vue-meta-info统一管理SEO三大标签6、Jsdom:在nodejs中使用document所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。