❤
npm
Sign UpSign In

miracle-reactssr

1.0.0 • Public • Published

客户端

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

Readme

Keywords

none

Package Sidebar

Install

npm i miracle-reactssr

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

1.31 MB

Total Files

22

Last publish

Collaborators

  • miracle_sumail
Try on RunKit
Report malware