ReactJS 服務器端渲染與客戶端渲染

Question

我剛剛開始研究 ReactJS，發現它為您提供了兩種渲染頁面的方式：服務器端和客戶端。 但是，我無法理解如何一起使用它。 是兩種不同的方式來構建應用程序，還是可以一起使用？

如果我們可以一起使用它，怎么做 - 我們是否需要在服務器端和客戶端復制相同的元素？ 或者，我們是否可以只在服務器上構建應用程序的靜態部分，在客戶端構建動態部分，而無需連接到已經預渲染的服務器端？

Answer 1

對於給定的網站/網絡應用程序，您可以使用 react客戶端、服務器端或兩者。

客戶端

在這里，您完全在瀏覽器上運行 ReactJS。 這是最簡單的設置，包括大多數示例（包括http://reactjs.org上的示例）。 服務器呈現的初始 HTML 是一個占位符，一旦所有腳本加載完畢，整個 UI 就會在瀏覽器中呈現。

服務器端

將 ReactJS 視為這里的服務器端模板引擎（如 jade、把手等......）。 服務器呈現的 HTML 包含應有的 UI，您無需等待任何腳本加載。 您的頁面可以被搜索引擎編入索引（如果不執行任何 javascript）。

由於 UI 是在服務器上呈現的，因此您的任何事件處理程序都不會工作，並且沒有交互性（您有一個靜態頁面）。

兩個都

在這里，初始渲染在服務器上。 因此，瀏覽器接收到的 HTML 具有應有的 UI。 加載腳本后，虛擬 DOM 將再次重新渲染以設置組件的事件處理程序。

在這里，您需要確保使用在服務器上渲染的相同props重新渲染完全相同的虛擬 DOM（根 ReactJS 組件）。 否則，ReactJS 會抱怨服務器端和客戶端虛擬 DOM 不匹配。

由於 ReactJS 在重新渲染之間區分虛擬 DOM，因此真實 DOM 不會發生變異。 只有事件處理程序綁定到真正的 DOM 元素。

Answer 2

圖片來源： 沃爾瑪實驗室工程博客

注意： SSR （服務器端渲染）、 CSR （客戶端渲染）。

與 SSR 的主要區別在於，服務器對客戶端瀏覽器的響應包括要呈現的頁面的 HTML。 同樣重要的是要注意，盡管使用 SSR，頁面呈現速度更快。 在下載 JS 文件並且瀏覽器執行 React 之前，頁面不會為用戶交互做好准備。

一個缺點是 SSR TTFB（第一個字節的時間）可能會稍長一些。 可以理解，因為服務器需要一些時間來創建 HTML 文檔，這反過來會增加服務器響應的大小。

Answer 3

我實際上很想知道同樣的研究，雖然你正在尋找的答案在評論中給出，但我覺得它應該更加突出，因此我正在寫這篇文章（一旦我能想出一個我會更新更好的方法，因為我發現解決方案在架構上至少是有問題的）。

您需要同時考慮兩種方式來編寫組件，因此基本上將if開關放在任何地方以確定您是在客戶端還是服務器上，然后作為 DB 查詢（或服務器上的任何適當內容）或 REST 調用（在客戶端）。 然后，您必須編寫生成數據並將其公開給客戶端的端點，然后就可以了。

再次，很高興了解更清潔的解決方案。

Answer 4

是兩種不同的方式來構建應用程序，還是可以一起使用？

它們可以一起使用。

如果我們可以一起使用它，怎么做 - 我們是否需要在服務器端和客戶端復制相同的元素？ 或者，我們是否可以只在服務器上構建應用程序的靜態部分，在客戶端構建動態部分，而無需連接到已經預渲染的服務器端？

最好呈現相同的布局以避免回流和重繪操作，減少閃爍/閃爍，您的頁面會更流暢。 但是，這不是限制。 您可以很好地緩存 SSR html（ Electrode為縮短響應時間所做的事情）/發送靜態 html，該 html 會被 CSR（客戶端渲染）覆蓋。

如果您剛開始使用 SSR，我建議從簡單開始，SSR 會很快變得非常復雜。 在服務器上構建 html 意味着無法訪問窗口、文檔等對象（客戶端上有這些），無法合並異步操作（開箱即用），並且通常需要進行大量代碼編輯以使您的代碼 SSR 兼容（因為你必須使用 webpack 來打包你的 bundle.js）。 像 CSS 導入、require 和 import 之類的東西突然開始讓你感到厭煩（在沒有 webpack 的默認 React 應用程序中，情況並非如此）。

SSR 的一般模式是這樣的。 服務請求的 Express 服務器：

const app = Express();
const port = 8092;

// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
    const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
    console.log('fullUrl: ', fullUrl);
    console.log('req.url: ', req.url);

    // Create a new Redux store instance
    const store = createStore(reducerFn);

    const urlToRender = req.url;
    // Render the component to a string
    const html = renderToString(
        <Provider store={store}>
            <StaticRouter location={urlToRender} context={{}}>
                {routes}
            </StaticRouter>
        </Provider>
    );
    const helmet = Helmet.renderStatic();

    // Grab the initial state from our Redux store
    const preloadedState = store.getState();

    // Send the rendered page back to the client
    res.send(renderFullPage(helmet, html, preloadedState));
}

我對開始使用 SSR 的人的建議是提供靜態 html。 您可以通過運行 CSR SPA 應用程序來獲取靜態 html：

document.getElementById('root').innerHTML

不要忘記，使用 SSR 的唯一原因應該是：

1. 搜索引擎優化
2. 更快的加載（我會打折扣）

黑客： https : //medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc

Answer 5

服務器端渲染是您最初在服務器中渲染頁面以及將完全渲染的頁面發送回客戶端的方式。

您將在此鏈接中獲得更多詳細信息。 點擊這里