react服務(wù)端渲染原理圖解.png
注解
服務(wù)端字符串化react應(yīng)用
const html = ReactDOMServer.renderToString(
<Provider store={store}>
<StaticRouter location={ctx.url} context={{}}>
<App />
</StaticRouter>
</Provider>
);
向html中注入store的方式
var htmlTemplate = `
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"> ${content}</div>
<script>window.__INITIAL_STATE__ =${JSON.stringify(initState)}</script>
<script type="text/javascript" src="/static/js/main.js"></script>
</body>
</html>
`
客戶端創(chuàng)建store時，用
window.__INITIAL_STATE__初始化store即可
