小編精選 - 技術文章翻譯 · 01月25日

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

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

發表：真實

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

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

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

攝影：Daniel H. Tong 在 Unsplash 上

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

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

如果您關心以下內容，則需要 SSR：

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-static 或gatsby 或[react-snap](https://github.com /react-snap)。com/stereobooster/react-snap)。

這裡有3個選項：

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

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

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

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

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

在 twitter 和 github 上關注我。

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

0個讚 0留言 79瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

精選技術文章翻譯，幫助開發者持續吸收新知。