簡體   English   中英

使用后端請求來反應服務器端呈現

[英]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()方法進行服務器端呈現: httpsReactDOMServer.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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM