窗口.__ INITIAL_STATE__仍然是在React Universal應用程序中將初始狀態傳遞給客戶端的首選方法嗎？

Question

我正在閱讀一本關於React和Universal應用程序的書，其中作者聲稱以下是將初始狀態從服務器傳遞到客戶端的最佳實踐：

server.js

import React from 'react';
import {renderToStaticMarkup} from 'react-dom/server';
import Myapp from '../MyApp';
import api from '../services';

function renderPage(html, initialData) {
    return `
        <html>
            <body>
                ${html}
            </body>
            <script>
                window.__INITIAL_STATE__ = ${JSON.stringify(initialData)};
            </script>
            <script src="bundle.js"></script>
        </html>
    `;
}

export default function(request, reply) {
    const initialData = api.getData();
    const html = renderToStaticMarkup(<MyApp />);
    reply(renderPage(html, initialData);
}

然后，在客戶端中，您將讀出如下數據：

bundle.js

const initialData = window.__INITIAL_STATE__ || {};
const mountNode = document.getElementById('root');
ReactDOM.render(<MyApp />, mountNode);

據我所知，初始狀態首先轉換為字符串，然后作為全局對象文字附加到窗口對象。

這個解決方案看起來非常粗糙。 這本書是在2016年中期發布的。使用window.__INITIAL_STATE__仍然是如何做到這一點的方式還是有更好的解決方案？

例如，我可以想象，可以在單獨的微服務調用中提供初始狀態，然后也可以比將數據直接嵌入到文檔中更好地緩存，因為這樣每個初始狀態數據都必須傳輸頁面刷新的時間，即使數據沒有改變。

Answer 1

簡單回答：是的。

但是我不確定為什么沒有人指出你有一個非常常見的XSS漏洞，使用JSON.stringify(initialData)你要做的是：

import serialize from 'serialize-javascript';

 window.__INITIAL_STATE__ = ${serialize(initialData)};

Answer 2

HTTP通過緩存響應來工作，在你的情況下，如果初始狀態總是相同的，你也可以在服務器端緩存它並在頁面中顯示它，它會更快地工作，因為react將立即訪問這個值，所以它不必等待。 此外，您還可以強制瀏覽器緩存頁面，因此頁面的響應將與初始狀態不變的情況相同。

使用額外的調用請求，您依靠瀏覽器來緩存該調用，但是您必須構建一個額外的步驟，在信息到達時重新生成反應或阻止對呈現做出反應直到信息准備就緒。

因此，我將使用數字1，為您提供更多靈活性和其他一些好處，例如服務器渲染，這可以在服務器中加載狀態后輕松實現。

窗口.__ INITIAL_STATE__仍然是在React Universal應用程序中將初始狀態傳遞給客戶端的首選方法嗎？

問題描述

2 個解決方案

解決方案1
8 2018-01-08 02:53:59

解決方案2
0 2017-05-03 09:22:13

窗口.__ INITIAL_STATE__仍然是在React Universal應用程序中將初始狀態傳遞給客戶端的首選方法嗎？

問題描述

2 個解決方案

解決方案1 8 2018-01-08 02:53:59

解決方案2 0 2017-05-03 09:22:13

解決方案1
8 2018-01-08 02:53:59

解決方案2
0 2017-05-03 09:22:13