CSR(Client Side Rendering) & SSR

CSR

SSR

同构

采用一套代码，构建双端（server 和 client）逻辑，最大限度的重用代码，不用维护两套代码。

路由同构

• 服务端：根据请求路径，匹配页面组件 ->> StaticRouter
• 客户端：通过浏览器中的地址，匹配页面组件 ->> BrowserRouter

// 服务端
const App = () => {
    return 
      <Provider store={store}>
        <StaticRouter location={req.path} context={context}>
          <div>
            <Route path='/' component={Home}>
          </div>
        </StaticRouter>
      </Provider>
  }
  Return ReactDom.renderToString(<App/>)

// 客户端
  const App = () => {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <div>
            <Route path='/' component={Home}>
            <Route path='/product' component={Product}>
          </div>
        </BrowserRouter>
      </Provider>
    )
  }
  ReactDom.render(<App/>, document.querySelector('#root'))

注水（hydrate）、脱水（dehydrate）

数据注水

在服务端将预取的数据注入到浏览器，使得浏览器可以访问到

数据脱水

获取注入到浏览器的数据，将其传入组件

参考资料

1. 从 0 实现 React SSR
2. 一文吃透 React SSR 服务端渲染和同构原理
3. 同构渲染架构：实现一个 SSR 应用
4. React SSR 详解【近 1W 字】+ 2个项目实战
5. React 同构技术学习笔记 #1 1