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 来执⾏渲染出页⾯结果。
vue
,react
框架开发,⽽不需要遵循后端特定的模板。html
。JS
相关操作,⽆法获取渲染后的最终 html
。ajax
获取数据来渲染页⾯,如果请求接⼜多,不利于⾸屏渲染。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 模式运⾏,但是可以通过修改配置⽂件 运⾏“有头”模式。
使⽤场景