AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當前位置：首頁 > 科技  > 軟件

基于Puppeteer實現前端SSR完美接入方案

來源： 責編： 時間：2024-05-20 17:55:07 134觀看
導讀什么是SSR？SSR 全稱是 Server Side Rendering 代表的是服務端渲染。與客戶端渲染不同的是，SSR 輸出的是?個渲染完成的html，整個渲染過程是在服務器端進?的。例如傳統的ASP、JSP、PHP等都是服務端渲染。優點有利于 SEO，

什么是SSR？

SSR 全稱是 Server Side Rendering 代表的是服務端渲染。與客戶端渲染不同的是，SSR 輸出的是?個渲染完成的html，整個渲染過程是在服務器端進?的。例如傳統的ASP、JSP、PHP等都是服務端渲染。hhh28資訊網——每日最新資訊28at.com

優點

  • 有利于 SEO，由于頁?在服務器?成，搜索引擎直接抓取到最終頁?結果。
  • 有利于?屏渲染，html 所需要的數據都在服務器處理好，直接?成 html，?屏渲染時間變短。

缺點

  • 占?服務器資源，渲染?作都在服務端渲染
  • ?戶體驗不好，每次跳轉到新頁?都需要在重新服務端渲染整個頁?，不能只渲染可變區域

SSR 主要偽代碼

index.htmlhhh28資訊網——每日最新資訊28at.com

<!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 來執?渲染出頁?結果。hhh28資訊網——每日最新資訊28at.com

優點

  • 前后端分離。前端專注于界?開發，后端專注于 api 開發，且前端有更多的選擇性，可以使?vue，react框架開發，?不需要遵循后端特定的模板。
  • 服務器壓?變輕了，渲染?作在客戶端進?，服務器直接返回不加?的html。
  • ?戶在后續訪問操作體驗好，（?屏渲染慢）可以將?站做成 SPA（單頁應?），可以增量渲染。

缺點

  • 不利于 SEO，因為搜索引擎不執? JS 相關操作，?法獲取渲染后的最終 html。
  • ?屏渲染時間?較長，因為需要頁?執? ajax 獲取數據來渲染頁?，如果請求接?多，不利于?屏渲染。

CSR 主要偽代碼

index.html內容：hhh28資訊網——每日最新資訊28at.com

<!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 的服務端渲染?具。hhh28資訊網——每日最新資訊28at.com

優點

  • 直觀的、 基于頁? 的路由系統（并?持 動態路由）
  • 預渲染。?持在頁?級的 靜態?成 (SSG) 和 服務器端渲染 (SSR)
  • ?動代碼拆分，提升頁?加載速度
  • 具有經過優化的預取功能的 客戶端路由
  • 內置 CSS 和 Sass 的?持，并?持任何 CSS-in-JS 庫
  • 開發環境?持 快速刷新
  • 利? Serverless Functions 及 API 路由 構建 API 功能
  • 完全可擴展

Puppeteer 通? SSR 服務端渲染

Puppeteer 是?個 Node 庫，它提供了?個?級 API 來通過 DevTools 協議控制 Chromium 或 Chrome。Puppeteer 默認以 headless 模式運?，但是可以通過修改配置?件 運?“有頭”模式。hhh28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-89408-0.html基于Puppeteer實現前端SSR完美接入方案

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 請求合并的三種技巧，性能起飛！

下一篇： 怎么計算我們自己程序的時間復雜度

標簽：
  • 熱門焦點
Top