next.js学习笔记-getServerProps获取数据

学习目标：

getServerSideProps获取数据

---

学习内容：

1.getServerProps获取数据

---

学习总结&理解输出

next.js是一种基于服务端渲染的框架。其中『服务端渲染』指：访问某路由之前，先向服务器请求数据，将请求回来的数据和HTML加工后直接返回前端展示）。

服务端渲染有一个重要概念即静态化。当请求较多的时候，服务器也会有一定的压力。因此当下次访问同一个路由地址的时候，直接返回请求数据和HTML加工之后形成的xxx.html文件（静态页面），这样可以减少服务器的压力，以达到优化的目的。

学习产出：

获取数据的几种方式

这三种方法都是服务器端的方法，只能在pages文件夹下使用。

获取数据方法	静态化	异步	只能在pages文件夹下	作用	服务端请求
getStaticProps	是	是	是	是	请求数据
getStaticPaths	是	是	是	是	生成动态路由
getServerSideProps	否	是	是	是	请求数据

非静态化获取数据方法-getServerSideProps

getServerSideProps(text)方法是异步的，输入context是包含四个key的对象，输出也是一个对象（该返回对象必有一个key为props，并作为该组件的props）

params: 接收getStaticPaths()返回的动态路径，方便请求动态数据
req：httpIncomingMessage对象
res：HTTP响应对象
query查询字符串

import React from 'react'
import fetch from 'node-fetch'
export default(props)=> {
   const {result:{data}} = props;// 这里的props就是从服务端接收的数据
   console.log(data);
   return (
      <div>
         case
      </div>
   )
}

export const getServerSideProps = async() => {
    let res = await fetch('');
    let data = await res.json();
    // 注意该方法是服务端的，要在服务端查看
    // console.log('',data);
    return {
        props: data
    }
}

getStaticPaths()