Redux 实现服务端渲染

什么是服务端渲染

• 服务端渲染（SSR）：当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的内容，我们在 html 源文件里也能找到。

• 客户端渲染：客户端渲染模式下，服务端把渲染的静态文件给到客户端，客户端拿到服务端发送过来的文件自己跑一遍js，根据JS运行结果，生成相应DOM，然后渲染给用户。

SSR的利弊

• 好处:首屏渲染快、利于SEO、可以生成缓存片段，生成静态化文件、节能（对比客户端渲染的耗电）

• 坏处:用户体验较差、不容易维护，通常前端改了部分html或者css，后端也需要修改。

事实上，很多网站是出于效益的考虑才启用服务端渲染，性能倒是在其次。
假设 A 网站页面中有一个关键字叫“前端性能优化”，这个关键字是 JS 代码跑过一遍后添加到 HTML 页面中的。那么客户端渲染模式下，我们在搜索引擎搜索这个关键字，是找不到 A 网站的——搜索引擎只会查找现成的内容，不会帮你跑 JS 代码。A 网站的运营方见此情形，感到很头大：搜索引擎搜不出来，用户找不到我们，谁还会用我的网站呢？为了把“现成的内容”拿给搜索引擎看，A 网站不得不启用服务端渲染。
但性能在其次，不代表性能不重要。服务端渲染解决了一个非常关键的性能问题——首屏加载速度过慢。在客户端渲染模式下，我们除了加载 HTML，还要等渲染所需的这部分 JS 加载完，之后还得把这部分 JS 在浏览器上再跑一遍。这一切都是发生在用户点击了我们的链接之后的事情，在这个过程结束之前，用户始终见不到我们网页的庐山真面目，也就是说用户一直在等！相比之下，服务端渲染模式下，服务器给到客户端的已经是一个直接可以拿来呈现给用户的网页，中间环节早在服务端就帮我们做掉了，用户岂不“美滋滋”？

服务端使用 Redux

当在服务器使用 Redux 渲染时，一定要在响应中包含应用的 state，这样客户端可以把它作为初始 state。这点至关重要，因为如果在生成 HTML 前预加载了数据，我们希望客户端也能访问这些数据。否则，客户端生成的 HTML 与服务器端返回的 HTML 就会不匹配，客户端还需要重新加载数据。
把数据发送到客户端，需要以下步骤：

• 为每次请求创建全新的 Redux store 实例；
• 按需 dispatch 一些 action；
• 从 store 中取出 state；
• 把 state 一同返回给客户端。

在客户端，使用服务器返回的 state 创建并初始化一个全新的 Redux store。
Redux 在服务端惟一要做的事情就是，提供应用所需的初始 state。

具体步骤

在服务端：

1. 创建新的Redux store实例

    const store = createStore(counterApp);
   

2. 使用renderToSring()将组件渲染成字符串

   	 const html = renderToString(
   	    <Provider store={store}>
   	      <App />
   	    </Provider>
   	  )	
   

3. 从store中获得初始state

   const preloadedState = store.getState();
   

4. 把渲染后的页面内容发送给客户端

    send(renderFullPage(html, preloadedState));
   

   

   服务端最后一步就是把初始组件的 HTML 和初始 state 注入到客户端能够渲染的模板中。如何传递 state 呢，我们添加一个 <script> 标签来把 preloadedState 赋给 window.__INITIAL_STATE__。

   客户端可以通过 window.__INITIAL_STATE__ 获取 preloadedState。

   同时使用 script 标签来引入打包后的 js bundle 文件。这是打包工具输出的客户端入口文件，以静态文件或者 URL 的方式实现服务端开发中的热加载。下面是代码。

在客户端：

1. 通过服务端注入的全局变量得到初始 state

   	const preloadedState = window.__INITIAL_STATE__
   

2. 使用初始 state 创建 Redux store

   const store = createStore(counterApp, preloadedState)
   

3. 渲染首屏

完整示例：https://www.redux.org.cn/docs/recipes/ServerRendering.html

参考

https://juejin.im/post/5c068fd8f265da61524d2abc
https://www.redux.org.cn/docs/recipes/ServerRendering.html