React 服务端渲染初步尝试

时间 2019-12-05

标签 react 服务渲染初步尝试栏目 React 繁體版

原文原文链接

查找 React 中文文档请往 https://doc.react-china.org/

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

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

服务端渲染

checksum 问题

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

script defer 执行

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

上线以后 CSS 加载问题

实际使用虽然 Webpack 可以打包 CSS, 可是页面加载时的效果不能缺乏 CSS
因此 CSS 实际上仍是应该跟着 HTML 的 <header> 一块儿加载的
这个实际上会影响打包的复杂度, 在个人例子当中, 因此使用了一个 CSS 文件github

初始化数据

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

JSX

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

script 标签关闭方式

JSX 语法相似 XML, 标签都是须要关闭的浏览器

body 周围空白符验证

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

stir-template

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

Webpack

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

先后端共用代码

特殊代码的 try

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