2
に関する反応し、著者は、次のことを主張したユニバーサルアプリはサーバからクライアントに初期状態を渡すことがベストプラクティスです：ウィンドウ.__ INITIAL_STATE__は依然としてReact Universalアプリケーションでクライアントに初期状態を渡すのに好ましい方法ですか？私は現在、<a href="http://amzn.to/2p4bfsE" rel="nofollow noreferrer">a book</a>を読んでいる
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：それから、クライアントに次のようなデータを読み出します210
const initialData = window.__INITIAL_STATE__ || {}; const mountNode = document.getElementById('root'); ReactDOM.render(<MyApp />, mountNode); 私が理解していることは、最初の状態が文字列に変換されてから、グローバルオブジェクトリテラルとしてウィンドウオブジェクトにアタッチされることです。
この解決策は非常に荒いです。この本は2016年中頃にリリースされました。window.__INITIAL_STATE__の使い方はまだこれを行う方法ですか、またはより良い解決策がありますか？
例えば、初期状態データを別のマイクロサービス呼び出しで提供することが可能であり、データがドキュメントに直接埋め込まれている場合よりもキャッシュされる可能性が高いと思いますデータが変更されていない場合でも、ページが更新されるたびに転送されます。
[はい]（HTTPS：// githubの
しかし、誰があなたがあなたの代わりに何をしたいのか
JSON.stringify(initialData)を使用して非常に一般的なXSSの脆弱性を持っていることを指摘しなかった理由私はわからないがにあります.com/reactjs/redux/blob/master/docs/recipes/ServerRendering.md）。あなたのマイクロサービスは実行可能なアプローチですが、余分なHTTPリクエストを作成することと、ページを提供するために行ったHTTPリクエストをピギーバックすることの長所と短所を検討する必要があります。あなたの状態がクライアント側の環境の外で絶えず流動していて、サーバーラウンドトリップが多い場合は、おそらくマイクロサービスが有益でしょう。それではまた、ページをいつもリフレッシュする理由を尋ねたいかもしれません。 – CodingIntrigue