miracle-reactssr
v1.0.0
Published
使用hydrate渲染客户端 用于事件绑定 ```js const store = createStore( (window as any).REDUX_DATA );
Downloads
3
Readme
客户端
使用hydrate渲染客户端 用于事件绑定
const store = createStore( (window as any).REDUX_DATA );
const jsx = (
<Provider store={store}>
<BrowserRouter>
<Layout/>
</BrowserRouter>
</Provider>
)
const app = document.getElementById( "app" );
ReactDOM.hydrate( jsx, app );服务端
服务端数据拿到后在
function htmlTemplate(reactDom, reduxState, helmetData) {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
${ helmetData.title.toString()}
${ helmetData.meta.toString()}
<title>React SSR</title>
<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
<div id="app">${ reactDom}</div>
<script>
window.REDUX_DATA = ${ serialize(reduxState, { isJSON: true })}
</script>
<script src="./app.bundle.js"></script>
</body>
</html>
`;
}把state通过window.REDUX_DATA传给客户端