文章目录加载中

SSR与Static generation

获取数据的 API 分为 2 种:静态导出和 SSR。涉及三个 api: getStaticProps()getStaticPaths()getServerSideProps()

# Static generation

运行时机:next 进行 build 的时候执行相关函数。

运行环境:node 环境

需要用到 getStaticProps()getStaticPaths() 这两个接口,执行顺序是:getStaticPaths => getStaticProps。作用如下:

  • getStaticPaths:生成当前路由的信息,在 getStaticProps 方法种可以获取到
  • getStaticProps:生成组件的 props 数据
// pages/posts/[id].jsx
const PostPage = () => { ... }
export default PostPage;
export async function getStaticPaths() {
  const paths = [{ params: { id: "1" } }, { params: { id: "2" } }];

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return {
    paths,
    fallback: false,
  };
}
export async function getStaticProps(props) {
  console.log('props is', props)
  return {
    props: {
      ...props,
      name,
    },
  };
}

以上面代码为例,访问 http://localhost:3000/posts/2?name=123 的时候,会打印: props is { params: { id: '2' } }

问题:getStaticPaths 返回的 fallback 为 true 和 false 的区别?

如果 fallback 为 true,那么在 router 上识别相关属性,进行如下处理:

import { useRouter } from 'next/router'
function Post({ post }) {
  const router = useRouter()
  // If the page is not yet generated, this will be displayed
  // initially until getStaticProps() finishes running
  if (router.isFallback) {
    return <div>Loading...</div>
  }
  // Render post...
}

如果 fallback 为 false,那么返回 404 页面,对应的页面组件名是 _error.js

问题:怎么获取动态数据?

动态数据来源于本机和远程。本机可以是 markdown 文件,远程可以是调用接口。getStaticPaths 和 getStaticProps 都是 node 环境,可以直接使用核心库或者三方 sdk。

注意:引入 node 环境的库时,有两种做法。

  • getStaticPaths 和 getStaticProps 进行 require(...)
  • 直接在全局 import,例如 import fs from 'fs' 。但是一定要在 getStaticPaths 和 getStaticProps 使用被引用的库,否则会出问题。
import fs from "fs";
export async function getStaticProps(props) {
  // 这个地方必须要用,fs才不会报错
  const name = fs.close.toString();
  return {
    props: {
      ...props,
      name,
    },
  };
}

# SSR

运行时机:build 时候不执行,每次新请求执行。

运行环境:node 环境

接口: getServerSideProps()

当使用 SSR 的相关接口,就不能使用 static generation 的相关接口。在 getServerSideProps 中,参数中包含了前端请求接口的路由信息(路由信息由请求方确认,所以不需要 static generation 中还需要 getStaticPaths 来生成)。

# Static generation 和 SSR 的区别

本质在于数据获取的时机,也就是相关接口运行时机。

以 static generation 为例:执行 build 命令,控制台才会输出。

以 ssr 为例:执行 build,无输出;执行 start,用户访问才会有输出。

# 请求工具

推荐使用 axios.js

本文来自心谭博客:xin-tan.com,经常更新web和算法的文章笔记,前往github查看目录归纳:github.com/dongyuanxin/blog