標題：伺服器端渲染的優點和缺點。何時使用它以及何時選擇其他東西
發表：真實
描述：伺服器端渲染的優缺點。何時使用它以及何時選擇其他東西
標籤：[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-static 或gatsby 或[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，請嘗試預渲染器，有時這是最簡單的選擇。
原文出處：https://dev.to/stereobooster/server-side-rendering-or-ssr-what-is-it-for-and-when-to-use-it-2cpg
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式