導航:首頁 > 配伺服器 > 伺服器端渲染的數據怎麼爬

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

發布時間:2025-01-21 04:48:37

Ⅰ 快速在你的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 優化目標。
閱讀全文

與伺服器端渲染的數據怎麼爬相關的資料

熱點內容
用python自製編譯器 瀏覽:950
android分享新浪微博客戶端 瀏覽:26
系統中伺服器在哪裡下載地址 瀏覽:1001
新a4安卓手機怎麼投屏 瀏覽:169
pdftoemf 瀏覽:886
java介面可以實現介面嗎 瀏覽:59
vb編程10個隨機函數 瀏覽:21
程序員個人簡介100 瀏覽:772
土木工程師演算法工程師 瀏覽:92
javaexcel導入oracle 瀏覽:880
如何設置異地伺服器 瀏覽:882
為什麼安卓手機藍牙耳機不會彈窗 瀏覽:546
linuxf77編譯器安裝教程 瀏覽:949
android本地錄音許可權 瀏覽:446
加密u盤內容怎麼拷貝 瀏覽:283
安卓手機為什麼看不到iso文件 瀏覽:582
用圖片做文件夾圖標 瀏覽:693
java正則表達式語法 瀏覽:865
美圖秀在線壓縮圖片 瀏覽:184
蘋果自帶控制app是什麼 瀏覽:909