react.js - 服務器端呈現和路由策略

Question

我目前正在使用服務器端渲染啟動我的第一個React應用程序。 問題是我想選擇最堅實的策略。

我目前正在嘗試做什么：

使用Swig作為Express應用程序的模板引擎，並插入字符串化的React組件，如模板變量：

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <div id="react-mount">{{reactHTML|safe}}</div> <script src="/build/bundle.js"></script> </body> </html>

這是在服務器端和客戶端將props傳遞給組件的問題：

服務器

var Box = require('./src/components/Box.jsx');
function renderify (component, props) {
   var reactHTML = React.renderToString(React.createElement(component, props));
   return {reactHTML: reactHTML};
}

app.get('/', function (req, res) {
   res.render('layout', renderify(Box, {name: 'My Box'}));
});

這在服務器上呈現完美，但客戶端不知道我有name道具..

客戶

var React = require('react');
var Box = require('./components/Box.jsx');

React.render(<Box />, document.getElementById('react-mount'));

這讓我向React發出警告，並在沒有name情況下重新呈現頁面。

這里的另一個問題是路由..我認為最好在請求某個路由時在服務器上呈現應用程序，但是當用戶通過應用程序時我更願意在客戶端位置更改。

這是否意味着路由應該在客戶端和服務器上重復？

那么根據您的經驗在服務器上呈現React組件的最佳策略是什么？

Answer 1

要將服務器呈現的組件正確地“升級”為客戶端管理的組件（例如，沒有警告），您需要在服務器上呈現相同的組件，並將其傳遞給相同的道具。 如果道具可以是動態的，那么你還需要從服務器到客戶端獲取道具，例如通過將它們序列化為JSON，然后在組件安裝之前在客戶端上讀取它們。

一個好的React路由解決方案（ react-router是一個很好的選擇）將允許您根據URL和查詢參數以聲明方式設置路由，這使您不必自己管理和序列化這些數據。 這是 react-router文檔的一個簡單示例。

react.js - 服務器端呈現和路由策略

問題描述

那么根據您的經驗在服務器上呈現React組件的最佳策略是什么？

1 個解決方案

解決方案1
1 2015-01-12 18:55:48

react.js - 服務器端呈現和路由策略

問題描述

那么根據您的經驗在服務器上呈現React組件的最佳策略是什么？

1 個解決方案

解決方案1 1 2015-01-12 18:55:48

解決方案1
1 2015-01-12 18:55:48