https://lategege.com/tags/next.js%E5%A4%84%E7%90%86%E6%96%B9%E5%BC%8F/Recent content in Next.js处理方式 on lategege 的技术博客Hugo -- gohugo.iozh-cnMon, 08 Apr 2024 03:05:20 +0000https://lategege.com/p/next-js-%E4%B8%89%E7%A7%8D%E7%BD%91%E9%A1%B5%E5%A4%84%E7%90%86%E6%96%B9%E5%BC%8F/Mon, 08 Apr 2024 03:05:20 +0000https://lategege.com/p/next-js-%E4%B8%89%E7%A7%8D%E7%BD%91%E9%A1%B5%E5%A4%84%E7%90%86%E6%96%B9%E5%BC%8F/<p>我看到很多文章提到Next.js的三种所谓渲染方式，如下：</p> <ul> <li>客户端渲染 BSR (Broswer Side Render)</li> <li>静态页面生成 SSG (Static Site Generation)</li> <li>服务端渲染 SSR (Server Side Render)</li> </ul> <p>我对此不敢苟同，渲染一词随意滥用分明在误导初学者，我们所认知的那个渲染是将图形信息展示到屏幕上，所以何来服务器渲染一说？服务器能控制客户端的GPU、CPU来进行图形绘制？简直瞎搞! Render一词在React框架中根本不是这个意思。React或者Next.js所谓的Render只不过是生成html标记语言，而不是所谓中文意义上的渲染，虽然Render翻译过来是渲染，但是此Render并非GPU那个Render，这一点很重要。如果简单理解为服务器渲染会让初学者觉得非常困惑。</p> <p>所以渲染从来都是客户端的事情，和服务端没有任何关系。</p> <ol> <li> <p>客户端渲染，BSR，它的意思就是客户端自己执行JS去处理完善html,然后由引擎根据html、css来生成dom树，css树，接着才是由cpu或者gpu根据dom树来渲染到屏幕，所谓白屏就是指客户端在载入不完整的带有js脚本的html文件时，下载和加载js所需要的时间，在这段时间内数据还没到达所引发的页面空白，所以<del>客户端渲染</del>我觉得应该改为客户端加载比较恰当。</p> </li> <li> <p>静态页面生成，就是字面意思，客户端请求完整的不带动态请求数据js的静态页面，当然一些交互肯定需要js来处理，所以这里是不带动态请求数据的js。</p> </li> <li> <p><del>服务端渲染</del> 服务器无法渲染页面到屏幕，这个说法严重误导初学者，这里改为服务器加载比较贴切，所谓服务器加载，就是把本来客户端js要干的事情放在了服务端，本来客户端向服务端请求一个不完整的html页面和带有动态请求数据的js，然后加载js请求数据形成完整的html页面，然后渲染。服务器加载就是客户端直接向服务端请求一个完整的html页面，不需要在客户端本地执行js来异步获取数据，相当于html是一步到位的，所谓没有白屏就是因为一步到位而非多次获取带来的效率上面的提升。绝对没有白屏是不现实的，网络必然会有延迟，当你请求html慢的时候你页面必然会loading。</p> </li> </ol> <p>所以没有所谓的服务器渲染，如果生成html叫做渲染的话那就太可笑了，html只是一种标记语言，它离渲染差十万八千里！</p>