[英]React server side rendering with backend requests
我有一個React應用程序,通過Express進行服務器端渲染。 我有簡單的App組件:
import React, { Component } from 'react';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
data: []
};
fetch('http://backend', {
mode: 'cors',
})
.then(res => res.json())
.then(data => this.state.data);
}
render() {
return (
<ul>
{this.state.data.map(item => (
<li key={item}>{item}</li>
))}
</ul>
);
}
};
問題(或更可能的功能)是fetch工作異步。 因此瀏覽器獲取包含空數據的頁面。
有沒有辦法從加載數據的服務器頁面獲取? 假設我想從帶有加載帖子或其他內容的服務器頁面獲取。
或者我有什么不對勁?
您沒有正確設置state
。 使用setState()
設置新狀態,因為如果不使用setState()
方法就無法更新狀態: https : //facebook.github.io/react/docs/react-component.html#setstate
fetch('http://backend', {
mode: 'cors',
})
.then(res => res.json())
.then(data => this.setState({data: data}));
此外,您添加的代碼不是使用React的服務器端呈現。 您使用ReactDOMServer.renderToString()
方法進行服務器端呈現: https : ReactDOMServer.renderToString()
是的,即使你修復了setState()問題,你仍然會在獲取之前渲染組件。 問題確實是fetch是異步的。
為了能夠進行服務器端渲染后端調用,您需要等待所有后端調用,為所有組件設置props和state,然后將其渲染出去。
兩個可以幫助您搞清楚事情何時完成的庫是Redial( https://github.com/markdalgleish/redial )和redux-promise-counter( https://github.com/bitgenics/redux-promise-counter )如果您使用的是Redux。 更多關於以下內容。
您要解決的下一個問題是將數據傳輸到客戶端並從中初始化組件,因此您不必再次在客戶端上重做(全部)請求。
你可以手動完成所有這些工作,但如果你認真對待SSR,你應該選擇像Redux這樣的東西。 一種將所有應用程序狀態存儲在一個商店中的方法。 使結果更容易存儲,將結果發送到客戶端並從JSON初始化商店。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.