SSR 全称是 Server Side Rendering 代表的是服务端渲染。与客户端渲染不同的是，SSR 输出的是⼀个渲染完成的html，整个渲染过程是在服务器端进⾏的。例如传统的ASP、JSP、PHP等都是服务端渲染。
index.html
<!DOCTYPE html><html><head> <title> 开源技术小栈 </title>"/></head><body id="PUPPETEER_SSR"><div id="app"> <div class="page-home"> <div class="item-nav"> 公众号 </div> </div></div><script type="text/javascript"> document.querySelector("body>div").innerHTML = "";</script><script src="xxxx.js"></script></body></html>CSR 全称是 Client Side Rendering 代表的是客户端渲染。顾名思义，就是在渲染⼯作在客户端（浏览器）进⾏，⽽不是在服务器端进⾏。举个例⼦，我们平时⽤vue，react等框架开发的项⽬，都是先下载 html ⽂档（不是最终的完全的 html），然后下载 js 来执⾏渲染出页⾯结果。
index.html内容：
<!DOCTYPE html><html><head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <link rel=icon href=/favicon.ico> <title> 开源技术小栈 </title> <link rel=stylesheet href=//at.baidu.com/t/12321.css> <link href=/js/app.7291647f.js rel=preload as=script> <link href=/js/chunk-elementUI.a450811c.js rel=preload as=script> <link href=/css/chunk-libs.48206084.css rel=stylesheet> <link href=/css/app.cc84f854.css rel=stylesheet></head><body><noscript> <strong> 前后端分离以及前后端框架的落地，基于标准的RESTFUL，制定接口规范和文档 前后端接口授权机制，身份认证和授权策略的拟定 </strong></noscript><script src=/js/runtime.2eb7950f.js></script><script src=/js/app.7291647f.js></script></body></html>Next.js 是基于 React 的服务端渲染⼯具。
Puppeteer 是⼀个 Node 库，它提供了⼀个⾼级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运⾏，但是可以通过修改配置⽂件 运⾏“有头”模式。
本文链接：http://www.28at.com/showinfo-26-89408-0.html基于Puppeteer实现前端SSR完美接入方案
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 请求合并的三种技巧，性能起飞！
下一篇： 怎么计算我们自己程序的时间复杂度
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号