React 服务端渲染初步尝试

发布时间:2019-06-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React 服务端渲染初步尝试脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
查找 React 中文文档请往 https://doc.react-china.org/

简聊代码用了 React 存在, 存在加载缓慢的问题. 一些表单页面也会受到影响
于是开始尝试做服务端渲染, 方便在打开时能更快渲染页面
JavaScript 代码以 defer 模式等待页面渲染完成, 然后开始加载

脚手架和打包相关的代码我做了整理托管在 TeambITion GitHub
https://github.com/teambition...
另外一些注意点在下边做一些笔记

服务端渲染

  • checksum 问题

React 在服务端渲染之后, 会在根节点生成一个 checksum 用于校验
同时 React 在浏览器端也会进行一次判断, 看 HTML 内容和客户端渲染是否一致
一般都用 React 不会出问题, 但是比如空白符, 或者内容不一致, 就会给出提示

  • script defer 执行

为了 JavaScript 延迟加载, 可以用 defer 属性指明, 或者直接把标签放在 <body> 后边
因为我们渲染的 HTML 是直接把 <body> 替换的, 所以用 defer 完成了功能

  • 上线之后 CSS 加载问题

实际使用虽然 Webpack 能够打包 CSS, 但是页面加载时的效果不能缺少 CSS
所以 CSS 实际上还是应该跟着 HTML<header> 一起加载的
这个实际上会影响打包的复杂度, 在我的例子当中, 所以使用了一个 CSS 文件

  • 初始化数据

JavaScript 的初始化数据使用 HTML 形式的 <script> 方式写入变量, 客户端运行过程读取

JSX

初始 HTML 内容, 也就是 <body> 外面的部分, 不属于 React component
但也可以用 React 的方式写, 不过要注意 <!DOCTYPE HTML> 在 React 中不存在

  • script 标签关闭方式

JSX 语法类似 XML, 标签都是需要关闭的

  • body 周围空白符验证

生成的 HTML 不要有随便的空格或者换行, 否则会出现警告
即便是挂载的 React 组件外面有空格, 也会出现警告

  • stir-template

https://github.com/mvc-works/...
stir 是个小模块, 我用来生成 HTML, 语法类似 React, 但仅仅用于生成字符串
这种写法在 CoffeeScript 当中写起来会比较清晰, 对于 JavaScript 用户开发不是很必要
因为个人原因, 部分 HTML 代码会使用 CirruScript 书写, 避免一些特殊符号, 区别一下就好了

Webpack

代码热替换方案比较啰嗦, 目前的用法主要参考这篇文章
http://kevinold.com/2015/02/0...
具体涉及打包等等, 看开头我们仓库当中给出的例子

后端共用代码

  • 特殊代码的 try

前后端共享代码对于有些库来说还是会麻烦, 我们遇到的是一些 jQuery 组件没有做好判断
原理上我们应该 fork 代码提供一个两种环境都能运行的版本
实际操作中部分代码我们临时用了 try 语句捕捉 Node 环境当中的错误
目前尝试的项目很小, 未来这个问题应该会凸显, 需要注意一下

脚本宝典总结

以上是脚本宝典为你收集整理的React 服务端渲染初步尝试全部内容,希望文章能够帮你解决React 服务端渲染初步尝试所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。