React React應用程式流式服務端渲染

## 好處

react16推出了流式服務端渲染，它允許你並行地分發html片段。這樣可以讓渲染

出的首位元組有意義的內容給使用者速度更快。

（例子1，上面部分是一次性轉換，下面是流渲染，兩種方式）

而且相對rendertostring，流是非同步的。這個可以讓你的node.js服務一次性渲染多個請求，並且保持在高請求壓力環境下的及時響應。在乙個持續的時間內，如果網路阻塞了，它可以停止react的渲染，並且不會因為重的網路請求影響其他輕請求。

import  from 'react-dom/server';
import frontend from '../client';
// 一開始傳送有意義的頁面部分
response.write('');
// 把元件渲染成流，並且給response
const stream = rendertonodestream();
stream.pipe(response, );
// 當react渲染結束後，傳送剩餘的html部分給瀏覽器
stream.on('end', () => );
});

（以上是例子2）

rendertonodestream返回了乙個可讀流，可以比作水龍頭：它有源源不斷的水，只是被堵住了，等待別人把它擰開。如果用這個可讀流（如果把水龍頭開啟），只需要監聽「data」時間就可以了（如果有新資料到了會自動觸發）

**類似這樣：

import  from 'react-dom/server';
const stream = rendertonodestream();
stream.on
('data', (data) => );

但是我們看例子2並沒有監聽」data「事件，而是直接把流pipe給了response物件。其實啊，

response物件在node.js中是乙個可寫流，可以比做下水道。可讀流通過pipe給可寫流時，

可讀流的資料會被分塊發給可寫流（就像是水龍頭直接和下水道連線了一樣，水源源不斷流通）。

可寫流可以對資料（水）進行任意的處理。

在我們的例子中，我們把元件渲染出來的流(html片段)給了response，response會把片段發給請求的客戶端（比如瀏覽器）。

（可以看到first byte明顯前移動了，說明流渲染更快；因為並行的原因，片段渲染也更快了）

const originalsend = response.send;
response.send = (html, ...other) =>

採用express的中介軟體，提供快取檔案服務：

if (cache.has(request.path)) else })

接下來的問題是：如何渲染html，當你直接把htm的可寫流pipe給了response流。因為response.send不會再被呼叫了，你也無法訪問整個html文件。

transform streams是什麼？它就像是乙個水龍頭的過濾器。可讀流經過它轉換後才會給可寫流。

在我們這裡，我們只是想要快取html並不會轉化資料，具體怎麼做，看**：

import  from 'stream';
const createcachestream = (key) => ,
// 當所有的事件都做完後會呼叫flush()
flush(cb) 
});}

然後我們可以在我們的服務端渲染**中使用它：

// 通過過濾器（transform streams）建立了快取

let cachestream = createcachestream(request.path);

// cachesstream接上response

cachestream.pipe(response);

//先把首部分寫到cachestream

cachestream.write('');

// 建立了渲染流

const renderstream = rendertonodestream();

// 渲染流接上cachestream

renderstream.pipe(cachestream, );

renderstream.on('end', () => );

})以上就是主要內容

React React應用程式流式服務端渲染

ios應用程式和應用程式委託

使用工作流開發應用程式

工作流和宿主應用程式交流

React React應用程式流式服務端渲染

ios應用程式和應用程式委託

使用工作流開發應用程式

工作流和宿主應用程式交流

相關推薦