如何呈現從React Universal中的REST服務接收到的數據？ （Next.js）

Question

我想用fetch()通過在我的陣營通用（含Next.js）應用REST服務調用來接收數據，然後將結果呈現到JSX是這樣的：

class VideoPage extends Component { 
    componentWillMount() { 
    console.log('componentWillMount'); 

    fetch(path, { 
     method: 'get', 
    }) 
     .then(response => 
     response.json().then(data => { 
      this.setState({ 
      video: data, 
      }); 
      console.log('received'); 
     }) 
    ); 
    } 

    render() { 
    console.log('render'); 
    console.log(this.state); 
    if (this.state && this.state.video) { 
     return (
     <div> 
      {this.state.video.title} 
     </div> 
    ); 
    } 
    } 
} 

export default VideoPage; 

不幸的是，輸出是這樣的：

componentWillMount 
render 
null 
received 

這有一定道理，因爲獲取呼叫和異步調用REST服務之前render()結束已完成。

在客戶端應用程序中，這是沒有問題的，因爲狀態更改會調用render()，然後更新視圖，但是在通用應用程序中，特別是在客戶端關閉JavaScript的情況下，這是不可能的。

我該如何解決這個問題？

有沒有辦法同步調用服務器或延遲render()？

Answer 1

爲了得到它的工作，我必須做3兩件事：

• 更換componentWillMount與getInitialProps()方法
• 結合fetch與await並返回數據
• 使用this.props代替this.state

代碼現在看起來是這樣的：

static async getInitialProps({ req }) { 
    const path = 'http://path/to/my/service'; 
    const res = await fetch(path); 
    const json = await res.json(); 
    return { video: json }; 
} 

然後，在render()我可以通過this.props.video訪問數據，例如：

render() { 
    return (
    <div>{this.props.video.title}</div> 
); 
} 

Answer 2

您可以添加static async getInitialProps() {}在頁面組件呈現之前將數據加載到道具中。

此處瞭解詳情：https://github.com/zeit/next.js/blob/master/readme.md#fetching-data-and-component-lifecycle