How to do server side render using next.js?

Question

When I create a simple app, I found that next.js will automatically do the server side render.

But when I tried to fetch the data from backend, I found that server side won't get the data.

How to fetch the data from server side? So that I can do the server side render?

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;

backend is just like following:

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

iurii · Accepted Answer · 2018-10-22 10:04:10Z

1

Next.js uses getInitialProps that is executed on the server on initial load only.

From docs

For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs.

All other lifecycle methods/actions on React components (componentDidMount, onClick, onChange etc) are executed on the client side.

Example code

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;

edited Oct 22, 2018 at 10:04

answered Oct 22, 2018 at 8:21

iurii

4,2062 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jimmy Over a year ago

Ok, I'm checking the document right now. Thanks for your advice.

iurii Over a year ago

i've updated the answer with the code. Hope this helps

Mustkeem K · Accepted Answer · 2018-10-22 08:32:02Z

0

Like below. I would recomend to use getInitialProps. This is recommended approach by next.js to get data at server.

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>
    )
  }
}

answered Oct 22, 2018 at 8:32

Mustkeem K

8,9002 gold badges34 silver badges45 bronze badges

1 Comment

jimmy Over a year ago

Hello, I tried to run the code but failed. I add console.log('test: ',test); inside axios function and found that response can be receive at getInitialProps. But {this.props.test} can't get anything. Am I do something wrong?

Collectives™ on Stack Overflow

How to do server side render using next.js?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related