伺服器端渲染SSR的優缺點?

2022-06-14 20:36:14 字數 1710 閱讀 8209

ssr代表伺服器端渲染(server side rendering),這裡主要以react為目標討論這個話題,但是對其他框架也有參考意義。

關於ssr你需要關注:

1. 首次重要的繪製。單靠ssr並不能保證良好的效果,還需要關鍵的css和靠近客戶端。

2. 支援seo,支援twitter和facebook等其他機械人

3. 優雅的退化。這樣能確保你的服務在沒有js的情況下也是可用

有什麼難的?

ssr就像乙個新的維度,無論你使用什麼,你都需要為ssr重新配置。

1. 用componentdidmount來獲取資料嗎?你就需要使用類似getinitialprops(來自next.js或after.js)或狀態管理庫(如redux),這些要放在伺服器上執行。

2. 用router嗎?你需要在伺服器上配置它

3. 用i18n嗎?你需要在伺服器上配置它

5. 用react-helmet嗎?需要在伺服器上配置它

6. 是否使用react-loadable?需要配置伺服器以傳遞使用的模組,這樣客戶端可以預載入它們

7. 使用redux嗎?您需要序列化儲存並將其傳遞給客戶端

8. 使用css-in-js嗎?需要在伺服器上配置它,生成關鍵css並在html響應中內聯它

不要以為這些都是可以解決的,好像next.js和razzle已經解決了大部分問題,我想告訴你的是ssr如何將所有事情加倍(另乙個維度),並且大部分時間都需要樣板來處理所有事情。

第一次重要的繪製

如果正在進行ssr,這並不意味著你能獲得開箱即用的第一次重要的繪製。

1. 你的設定是否有為第乙個位元組這是好時間?如果你的伺服器執行緩慢或過載 - 你會遇到問題,確保使用最新節點,縮小伺服器**,使用流式渲染,優化子查詢(資料庫或網路)(如果有)。

2。 你提供關鍵的css嗎?否則,瀏覽器無法開始呈現頁面。

3. 你使用網路字型嗎?如果是的話,你會優化嗎?

4. 伺服器是否靠近客戶端?如果您的伺服器在歐洲,但客戶端在日本,ssr將無法幫助您。使用cdn服務,但是如果由於法律限制而無法將伺服器移近客戶端怎麼辦?

5. 你確定沒有不必要的重定向嗎?重新定向減慢速度。

6. ssr不是第一次重要繪製渲染的銀彈。如果你的後端很慢或很遠,你需要檢查"shell"包括cdn是否能更好地工作。你可以使用react-snap之類的東西來預呈現靜態頁面並為其他頁面生成「shell」。

7. 如果您的**更加靜態,您可以使用預渲染而不是ssr。使用react-static或gatsby或react-snap。

seo這裡有3個選項:

1. ssr

2. 預渲染,如react-snap, react-static, gatsby 等。

3. 根據需求進行預渲染,如rendertron,puppetron,pupperender等。

優雅的退化

這個很棘手,這真的取決於你想要降到多少級?

1. 你想支援鏈結嗎?

2. 是否想要支援下拉列表,就像在中一樣?你需要使用css和核取方塊的一些技巧

3. 你想要支援**嗎?除了現有的json api之外,您還需要端點來處理這些表單

4. 沒有js的一些功能非常難,比如組合框或地圖

結論ssr很好,試一試。請確保您的使用者真正從中受益。

如果您不能使用ssr而是嘗試預渲染器,有時它是最簡單的選擇。

server side rendering pros and cons. when to use i

react實現ssr伺服器端渲染總結和案例 例項

ssr 是 server side render 的縮寫,從字面上就可以理解 在伺服器端渲染,那渲染什麼呢,很顯然渲染現在框架中的前後端分離所建立的虛擬 dom 傳統的 spa 應用 如 react 存在不利於優化,首屏載入慢等。伺服器端渲染 增加首屏載入速度,解決白屏問題 可以直接渲染頁面,利於 ...

伺服器端渲染基礎

客戶端渲染 現代化的服務端渲染 優點 1.1 使用者體驗好 1.2 開發效率高 1.3渲染效能好 1.4可維護性好 缺點2.1 首屏渲染時間長 與傳統伺服器端渲染直接獲取服務端直接渲染好的html不同,單頁面應用使用js在客戶端生成html來呈現網頁內容,使用者需要等待客戶端js解析執行完才能看到頁...

react 伺服器端渲染

伺服器端渲染 vs 客戶端渲染 1.伺服器端渲染需要消耗更多的伺服器資源 cpu,記憶體等 2.客戶端渲染可以將靜態資源部署到cdn上,實現高併發 3.服務端渲染對seo更友好 react 伺服器端渲染的實現 1.構建編譯與執行環境 安裝 babel node npm install babel c...