【化蛹为蝶六】Nextjs 数据获取方式 getInitialProps 简介

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战 ​

上篇 我们唠了唠我在 Koa Server 里的 initConfig 都做了什么 ​

今天补个 Nextjs 实践的小坑：Nextjs getInitialProps ​

以下正文 ​

Nextjs getInitialProps 介绍

getInitialProps 是挂在 React 组件上的静态方法 ​

我们可以在这个方法内部完成页面数据获取的工作 ​

使用示例如下图： ​

那我们难道不可以在 React 组件内部 ComponentDidMount 去获取页面数据吗？ ​

当然可以，不过既然 Nextjs 提供了这个为数据获取提供的方法，那自然有它的道理 ​

毕竟 Nextjs 身为 同构框架，事情并没有表面上看到的这么简单 ​

我们如果需要 Nextjs 的 SSR 大部分功能的话，还是尽可能地按照 Nextjs 提供的数据获取规范走 ​

getInitialProps 只会在组件身为页面 pages 目录下的一员时生效

getInitialProps 执行时机

​

值得注意的是，getInitialProps 会在服务端渲染时执行，也会在客户端渲染时执行 ​

这也是事情不简单的原因所在 ​

服务端执行

当页面通过页面刷新等直接形式访问时，会触发 Nextjs 使用服务端渲染的方式返回页面数据 ​

此时 getInitialProps 会在服务端执行，浏览器端不会执行 ​

如图所示，通过服务端渲染访问 Home 时，在终端会输出 console.log： ​

客户端执行

当页面通过浏览器端路由跳转的形式访问时（如浏览器前进后退），该页面渲染不会触发 Nextjs 服务端渲染 ​

此时页面渲染前仍会触发 getInitialProps 方法，只不过执行时在浏览器端，如图所示： ​

所以实际上 getInitialProps 方法会根据当前页面渲染时的端侧不同，自主地选择在 Node 端还是 Client 端执行 ​

getInitialProps 一些需要了解的点

• 数据获取通常为异步操作，getInitialProps 方法使用 async 异步执行即可
• getInitialProps 异步获取数据，页面会等到页面数据都获取加载完成后才进行渲染
• 因为是双端执行，所以需要尤为小心地使用仅一端存在的 API，如：document、window 等
• 因为是双端执行，数据获取需要某些时候考虑如何取用户状态如服务端侧可以使用 ctx.req/ctx.res
• 因为是双端执行，在 getInitialProps 方法里进行页面跳转也需要根据端侧不同使用跳转方式也不同

​

不清楚是不是自己还没 Get 到它的 G 点的缘故，getInitialProps 就目前自己使用的情况来看，它并不讨我喜欢 ​

在想是不是还是使用旧有的 getStaticProps 和 getServerProps，最起码很清晰所属哪一端，能够使用什么 API

​

后续预告：

• 一些小问题：目录结构（已填）、引入 Koa（已填）、Yaml 解析（已填）、日志记录与存储、@根路径 Import、引入 Less、引入 Reset CSS
• Nextjs 系列序言及项目初始化（已填）
• Nextjs 引入 TypeScript、Ant Design（已填）
• Nextjs 数据获取方式 getInitialProps 简介（本篇）
• Nextjs 引入 Prisma 和 Mysql2 存取数据（长文）
• Nextjs 引入 Apollo-Server/Apollo-Client 使用 Graphql（长文）
• Nextjs + Prisma + Graphql Demo 实践（长文）
• Nextjs 如何使用 Session 和 Cookie
• Nextjs 基于 Graphql、Prisma 的 JWT 登录鉴权（长文）
• Nextjs 鉴权后自动跳转登录页
• Graphql 请求如何带上公共 Headers
• Koa Auth 接口预处理之接口鉴权中间件
• 基于 RBAC 模型使用 Graphql + Prisma 实现权限管理（长文）

​

vx👦：mmm7nnn

公号🐓：醒途

邮箱📧：suanzao@wacai.com（欢迎找我内推）

如果喜欢这个系列请给我一个点赞👍或者一个关注➕，诸君的支持是我创作的最大的动力 ​