窗口.__ INITIAL_STATE__仍然是在React Universal应用程序中将初始状态传递给客户端的首选方法吗？

Question

I'm currently reading a book about React and Universal apps in which the author claims that the following is best practice to pass initial state from server to client: 我正在阅读一本关于React和Universal应用程序的书，其中作者声称以下是将初始状态从服务器传递到客户端的最佳实践：

server.js 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);
}

And then, in the client you would read out the data like this: 然后，在客户端中，您将读出如下数据：

bundle.js bundle.js

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

From what I understand is that the initial state first gets converted to a string and then attached as a global object literal to the window object. 据我所知，初始状态首先转换为字符串，然后作为全局对象文字附加到窗口对象。

This solution looks very rough to me. 这个解决方案看起来非常粗糙。 The book was released in mid 2016. Is usage of window.__INITIAL_STATE__ still the way how to do this or are there better solutions? 这本书是在2016年中期发布的。使用window.__INITIAL_STATE__仍然是如何做到这一点的方式还是有更好的解决方案？

For example, I could imagine that it would be possible to offer the initial state in a separate micro service call which then could also be cached better than if the data is embedded directly into the document because then the initial state data has to be transferred every time the page refreshes, even if the data hasn't changed. 例如，我可以想象，可以在单独的微服务调用中提供初始状态，然后也可以比将数据直接嵌入到文档中更好地缓存，因为这样每个初始状态数据都必须传输页面刷新的时间，即使数据没有改变。

Answer 1

Simple answer: Yes. 简单回答：是的。

But I'm not sure why no one has pointed out that you have a very common XSS vulnerability using JSON.stringify(initialData) what you want to do instead is to: 但是我不确定为什么没有人指出你有一个非常常见的XSS漏洞，使用JSON.stringify(initialData)你要做的是：

import serialize from 'serialize-javascript';

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

Answer 2

HTTP works by caching responses, in your case, if the initial state will always be the same, you can also cache this in server side and display it in the page, it will work faster, because react will have access immediately to this value so it will not have to wait. HTTP通过缓存响应来工作，在你的情况下，如果初始状态总是相同的，你也可以在服务器端缓存它并在页面中显示它，它会更快地工作，因为react将立即访问这个值，所以它不必等待。 Also you can also force the browser to cache the page, so the response for the page will be the same with the initial state not changing. 此外，您还可以强制浏览器缓存页面，因此页面的响应将与初始状态不变的情况相同。

With the extra call request, you rely on the browser to cache that call, but you'll have to build an extra step, make react re-render when the information arrives or block react to render until the information is ready. 使用额外的调用请求，您依靠浏览器来缓存该调用，但是您必须构建一个额外的步骤，在信息到达时重新生成反应或阻止对呈现做出反应直到信息准备就绪。

So I'll go with number 1, gives you more flexibility and some other nice to have, like server rendering, which can be easily achieved after having the state loaded in the server. 因此，我将使用数字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