基于Puppeteer實現前端SSR完美接入方案
作者：Tinywan
Puppeteer 是?個 Node 庫，它提供了?個?級 API 來通過 DevTools 協議控制 Chromium 或 Chrome。Puppeteer 默認以 headless 模式運?，但是可以通過修改配置?件 運?“有頭”模式。
什么是SSR？
SSR 全稱是 Server Side Rendering 代表的是服務端渲染。與客戶端渲染不同的是，SSR 輸出的是?個渲染完成的html，整個渲染過程是在服務器端進?的。例如傳統的ASP、JSP、PHP等都是服務端渲染。
優點
- 有利于 SEO，由于頁?在服務器?成，搜索引擎直接抓取到最終頁?結果。
- 有利于?屏渲染，html 所需要的數據都在服務器處理好，直接?成 html，?屏渲染時間變短。
缺點
- 占?服務器資源，渲染?作都在服務端渲染
- ?戶體驗不好，每次跳轉到新頁?都需要在重新服務端渲染整個頁?，不能只渲染可變區域
SSR 主要偽代碼
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？
CSR 全稱是 Client Side Rendering 代表的是客戶端渲染。顧名思義，就是在渲染?作在客戶端（瀏覽器）進?，?不是在服務器端進?。舉個例?，我們平時?vue，react等框架開發的項?，都是先下載 html ?檔（不是最終的完全的 html），然后下載 js 來執?渲染出頁?結果。
優點
- 前后端分離。前端專注于界?開發，后端專注于 api 開發，且前端有更多的選擇性，可以使?vue，react框架開發，?不需要遵循后端特定的模板。
- 服務器壓?變輕了，渲染?作在客戶端進?，服務器直接返回不加?的html。
- ?戶在后續訪問操作體驗好，（?屏渲染慢）可以將?站做成 SPA（單頁應?），可以增量渲染。
缺點
- 不利于 SEO，因為搜索引擎不執? JS 相關操作，?法獲取渲染后的最終 html。
- ?屏渲染時間?較長，因為需要頁?執? ajax 獲取數據來渲染頁?，如果請求接?多，不利于?屏渲染。
CSR 主要偽代碼
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>常見的 SSR 解決方案
Next.js 等同類型框架
Next.js 是基于 React 的服務端渲染?具。
優點
- 直觀的、 基于頁? 的路由系統（并?持 動態路由）
- 預渲染。?持在頁?級的 靜態?成 (SSG) 和 服務器端渲染 (SSR)
- ?動代碼拆分，提升頁?加載速度
- 具有經過優化的預取功能的 客戶端路由
- 內置 CSS 和 Sass 的?持，并?持任何 CSS-in-JS 庫
- 開發環境?持 快速刷新
- 利? Serverless Functions 及 API 路由 構建 API 功能
- 完全可擴展
Puppeteer 通? SSR 服務端渲染
Puppeteer 是?個 Node 庫，它提供了?個?級 API 來通過 DevTools 協議控制 Chromium 或 Chrome。Puppeteer 默認以 headless 模式運?，但是可以通過修改配置?件 運?“有頭”模式。
責任編輯：武曉燕
來源：
開源技術小棧
