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