苏秦陶侃博客

react项目实现的ssr

字数统计: 296阅读时长: 1 min
2018/12/22 Share

react项目实现的ssr

名词解释

  1. 同构：开发一套多个平台都可以跑的代码，例如同时可以在client和node端跑。https://juejin.im/entry/5b1631085188257d492adc9e
  2. ssr(server-side rendering)：服务端渲染

关键API

react提供了四个方法将虚拟dom转为html文本：

服务器端客户端皆可用：

  1. ReactDOMServer.renderToString(element)
  2. ReactDOMServer.renderToStaticMarkup(element)

服务器端可用：

  1. ReactDOMServer.renderToNodeStream(element)
  2. ReactDOMServer.renderToStaticNodeStream(element)

hydrate：

react16提供的新的API专门为服务端渲染做首屏优化。

一个节点上有服务器渲染标记，那么react会保留此dom结构，只是往dom上去绑定事件处理程序，从而达到一个最佳的首屏渲染表现，在客户端用hydrate代替render方法。

让服务端支持JSX

引入babel-register.

服务端和客户端的执行区别

生命周期不同

服务端只能走到componentWillMount(),todo:componentWillMount周期内能干什么？

node环境中没有浏览器特有的全局对象和方法

这里就可以用到componentWillMount周期了，在这个周期就可以访问到浏览器特有的属性和方法了。

项目开发：

命令行工具生成API

参考文献

https://juejin.im/entry/5abb51985188255569190a63

原文作者：zhanghy7

原文链接：http://zhanghy7.github.io/2018/12/22/react项目实现的ssr/

发表日期：December 22nd 2018, 9:30:00 pm

更新日期：December 24th 2018, 12:27:37 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. react项目实现的ssr
    1. 1.1. 名词解释
    2. 1.2. 关键API
      1. 1.2.1. 让服务端支持JSX
    3. 1.3. 服务端和客户端的执行区别
      1. 1.3.1. 生命周期不同
      2. 1.3.2. node环境中没有浏览器特有的全局对象和方法
    4. 1.4. 项目开发：
Total : 43
2019
2018
问题 http js mysql tools English 计算机基础 git 问题及解决
shell css javaScript javaScript/es6 hybrid js vue tools react css基础 react/ssr 宏观架构