標題:伺服器端渲染的優點和缺點。何時使用它以及何時選擇其他東西

發表:真實

描述:伺服器端渲染的優缺點。何時使用它以及何時選擇其他東西

標籤:[react、javascript、webdev、ssr]

封面圖:https://thepracticaldev.s3.amazonaws.com/i/pr5kh72wjga9rplx6c2z.jpg


攝影:Daniel H. Tong 在 Unsplash 上

什麼是 SSR?為什麼要關心?

SSR 代表伺服器端渲染。我將主要討論 React,但我想這對其他框架也有意義。

如果您關心以下內容,則需要 SSR:

  • 第一次有意義的繪畫。僅 SSR 並不能保證良好的結果。您還需要關鍵的 CSS 和接近客戶等。

  • SEO 並支援其他機器人,如 Twitter 和 Facebook

  • 優雅降級。對於這一點,您需要確保您的服務無需 JS 即可使用

這有什麼難的?

SSR 就像一個新的維度。無論您使用什麼,都需要為 SSR 重新配置它。

  • 您是否使用「componentDidMount」來取得資料?您需要使用“getInitialProps”(來自 next.js 或 after.js)或 Redux 等狀態管理庫來使其在伺服器上執行

  • 你使用路由器嗎?需要在伺服器上進行配置

  • 你使用 i18n 嗎?需要在伺服器上進行配置

  • 你使用 HMR 嗎?您將需要重新載入瀏覽器和伺服器的程式碼

  • 你使用反應頭盔嗎?需要在伺服器上進行配置

  • 你使用react-loadable嗎?您需要配置伺服器以傳遞使用的模組,以便客戶端可以預先載入它們

  • 你使用 Redux 嗎?您需要序列化儲存並將其傳遞給客戶端

  • 你使用 CSS-in-JS 嗎?您需要將其配置為在伺服器上產生關鍵 CSS 並將其內聯到 HTML 回應中

別誤會我的意思,這都是可以解決的。 Next.js 和 Razzle 解決了大部分問題。我想向您展示的是 SSR 如何將所有內容加倍(另一個維度),並且大多數時候都需要樣板。

好的。現在讓我們超越利益。

第一個有意義的油漆

如果你正在做 SSR,這並不意味著你會得到開箱即用的第一個有意義的油漆。

  • 您的設定是否有良好的第一個位元組時間?如果您的伺服器速度緩慢或過載 - 您將會遇到問題。確保使用最新的節點,縮小伺服器程式碼,使用串流渲染,最佳化子查詢(資料庫或網路)(如果有) 。

  • 你們有提供關鍵的 CSS 嗎?否則,瀏覽器無法開始渲染頁面。

  • 你使用網頁字體嗎?如果是,你會優化嗎?

  • 你的伺服器靠近客戶端嗎? 如果您的伺服器在歐洲,但客戶端在日本,SSR 將無法幫助您。從 CDN 提供「shell」可能會比 SSR 更快(從印象的角度來看)。如果因為法律限制您無法將伺服器移至離客戶端更近的地方怎麼辦?

  • 您是否確保沒有不必要的重定向?否則,在慢速 3G 上重定向將毀掉你好不容易獲得的毫秒數。

SSR 並不是首次有意義的繪製的靈丹妙藥。如果您的後端很慢或距離很遠,您需要檢查「shell」和 CDN 是否可以更好地工作。您可以使用 react-snap 之類的東西來預渲染靜態頁面並為其他頁面產生「shell」。

如果您的網站往往更靜態,您可以使用預渲染而不是 SSR。查看react-staticgatsby 或[react-snap](https://github.com /react-snap)。com/stereobooster/react-snap)。

這裡有3個選項:

  • 固態繼電器

  • 預先渲染,如react-snap、react-static、gatsby等。

  • 按需預渲染,如 rendertron、puppetron、pupperender 等。

如果可以的話,選擇預渲染。如果您唯一關心的是 SEO,則可以隨時輕鬆加入按需預渲染。

優雅降級

這一點很棘手。這實際上取決於您想要實現多少降級?

  • 你想支持連結嗎?這應該可以工作

  • 你想像 https://www.seek.com.au/ 那樣支援下拉式選單嗎?你需要使用 CSS 和複選框的一些技巧

  • 您需要支援表格嗎?除了現有的 JSON API 之外,您還需要端點來處理這些表單

有些功能沒有 JS 是相當困難的,例如組合框或地圖

結論

SSR不錯,可以試試看。另外,請確保您的用戶真正從中受益。

如果您無法使用 SSR,請嘗試預渲染器,有時這是最簡單的選擇。

twittergithub 上關注我。


原文出處:https://dev.to/stereobooster/server-side-rendering-or-ssr-what-is-it-for-and-when-to-use-it-2cpg


共有 0 則留言