nuxt-ssr 服务端渲染

nuxt.js 框架自己会判断是进行客户端渲染还是服务端渲染，依据是根据代码中是否是用户操作，是用户操作（由客户端完成html的完整拼接），则进行客户端渲染，不是用户操作（由服务端完成html的完整拼接），则进行服务端渲染。
 

一、如何判断一个页面是客户端渲染还是服务端渲染？（转载）

 

什么是服务器端渲染和客户端渲染？

互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件，浏览器拿到这个html文件之后就可以直接解析展示了，而这也就是所谓的服务器端渲染了。而随着前端页面的复杂性提高，前端就不仅仅是普通的页面展示了，而可能添加了更多功能性的组件，复杂性更大，另外，彼时ajax的兴起，使得业界就开始推崇前后端分离的开发模式，即后端不提供完整的html页面，而是提供一些api使得前端可以获取到json数据，然后前端拿到json数据之后再在前端进行html页面的拼接，然后展示在浏览器上，这就是所谓的客户端渲染了，这样前端就可以专注UI的开发，后端专注于逻辑的开发。　

两者本质的区别是什么？

客户端渲染和服务器端渲染的最重要的区别就是究竟是谁来完成html文件的完整拼接，如果是在服务器端完成的，然后返回给客户端，就是服务器端渲染，而如果是前端做了更多的工作完成了html的拼接，则就是客户端渲染。

 如何在页面中快速的判断出来？

1、鼠标右键查看源代码，在页面中看到的内容在源代码中也可以查看到，则是服务端渲染得到的

2、鼠标右键查看源代码，页面中看到的内容在源代码中不可以查看到，则是客户端渲染得到的

服务端渲染示例:

在京东上打开一个商品列表页面:

https://search.jd.com/Search?keyword=javascript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1&enc=utf-8&suggest=1.def.0.V07&wq=javascript&pvid=720f2c53fe014e7d903ae1245a728bfa

 

客户端渲染示例:

刚才打开的页面中，点击一个列表进入详情页面：

https://item.jd.com/10951037.html

 

 

 

二、nuxt 渲染流程

 

https://blog.csdn.net/qq_42672627/article/details/107723028?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-19-107723028.nonecase&utm_term=%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E5%AE%A2%E6%88%B7%E7%AB%AF%E6%B8%B2%E6%9F%93nuxt&spm=1000.2123.3001.4430

 

三、nuxt 生命周期

https://blog.csdn.net/webjhh/article/details/94460595