如何实现一个SSR应用？

[shawlp]

CSR与SSR实现对比：

• 环境区分

  1. 路由代码差别：服务端需要根据请求路径，匹配页面组件（使用 StaticRouter 组件，并将请求地址和上下文信息作为 location 和 context 这两个props 传入 StaticRouter 中）；客户端需要通过浏览器中的地址，匹配页面组件（BrowserRouter 组件根据 window.location 以及 history API 实现页面切换）
  2. 打包差别：服务端运行的代码如果需要依赖 Node 核心模块或者第三方模块，就不再需要把这些模块代码打包到最终代码中了

• 注水和脱水 一般做法是在服务器端返回 HTML 字符串的时候，将数据 JSON.stringify 一并返回，这个过程，叫作脱水（dehydrate）；在客户端，就不再需要进行数据的请求了，可以直接使用服务端下发下来的数据，这个过程叫注水（hydrate）

• 安全问题 注水和脱水过程非常容易遭受 XSS 攻击，JSON.stringify 可能会造成 script 注入。因此，我们需要严格清洗 JSON 字符串中的 HTML 标签和其他危险的字符。可以使用 serialize-javascript 库进行处理

• 请求认证处理 服务端请求时需要保留客户端页面请求的信息（一般是 cookie），并在 API 请求时携带并透传这个信息（cookie）

• 样式问题处理 CSR使用style-loader插入样式到html header中 但是在服务端环境，没有window对象，style-loader会报错，需要使用 isomorphic-style-loader