7、服务器端渲染与前端优化实战

服务器端渲染与前端优化实战

服务器端渲染准备

1. 创建 Redux 存储实例
   • 每次调用后端时创建新的 Redux 存储实例，目的是为应用提供初始状态信息，以便根据当前请求创建有效的标记。
   • 代码示例：

let initMOCKstore = fetchServerSide(); // 目前为模拟数据
const store = createStore(rootReducer, initMOCKstore);

2. 使用 Provider 组件
   • 使用在客户端应用中已使用的 Provider 组件包裹 Root 组件，使存储对所有组件可用。
3. 渲染初始 HTML 标记
   • 使用 ReactDOMServer.renderToString() 渲染应用的初始 HTML 标记，然后再将标记发送到客户端。
4. 获取初始状态
   • 使用 store.getState() 函数从 Redux 存储中获取初始状态，并在 renderFullHtml 函数中