基于Puppeteer實現(xiàn)前端SSR完美接入方案
作者：Tinywan
Puppeteer 是?個 Node 庫，它提供了?個?級 API 來通過 DevTools 協(xié)議控制 Chromium 或 Chrome。Puppeteer 默認(rèn)以 headless 模式運?，但是可以通過修改配置?件 運?“有頭”模式。
什么是SSR？
SSR 全稱是 Server Side Rendering 代表的是服務(wù)端渲染。與客戶端渲染不同的是，SSR 輸出的是?個渲染完成的html，整個渲染過程是在服務(wù)器端進(jìn)?的。例如傳統(tǒng)的ASP、JSP、PHP等都是服務(wù)端渲染。
優(yōu)點
- 有利于 SEO，由于頁?在服務(wù)器?成，搜索引擎直接抓取到最終頁?結(jié)果。
- 有利于?屏渲染，html 所需要的數(shù)據(jù)都在服務(wù)器處理好，直接?成 html，?屏渲染時間變短。
缺點
- 占?服務(wù)器資源，渲染?作都在服務(wù)端渲染
- ?戶體驗不好，每次跳轉(zhuǎn)到新頁?都需要在重新服務(wù)端渲染整個頁?，不能只渲染可變區(qū)域
SSR 主要偽代碼
index.html
<!DOCTYPE html>
<html>
<head>
<title>
開源技術(shù)小棧
</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？
CSR 全稱是 Client Side Rendering 代表的是客戶端渲染。顧名思義，就是在渲染?作在客戶端（瀏覽器）進(jìn)?，?不是在服務(wù)器端進(jìn)?。舉個例?，我們平時?vue，react等框架開發(fā)的項?，都是先下載 html ?檔（不是最終的完全的 html），然后下載 js 來執(zhí)?渲染出頁?結(jié)果。
優(yōu)點
- 前后端分離。前端專注于界?開發(fā)，后端專注于 api 開發(fā)，且前端有更多的選擇性，可以使?vue，react框架開發(fā)，?不需要遵循后端特定的模板。
- 服務(wù)器壓?變輕了，渲染?作在客戶端進(jìn)?，服務(wù)器直接返回不加?的html。
- ?戶在后續(xù)訪問操作體驗好，（?屏渲染慢）可以將?站做成 SPA（單頁應(yīng)?），可以增量渲染。
缺點
- 不利于 SEO，因為搜索引擎不執(zhí)? JS 相關(guān)操作，?法獲取渲染后的最終 html。
- ?屏渲染時間?較長，因為需要頁?執(zhí)? ajax 獲取數(shù)據(jù)來渲染頁?，如果請求接?多，不利于?屏渲染。
CSR 主要偽代碼
index.html內(nèi)容：
<!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>
開源技術(shù)小棧
</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>
前后端分離以及前后端框架的落地，基于標(biāo)準(zhǔn)的RESTFUL，制定接口規(guī)范和文檔
前后端接口授權(quán)機制，身份認(rèn)證和授權(quán)策略的擬定
</strong>
</noscript>
<script src=/js/runtime.2eb7950f.js></script>
<script src=/js/app.7291647f.js></script>
</body>
</html>常見的 SSR 解決方案
Next.js 等同類型框架
Next.js 是基于 React 的服務(wù)端渲染?具。
優(yōu)點
- 直觀的、 基于頁? 的路由系統(tǒng)（并?持 動態(tài)路由）
- 預(yù)渲染。?持在頁?級的 靜態(tài)?成 (SSG) 和 服務(wù)器端渲染 (SSR)
- ?動代碼拆分，提升頁?加載速度
- 具有經(jīng)過優(yōu)化的預(yù)取功能的 客戶端路由
- 內(nèi)置 CSS 和 Sass 的?持，并?持任何 CSS-in-JS 庫
- 開發(fā)環(huán)境?持 快速刷新
- 利? Serverless Functions 及 API 路由 構(gòu)建 API 功能
- 完全可擴(kuò)展
Puppeteer 通? SSR 服務(wù)端渲染
Puppeteer 是?個 Node 庫，它提供了?個?級 API 來通過 DevTools 協(xié)議控制 Chromium 或 Chrome。Puppeteer 默認(rèn)以 headless 模式運?，但是可以通過修改配置?件 運?“有頭”模式。
責(zé)任編輯：武曉燕
來源：
開源技術(shù)小棧
