nextjs 怎么发请求获取数据

用next框架开发了一段时间，讲一下next怎么发起请求获取从服务器获取数据

一。页面首次打开请求数据

自己封装的next请求封装库 有兴趣的小伙伴可以看一下

import React from 'react';
import { getTopicsApi } from '../../util/service'; // 自己封装的请求

class Demo extends React.Components {

  // 第二种写法
  static getInitialProps() {
    // ...
  }

  render() {
    const { topicsList } = this.props // 通过props获取
    return (
      <div>demo{topicsList}</div>
    )
  }

}
// 第一种写法
Demo.getInitialProps = async function() {
  const options = {
    page: 1,
    size: 10
  }
  const res = await getTopicsApi(options);
  return {
    topicsList: res
  };
};

export default Demo

这种方法获取数据是在服务端完成，通过打开network查看元素发现，整个页面时包括数据生成的页面结构都是一次性返回的。这样的好处是有利于seo优化，百度爬虫能抓取到页面的内容。 这是估计有小伙伴会问了，我要通过点击一些按钮又要发送请求要怎么发？

二。页面动态请求数据

import React from 'react';
import { getTopicsApi } from '../../util/service'; // 自己封装的请求

class Demo extends React.Components {

  state = {
    list: []
  }

  // 第二种写法
  static getInitialProps() {
    // ...
  }

  componentDidMount() {
    this.setState(old => ({
      list: this.props.topicsList
    }))
  }

  async getList() {
    const options = {
      page: 2,
      size: 10
    }
    const res = await getTopicsApi(options);
    this.setState(old => ({
      list: res
    }))
  }

  render() {
    const { topicsList } = this.props // 通过props获取
    return (
      <div>
        demo{topicsList}
        <button onClick={this.getList.bind(this)}>点我啊</button>  
      </div>
    )
  }

}
// 第一种写法
Demo.getInitialProps = async function() {
  const options = {
    page: 1,
    size: 10
  }
  const res = await getTopicsApi(options);
  return {
    topicsList: res
  };
};

export default Demo

这种方法获取数据是在浏览器完成的，跟用spa单页面应用请求数据的形式是一样，熟悉的感觉又回来了~