在通用反应应用程序中渲染之前从数据库中获取数据答案

【问题标题】：Fetching data from DB before render in universal react application在通用反应应用程序中渲染之前从数据库中获取数据
【发布时间】：2017-07-02 08:25:04
【问题描述】：

我真的不明白我们如何在通用（同构）服务器端渲染反应应用程序中从数据库中获取数据。我们不能在 componentWillMount() 等中做到这一点......因为它是 javascript，在客户端工作！与数据库没有任何连接。不然怎么办？

我需要使用数据库中的数据渲染 html。服务器应返回带有数据的 HTML。对 Promise 起作用的操作，这就是它们在渲染前不返回数据的原因。

使用 ajax 请求响应获取数据。但是我们是否需要发送多个 ajax 请求来渲染一个页面？...

嗯，这很令人困惑。

【问题讨论】：

请不要减分，解释一下
是的，您使用 Ajax 请求 (XHR)，但人们倾向于使用 Fetch API 或 Axios，因为它们有承诺。您为填充组件而获取的初始数据必须在 ComponentDidMount() 中进行初始化。其他的，例如，如果您单击某些东西并且想要获取一些数据，这应该作为生命周期中的一个单独方法来完成。如果你指定你正在使用的堆栈（例如你使用什么数据库？）我可以给你一个代码示例
另外，您不会发送多个 Ajax 请求来呈现页面。你（1）渲染页面（2）获取数据

标签： reactjs server-side-rendering

【解决方案1】：

您可以在隐藏的 html 组件中以及网站在服务器端加载时呈现来自服务器的数据。在视图中显示。喜欢

<div id="load-first" style="display:none">{{your_data}}</div>

现在，当页面加载时，然后在视图中呈现内部 html 的 json 数据或其他内容，例如

import React, {Component} from 'react';

class MyComponent extends Component{
    constructor(props){
       super(props);
       this.state={myData: {}}
    }

    componentDidMount(){
       let data = document.getElementById("load-first").innerHTML;
       // if json
       data = JSON.parse(data);
       this.setState({myData: data});
    }

    render(){
       return (
           <div>{this.state.myData}</div>
       );
    }
}

【讨论】：

你不懂。我需要从 HTTP 响应正文中的数据库数据呈现的服务器返回。理解？像 componentDidMount 或 componentWillMount 这样愚蠢的东西是行不通的！因为是JS。客户端的 JS 无法在 HTTP 响应正文中从数据库返回数据。
在 PHP 中有一个名为 header() 的函数，您可以在其中传递键值对。您是否尝试使用它将内容添加到 HTTP 响应标头。另外，我遇到了一个stackoverflow问题link你检查了吗。
你又不懂了。我不需要任何标题等。我需要从服务器获取 html 中的新闻。在客户端没有任何动作调度。