伺服器端渲染的數據怎麼爬

Ⅰ 快速在你的vue/react應用中實現ssr(服務端渲染)

前言

了解Vue和React，我們通常使用它們構建客戶端應用程序，通過生成DOM和操作DOM實現客戶端渲染。然而，SPA應用的首屏渲染時間過長，且存在嚴重的SEO問題。因此，我們需要考慮服務端渲染（SSR）來解決這些問題。

服務端渲染（SSR）通過伺服器端完成HTML結構拼接，直接將拼接好的HTML發送到瀏覽器，使其成為可交互頁面的技術。對於SSR頁面，搜索引擎可以直接獲取到內容，而客戶端渲染的應用則需要執行伺服器返回的JS才能得到正確的網頁內容。本文將介紹幾個常用的基於Vue和React的SSR技術實現方案。

摘要SSR技術實現方案

我們將列舉幾個基於Vue和React的SSR實現方案。方案包括使用node+Vue-server-renderer實現Vue項目服務端渲染、使用node+React renderToStaticMarkup實現React項目服務端渲染，以及使用谷歌的Rendertron實現服務端渲染。最後，我們簡要介紹如何在本地運行Rendertron並實現服務端渲染。

使用谷歌Rendertron實現服務端渲染

Rendertron是Google推出的一種技術，能夠使得SPA應用被不支持執行JS的搜索引擎爬取渲染後的內容。其原理是通過使用Headless Chrome在內存中執行JS，得到完整內容後返回給客戶端。通常，我們會將Rendertron部署為獨立的HTTP服務，並通過配置中間件或路由規則，使得當檢測到搜索引擎爬蟲的UA時，請求被代理到Rendertron服務。這樣可以實現服務端渲染，而無需考慮服務端渲染的部分。

具體實現

首先安裝Rendertron，通常在GitHub中可以找到安裝和使用方法。在安裝前，建議先安裝Docker，以獲得便捷的安裝和啟動體驗。本地運行Rendertron，安裝好Docker後，全局安裝Rendertron，然後使用谷歌瀏覽器的cli啟動服務。通過輸入命令，可以在命令行中獲取本地服務的地址，如localhost:3000。將此地址與網站地址結合，使用Rendertron服務進行渲染。

使用Rendertron的好處是它可以按照SPA模式開發項目，無需為兼容服務端渲染而編寫額外的兼容代碼。

後期展望

未來，我們將繼續探索大前端技術，包括HTML5游戲、Webpack、Node.js、Gulp、CSS3、JavaScript、NodeJS、Canvas數據可視化等。歡迎加入《趣談前端》技術群，一起學習討論，共同探索前端的邊界。

Ⅱ 什麼是服務端渲染

服務端渲染，簡稱 SSR，是現代 Web 應用中的一種渲染方式。它與傳統的客戶端渲染（CSR）在頁面的構建和呈現方式上有所不同。SSR 的核心思想是在伺服器端預先組裝 HTML，然後將這個完整的 HTML 文檔發送到瀏覽器，由瀏覽器直接解析並展示在頁面上。以下是服務端渲染的概述、由來、利弊以及實現步驟的詳細描述。

服務端渲染的定義

服務端渲染是在瀏覽器請求頁面 URL 時，伺服器將 HTML 文檔預先組裝好，包含所需數據和樣式，並返回給瀏覽器。瀏覽器接收到這個完整的 HTML 文檔後，可以直接解析並構建 DOM 樹，而無需通過執行 JavaScript 腳本來渲染頁面。這與客戶端渲染（在瀏覽器中動態生成 HTML 和交互元素）形成了鮮明對比。

服務端渲染的由來

在 Web1.0 時代，服務端渲染是默認的頁面構建方式，伺服器根據用戶請求動態生成 HTML 文檔，包含資料庫查詢結果。這種模式下，頁面呈現過程不涉及 JavaScript，適用於靜態內容和早期的動態應用。隨著 AJAX 的出現和前端復雜度的增加，客戶端渲染逐漸興起，將頁面的構建和動態內容呈現下放給瀏覽器，從而提高用戶體驗。然而，這帶來了 SEO（搜索引擎優化）和首屏載入時間的問題，促使開發者開始探索服務端渲染的新方式。

服務端渲染的利弊

服務端渲染有其優勢和局限性：

- **有利於 SEO**：通過提供完整的 HTML 頁面，服務端渲染能提高搜索引擎對網站的爬取效率，提升頁面在搜索結果中的排名，從而增加流量。

- **白屏時間更短**：服務端渲染在用戶請求頁面時即提供完整 HTML，無需等待 JavaScript 載入和執行，減少了頁面載入時間。

- **缺點**：並非所有應用都適合服務端渲染。復雜應用中，大量的 JavaScript 代碼可能導致首屏載入時間過長，且對於使用大量動態內容的單頁面應用（SPA），服務端渲染可能效率不高。

同構與實現

同構（isomorphic）是指在客戶端和伺服器端共享代碼，使得一份代碼既能在伺服器端執行，也能在瀏覽器端執行。實現服務端渲染需要通過構建工具（如 Webpack）配置服務端和客戶端的構建流程，確保組件和路由在兩處都能正確載入和執行。這通常涉及創建通用的構建配置文件，以及編寫能同時在客戶端和伺服器端運行的組件和路由邏輯。

實現服務端渲染的關鍵步驟包括：

1. **構建服務端和客戶端代碼**：分別針對伺服器和瀏覽器環境，配置不同的 Webpack 構建配置文件。
2. **路由共享**：確保伺服器和客戶端都具備路由匹配邏輯，能夠根據不同的 URL 請求載入正確的組件。
3. **數據模型共享**：通過 Vuex 或類似狀態管理庫，確保組件狀態在伺服器端和客戶端之間同步。
4. **狀態同步**：在伺服器端渲染完成後，將狀態數據序列化，並在客戶端渲染時同步到瀏覽器端的 store，以激活 DOM 元素。

服務端渲染是一種兼顧性能和用戶體驗的技術，尤其在 SEO 和白屏時間方面有顯著優勢。然而，其是否適合應用取決於具體場景和需求，開發者需要權衡利弊並綜合考慮應用的復雜度、性能需求和 SEO 優化目標。