Miracle-reactssr NPM

客户端

使用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传给客户端

isomorphic-fetch react react-dom react-helmet react-redux react-router-dom redux redux-thunk serialize-javascript

@infinitebrahmanuniverse/nolb-mir @everything-registry/sub-chunk-2176 @zalastax/nolb-mir

1.0.0

4 years ago