[{"data":1,"prerenderedAt":373},["ShallowReactive",2],{"page-\u002Fvue\u002F服务端渲染ssr的理解":3},{"id":4,"title":5,"body":6,"description":365,"extension":366,"meta":367,"navigation":368,"path":369,"seo":370,"stem":371,"__hash__":372},"content\u002FVue\u002F服务端渲染SSR的理解.md","服务端渲染SSR的理解",{"type":7,"value":8,"toc":346},"minimark",[9,13,29,34,59,63,73,76,91,95,132,135,166,169,218,222,263,266,271,274,279,282,324,327,337,340],[10,11,5],"h1",{"id":12},"服务端渲染ssr的理解",[14,15,16,20,21,24,25,28],"p",{},[17,18,19],"code",{},"SSR","服务端渲染",[17,22,23],{},"Server Side Render","就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的",[17,26,27],{},"HTML","即可。",[30,31,33],"h2",{"id":32},"客户端渲染csr","客户端渲染CSR",[14,35,36,37,40,41,44,45,48,49,52,53,55,56,58],{},"通常在构建一个普通的",[17,38,39],{},"SPA","单页应用时，就是构建的客户端渲染的应用，",[17,42,43],{},"CSR","客户端渲染",[17,46,47],{},"Client Side Render","就是当进行请求时，页面上的内容是通过加载的",[17,50,51],{},"Js","文件渲染出来的，",[17,54,51],{},"文件动态运行在浏览器上面，服务端只返回一个",[17,57,27],{},"模板。",[60,61,62],"h3",{"id":62},"优点",[64,65,66,70],"ul",{},[67,68,69],"li",{},"使得服务器计算压力变轻。",[67,71,72],{},"做到了前后端分离，在团队开发中只要负责各自的任务即可，使开发效率有明显提升。",[60,74,75],{"id":75},"缺点",[64,77,78,85,88],{},[67,79,80,81,84],{},"不利于",[17,82,83],{},"SEO","、搜索引擎爬虫无法完整解析用户页面。",[67,86,87],{},"请求增多时用户等待时间变长，导致首屏渲染慢。",[67,89,90],{},"消耗的是用户浏览器的性能。",[30,92,94],{"id":93},"服务端渲染ssr","服务端渲染SSR",[14,96,97,20,99,24,101,103,104,107,108,111,112,115,116,118,119,121,122,124,125,127,128,131],{},[17,98,19],{},[17,100,23],{},[17,102,27],{},"即可。对于传统服务端渲染，也称为后端模板渲染，如",[17,105,106],{},"jsp","或者",[17,109,110],{},"php","等，这是最早时期的",[17,113,114],{},"web","，是指客户端请求时，在服务器上使用模板引擎将模板与数据拼接成完整的",[17,117,27],{},"，再发送给客户端，客户端接收后直接解析",[17,120,27],{},"就可以在浏览器上展示出来，不需要额外的异步请求获取数据，如果要使",[17,123,114],{},"有交互性，客户端需要再用",[17,126,51],{},"去操作",[17,129,130],{},"DOM","或者渲染其他动态的部分。",[60,133,62],{"id":134},"优点-1",[64,136,137,149],{},[67,138,139,140,142,143,145,146,148],{},"更好的",[17,141,83],{},"，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面，如果",[17,144,83],{},"对站点至关重要，而页面又是异步获取内容，则可能需要服务器端渲染",[17,147,19],{},"解决此问题。",[67,150,151,152,155,156,159,160,162,163,165],{},"更快的内容到达时间",[17,153,154],{},"time-to-content","，特别是对于缓慢的网络情况或运行缓慢的设备，无需等待所有的",[17,157,158],{},"JavaScript","都完成下载并执行，用户将会更快速地看到完整渲染的页面，通常可以产生更好的用户体验，并且对于那些内容到达时间",[17,161,154],{},"与转化率直接相关的应用程序而言，服务器端渲染",[17,164,19],{},"至关重要。",[60,167,75],{"id":168},"缺点-1",[64,170,171,182,192],{},[67,172,173,174,177,178,181],{},"开发条件所限，浏览器特定的代码，只能在某些生命周期钩子函数",[17,175,176],{},"lifecycle hook","中使用，一些外部扩展库",[17,179,180],{},"external library","可能需要特殊处理，才能在服务器渲染应用程序中运行。",[67,183,184,185,187,188,191],{},"涉及构建设置和部署的更多要求，与可以部署在任何静态文件服务器上的完全静态单页面应用程序",[17,186,39],{},"不同，服务器渲染应用程序，通常需要处于",[17,189,190],{},"Node.js server","运行环境。",[67,193,194,195,198,199,202,203,206,207,210,211,213,214,217],{},"更大的服务器端负载，在",[17,196,197],{},"Node.js","中渲染完整的应用程序，显然会比仅仅提供静态文件的",[17,200,201],{},"server","更加大量占用",[17,204,205],{},"CPU","资源",[17,208,209],{},"CPU-intensive","-",[17,212,205],{},"密集型，因此如果预料在高流量环境",[17,215,216],{},"high traffic","下使用，需要准备相应的服务器负载，并明智地采用缓存策略。",[30,219,221],{"id":220},"预渲染prerendering","预渲染Prerendering",[14,223,224,225,227,228,231,232,231,235,238,239,241,242,244,245,247,248,251,252,254,255,258,259,262],{},"如果使用服务器端渲染",[17,226,19],{},"只是用来改善少数营销页面，例如",[17,229,230],{},"\u002F","、",[17,233,234],{},"\u002Fabout",[17,236,237],{},"\u002Fcontact","等的",[17,240,83],{},"，那么你可能需要预渲染，无需使用",[17,243,114],{},"服务器实时动态编译",[17,246,27],{},"，而是使用预渲染方式，在构建时",[17,249,250],{},"build time","简单地生成针对特定路由的静态",[17,253,27],{},"文件。如果使用",[17,256,257],{},"webpack","，则可以使用",[17,260,261],{},"prerender-spa-plugin","轻松地添加预渲染。",[60,264,62],{"id":265},"优点-2",[64,267,268],{},[67,269,270],{},"设置预渲染更简单，并可以将前端应用作为一个完全静态的站点。",[60,272,75],{"id":273},"缺点-2",[64,275,276],{},[67,277,278],{},"只适合对于特定静态页面而应用。",[30,280,281],{"id":281},"总结",[14,283,284,285,287,288,290,291,293,294,297,299,300,302,303,305,306,308,309,311,312,314,315,317,318,320,321,323],{},"本质上对于渲染都是一样的，都是进行的字符串拼接生成",[17,286,27],{},",两者的差别最终体现在时间消耗以及性能消耗上。客户端在不同网络环境下进行数据请求，客户端需要经历从",[17,289,51],{},"加载完成到数据请求再到页面渲染这个时间段，导致了大量时间的消耗以及浏览器性能的消耗。而服务端在内网请求，数据响应快，不需要等待",[17,292,51],{},"代码加载，可以先请求数据再渲染可视部分然后返回给客户端，客户端再做二次渲染,这样大部分消耗的是服务端的性能，客户端页面响应时间也更快。",[295,296],"br",{},[17,298,19],{},"服务端渲染主要解决的是首屏渲染和",[17,301,83],{},"优化，是否需要",[17,304,19],{},"服务端渲染主要取决于",[17,307,83],{},"对于网站是否非常重要以及内容到达时间",[17,310,154],{},"对应用程序的重要程度。例如，如果你正在构建一个内部仪表盘，初始加载时的额外几百毫秒并不重要，这种情况下去使用服务器端渲染",[17,313,19],{},"将是一个小题大作之举。然而如果大量的访问流量来自于搜索引擎的抓取，那么服务端渲染",[17,316,19],{},"将是势在必行的解决方案，或者内容到达时间",[17,319,154],{},"要求是绝对关键的指标，在这种情况下服务器端渲染",[17,322,19],{},"可以帮助你实现最佳的初始加载性能。总而言之，开发需要根据实际场景寻找解决方案。",[30,325,326],{"id":326},"每日一题",[328,329,334],"pre",{"className":330,"code":332,"language":333},[331],"language-text","https:\u002F\u002Fgithub.com\u002FWindrunnerMax\u002FEveryDay\n","text",[17,335,332],{"__ignoreMap":336},"",[30,338,339],{"id":339},"参考",[328,341,344],{"className":342,"code":343,"language":333},[331],"https:\u002F\u002Fssr.vuejs.org\u002Fzh\u002F\nhttps:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F90746589\nhttps:\u002F\u002Fwww.jianshu.com\u002Fp\u002F10b6074d772c\nhttps:\u002F\u002Fgithub.com\u002Fyacan8\u002Fblog\u002Fissues\u002F30\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6890810591968477191\nhttps:\u002F\u002Fjuejin.im\u002Fpost\u002F6844903959241424910\n",[17,345,343],{"__ignoreMap":336},{"title":336,"searchDepth":347,"depth":347,"links":348},2,[349,354,358,362,363,364],{"id":32,"depth":347,"text":33,"children":350},[351,353],{"id":62,"depth":352,"text":62},3,{"id":75,"depth":352,"text":75},{"id":93,"depth":347,"text":94,"children":355},[356,357],{"id":134,"depth":352,"text":62},{"id":168,"depth":352,"text":75},{"id":220,"depth":347,"text":221,"children":359},[360,361],{"id":265,"depth":352,"text":62},{"id":273,"depth":352,"text":75},{"id":281,"depth":347,"text":281},{"id":326,"depth":347,"text":326},{"id":339,"depth":347,"text":339},"SSR服务端渲染Server Side Render就是当进行请求时，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的HTML即可。","md",{},true,"\u002Fvue\u002F服务端渲染ssr的理解",{"title":5,"description":365},"Vue\u002F服务端渲染SSR的理解","aairFbSOnMFDmT9IKnbgULZiD7TFgfiLI-Bj9EIEjD0",1791042472407]