活版印字

Speed up Server Side Rendering 重點整理

Posted at 2016-03-18 Server Side Rendering 

Reactjs - Speed up Server Side Rendering - Sasha Aickin

為什麼提升 Server Side Rendering 速度，這麼困難? (3:00)

• renderToString 有單執行緒、同步、CPU 的限制
• server side 和 client side code 混在一起
• Facebook 並沒有在 production 做 Server Side Rendering，所以不是核心項目發展緩慢。

技巧一：production mode (5:30)

1

NODE_ENV=production

原因

dev mode 有開啟 error checking，使得速度變慢(幾乎三倍)。

缺點

無

技巧二：使用 React mini版本 (6:55)

從

1

import ReactDOMSerer from "react-dom/server"

改為

1

import ReactDOMSerer from "react/dist/react.min"

原因 (8:15)

減少 NODE_ENV 檢查步驟

缺點

很難 debug

技巧三：babel Transforms (9:05)

添加兩個 babel runtime plugin

• transforms-react-constant-elements
• transform-react-inline-elements

原因

減少執行期的計算

缺點

必須增加 babel build 的步驟

技巧四：不使用 createClass (12:30)

stateless components

if the components that we defined didn’t have any internal state, then we could just skip extending the base Component class (this is changed in 0.14). Instead, we were able to represent our components as plain classes.

demo 把 ES5 換成 ES6 寫法 (12:40)

原因

也許跟 auto binding 有關，但不確定。

缺點

需要把 ES5 轉換成 ES6 增加工作量，與不知道為什麼有人特別恨 ES6

技巧五：Streaming

使用講者開發的框架，不產html，直接換成串流下載。

Chunked Encoding HTTP 1.1

從

1
2
3

import ReactDOMSerer from "react-dom/server";

res.send(ReactDOMSerer.renderToString('<Root/>'));

改為

1
2
3
4

import ReactDOMSerer from "react-dom-stream/server";

ReactDOMSerer.renderToString('<Root/>').pipe(res);

缺點

還在 beta，需要小心 CDN 跟 Proxy 方面

技巧六：針對 component 做 cache (22:35)

使用講者開發的框架

Demo Cache Components (25:17)

1
2

const cache = new LRURenderCache();
ReactDOMSerer.renderToString('<Root/>', {cache: cache}).pipe(res);

增加

1
2
3

componentCacheKey() {
  return JSON.st....
}

缺點：(27:30)

如果你的 cache key 有誤，可能會把資料傳送給錯的人。

總結 (28:30)

你應該開始使用哪些技巧
技巧一：Yes
技巧二：Yes
技巧三：Yes
技巧四：Maybe
技巧五：Maybe
技巧六：Not yet

Vocabulary
downside: 缺點
suspect: 懷疑
tricks
recap
coarse
culprit