（十分钟视频教程）nodejs基础实战教程3：react服务端渲染入门篇

视频截图以下：

 

（具体视频见文末）

前言：

这是小猫的第三篇node教程，本篇内容是由公众号粉丝票选得出的，相信你们对这篇教程是抱有较大但愿的，这篇教程由小猫和一位多年的好朋友合做完成（笔名：谷雨，博客地址：https://segmentfault.com/u/1024dylan），也是ssr的启蒙教程，适合刚刚入门node，而且有必定react开发经验的同窗，但愿能给你们带来一份收获哦。

小猫教程特点，就是每一个知识点都以实战例子讲解，配以视频，长度十分钟左右。让你很快上手，带有成就感的初探技术新领域哦。

（视频审核刚过，昨天的教程姗姗来迟）

本篇将使用的新技术点介绍：

 

react-dom/server模块：

ReactDOMServer 对象使你可以将组件渲染为静态标记。 一般，它在 Node 服务器上使用：

 

renderToString：

将 React 元素渲染到其初始 HTML 中。 该函数应该只在服务器上使用。 React 将返回一个 HTML 字符串。 您可使用此方法在服务器上生成 HTML ，并在初始请求时发送标记，以加快网页加载速度，并容许搜索引擎抓取你的网页以实现 SEO 目的。

 

若是在已经具备此服务器渲染标记的节点上调用 ReactDOM.hydrate() ，React 将保留它，而且只附加事件处理程序，从而使您拥有很是高性能的第一次加载体验

 

renderToStaticMarkup:

似于 renderToString ，除了这不会建立 React 在内部使用的额外DOM属性，如 data-reactroot。 若是你想使用React 做为一个简单的静态页面生成器，这颇有用，由于剥离额外的属性能够节省一些字节。

 

ReactDom.hydrate:

与 render() 相同，但用于混合容器，该容器的HTML内容是由 ReactDOMServer 渲染的。 React 将尝试将事件监听器附加到现有的标记。

 

babel&webpack：

react 和 es6 语法编译识别，这里就不作详细介绍了。具体用到的插件和模块能够看代码。

 

 

思路：

1.搭建node服务，并输出页面html主框架。

 

2.将现有react代码进行服务端渲染的改造;

首先要识别浏览器和服务端环境，运行不一样分支;

render方法改形成hydrate。

 

3.引入babel使node环境支持import和jsx语法，配置webpack生成浏览器中运行的js

 

webpack配置：

 

package.json 配置：

 

 

tips：

1.到了浏览器端渲染的时候可不能够用render？

能够，不推荐。

理由：

react 官方文档中提到：

 

若是使用render，会致使服务端渲染好的dom结构，在浏览器第一次运行render的时候被从新替换，浪费性能。故应该使用为服务端渲染而提出的hydrate方法（react 16版本提出）。

该方法能够只将事件监听器附加到现有的标记，而不进行dom的从新替换等。

 

2.服务端渲染的好处：

seo和首屏优化，且在使用hydrate方法的时候，减小了react初始化的渲染时间等。

 

3.服务端渲染一个重要的注意事项：

window和document 在服务端时是不存在的，相关操做都要移动到compentDidMount中进行。

 

视频：

 https://v.qq.com/x/page/i0652gap4pe.html

 

后记：

好了，今天的内容到这里啦，怎么样你有收获么？期待关注后续内容哦，若是感受有收获记得分享给身边的同窗哦～

最后仍是下一篇文章的内容投票～小猫决定专一于node教程了，跟着小猫从0基础成长为全栈工程师吧，小猫坚信坚持专一就是胜利～

(ps:下周小猫会去北京参加wot，可能没空出教程了，不要取消关注哦，下下周会出下一篇的～)