Как выполнить рендеринг на стороне сервера, используя next.js? - PullRequest
Новая
       54

Как выполнить рендеринг на стороне сервера, используя next.js?

0 голосов
/ 22 октября 2018

Когда я создал простое приложение, я обнаружил, что 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']);
}

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Как показано ниже.Я бы рекомендовал использовать 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>
    )
  }
}
0 голосов
/ 22 октября 2018

Next.js использует getInitialProps, который выполняется на сервере только при начальной загрузке.

С документы

Для начальной загрузки страницы,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;
...