Question

当我创建一个简单的应用程序时，我发现next.js将自动执行服务器端渲染。

但是当我尝试从后端获取数据时，我发现服务器端无法获取数据。

如何从服务器端获取数据？这样我就可以进行服务器端渲染了吗？

components / test.js

import React, { Component } from 'react';
class Test extends Component {
    constructor(){
        super();
        this.state={
            'test':''
        }
    }

    setTest(){

        axios.get(serverName+'/api/articles/GET/test').then(response=>{

            let test;
            test = response.data.test;
            this.setState({test});

        }).catch(function (error) {
            console.log(error);
        });
    }
    }

    render() {
        return (
            <div>
                {this.state.test}
            </div>
        );
    }
}
export default Test;

后端就像下面这样：

function getTest(Request $request){
    return response()->json(['test'=>'this is a test']);
}

Answer 1

Next.js使用getInitialProps，仅在初始加载时在服务器上执行。

来自docs

对于初始页面加载，getInitialProps将在服务器上执行只要。 getInitialProps仅在以下情况下在客户端执行通过Link组件或使用导航到其他路线路由API。

React组件上的所有其他生命周期方法/动作（componentDidMount，onClick，onChange等）均在客户端执行。

示例代码

class Test extends Component {
  static async getInitialProps() {
    const response = await axios.get(serverName + '/api/articles/GET/test');

    return { test: response.data.test }
  }

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

export default Test;

Answer 2

像下面一样。我建议使用getInitialProps。这是next.js推荐的在服务器上获取数据的方法。

import React from 'react'

export default class extends React.Component {
  static async getInitialProps({ req }) {
  
  axios.get(serverName+'/api/articles/GET/test').then(response=>{
            let test;
            test = response.data.test;
            return { test }
        }).catch(function (error) {
             return { response }
        });  
  }

  render() {
    return (
      <div>
        Hello World {this.props.test.name}
      </div>
    )
  }
}

如何使用next.js进行服务器端渲染？

2 个答案: