TA貢獻1853條經驗 獲得超9個贊
考慮以下反應代碼。
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
ReactDOM.render(
<React.StrictMode>
<Square />
</React.StrictMode>,
document.getElementById('root')
);
這段代碼沒有任何神奇的作用。它只是制作以下 html 代碼。
<div id="root">
<button class="square">
/* What ever the props passed to square lives here. */
</button>
</div>
我不知道上面的反應代碼是否正常工作，因為我什至沒有花時間審查它。這只是一個示例代碼，但您可以明白其中的想法。
執行react js代碼以在網頁上生成上述HTML結構。但是您始終可以直接在 html 文件中創建該 html 結構，而無需使用 React。
在客戶端渲染中，服務器發送客戶端 JavaScript（而不是 html）。然后客戶端的 Web 瀏覽器執行該 javascript 并根據 js 代碼創建 html 結構。
在服務器端渲染中，服務器執行提供的javascript并創建適當的html結構并將其放入index.html（或適當的html文件）中。當用戶請求html文件時，服務器直接將html發送給用戶，而不是javascript。
現在請記住，在服務器端渲染 (SSR) 和客戶端渲染 (CSR) 中，html 會發送到用戶的瀏覽器，而 javascript 會使用<script>標簽發送。但在 CSR 中，html 文件只包含一個空<body>[大多數時候]。在CSR中，通過執行js在瀏覽器瀏覽器中創建必要的html節點。另一方面，SSR 在服務器中執行 javascript，僅將結果 html 文件發送到客戶端。這并不意味著客戶端收到的 html 文件不包含scripts. 服務器上只構建了html結構。
更多實際場景...
考慮一個 html 文件需要從外部 API 獲取數據的情況。在CSR中，js被發送到Web瀏覽器。瀏覽器執行該js并從瀏覽器中的API獲取數據。在 SSR 中，服務器從 API 獲取所需的數據，將其適當地包裹在 HTML 標簽中，然后僅將 html 發送到客戶端。客戶端不需要從 API 獲取數據，服務器已經完成了。
渲染意味著組裝 html。不渲染像素或繪畫或其他任何東西。在SSR中，渲染發生在服務器中，而CSR中，渲染發生在瀏覽器中。
TA貢獻1804條經驗 獲得超3個贊
HTML 已組裝，但沒有布局、繪畫或合成或類似的東西。
唯一的渲染是 HTML 文檔。
通常，這種技術最令人信服的原因是搜索引擎優化。即使是運行 JavaScript 的爬蟲（如 Google）也不會一直這樣做，而且它們往往對運行內容和運行時長有嚴格的限制。
舉報