简聊代码用了 React 存在,存在加载缓慢的问题. 一些表单页面也会受到影响
于是开始尝试做服务端渲染,方便在打开时能更快渲染页面
JavaScript 代码以 defer 模式等待页面渲染完成,然后开始加载
脚手架和打包相关的代码我做了整理托管在 Teambition GitHub 上
https://github.com/teambition/isomorphic-webapp-example
另外一些注意点在下边做一些笔记
服务端渲染
- 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 中不存在
- body 周围空白符验证
生成的 HTML 不要有随便的空格或者换行,否则会出现警告
即便是挂载的 React 组件外面有空格,也会出现警告
- stir-template
https://github.com/mvc-works/stir-templatestir 是个小模块,我用来生成 HTML,语法类似 React,但仅仅用于生成字符串
这种写法在 CoffeeScript 当中写起来会比较清晰,对于 JavaScript 用户开发不是很必要
因为个人原因,部分 HTML 代码会使用 CirruScript 书写,避免一些特殊符号,区别一下就好了
Webpack
代码热替换方案比较啰嗦,目前的用法主要参考这篇文章
http://kevinold.com/2015/02/04/configure-webpack-dev-server-and-react-...
具体涉及打包等等,看开头我们仓库当中给出的例子
前后端共用代码
- 特殊代码的
try
前后端共享代码对于有些库来说还是会麻烦,我们遇到的是一些 jQuery 组件没有做好判断
原理上我们应该 fork 代码提供一个两种环境都能运行的版本
实际操作中部分代码我们临时用了 try 语句捕捉 Node 环境当中的错误 目前尝试的项目很小,未来这个问题应该会凸显,需要注意一下
