一起学习Next.js吧（下）

接上篇：一起学习Next.js吧（上）

启用TypeScript

创建tsconfig.json

• 首先确保你已全局安装了TypeScript，若没有，先运行yarn add global typeScript；
• 运行tsc --init后得到tsconfig.json；
• 把jsconfig.json里的配置合并到tsconfig.json；
• 删除jsconfig.json；
• tsconfig.json中添加"noImplicitAny": true，意为禁止隐式的any；
• 在项目中安装typescript ，yarn add --dev typescript @types/node

改后缀

• 把文件名有.js改成.tsx；

为什么识别不了jsx呢

• tsconfig.json中添加"jsx": "react",；

使用Next.js API

• 我们实际开发中要请求/user、/index这些接口，然后返回JSON格式的字符串；
• 创建pages/api/v1/posts.tsx（v1代表第一版，这是一个习惯问题）；
• 默认导出的函数类型为NextApiHandler；
• 该代码只运行在Node.js里，不运行在浏览器里；

读取数据

• 已创建好两篇markdown，需要对它进行读取；
• process.cwd()：当前的项目根目录，cwd为current working dir；
• 记得文件读取是异步的；
• 注意请求API时也是异步请求；

Next.js的三种渲染

客户端渲染（CSR，Client Side Render）

• 只在浏览器上执行的渲染

静态页面生成（SSG，Static Site Generation）

• 可解决白屏问题、SEO问题；
• 无法生成用户相关的内容（即所有用户请求的结果都一样）；

服务端渲染（SSR，Server Side Render）

• 可解决白屏问题、SEO问题；
• 可以生成用户相关内容（即不同用户看到的结果不一样）
  SSG和SSR都属于预渲染 Pre-rendering

客户端渲染

封装一个usePosts

• 路径为lib/hooks/usePosts.tsx，文件名必须以use开头；
• 公共的类型声明可写在next-env.d.ts声明文件中，这样全局都可直接使用里面的类型声明；

总结

数据内容是通过ajax请求渲染到页面上的；

缺点

• 会出现白屏，在AJAX得到响应之前，页面会一直loading；
• SEO不友好，因为内容不是一开始就在html中的，而是通过AJAX请求得来的，所以无法进行SEO优化；

静态内容和动态内容

静态内容是直接写在代码里的；动态内容是从数据库拉取的；

静态页面生成（SSG）

背景

• 想一下，如果文章列表页面，每个人看到的文章都是一样的，那为什么还要在每个人的浏览器上再渲染一次，而不是直接在后端渲染好，然后发给每个人；
• 这样N次渲染就变成了1次渲染，N次客户端渲染就变成了1次静态页面生成；
• 这个过程就是动态内容静态化

注意

• 后端最好不要通过AJAX去获取数据，当然想用AJAX获取也可以，但没有必要；
• 那么应该如何获取数据呢？用getStaticProps！

getStaticProps 获取数据

声明位置

• 再每个page中默认导出函数的下面声明getStaticProps 函数即可；
• 要加上export；

写法

• 框住的部分是固定的，不能改变；

  
  image.png

如何使用

• 通过props获取，不过一般需要给props添加声明；
  

  image.png

• 右键“查看源代码”，你就会发现内容直接就在源代码里，说明在服务端那边就渲染了；

  
  源代码.png

同构代码

image.png

• 注意上图中，script的type是application/json，所以它不是脚本，是JSON数据，不会去执行！！！
• 前端不用AJAX也可以拿到posts的数据了；
• 这就是同构代码的好处：后端数据可以直接传给前端；

静态化的时机

• 在开发环境，每次请求都会运行一次getStaticProps，因为这是为了方便我们修改代码重新运行；
• 在生产环境，getStaticProps只会在build时运行一次，然后提供一份HTML给所有用户下载；

如何体验生产环境

• yarn build生成打包后的文件；
• yarn start打开打包后的文件；
  打包后的内容.png

三种文件类型

• 上图中可以看到pages/posts中index-ssg有三种文件类型；
• index-ssg.html里含有静态内容，用于用户直接访问；
• index-ssg.js也含有静态内容，用于快速导航；
• index-ssg.json中含有数据，和index-ssg.js结合得到界面；
• index-ssg.html = index-ssg.js + index-ssg.json

为什么不把数据直接放进index-ssg.js文件中呢

• 为了让index-ssg.json和不同的数据结合，也就是SSR的内容

SSG小结

动态内容静态化

• 如果动态内容与用户无关，那么可以提前静态化；
• 通过getStaticProps获取数据；
• 静态内容 + 数据（本地获取）就可以得到完整的页面，代替了之前的静态内容 + 动态内容（AJAX获取）
• 运行时机：静态化是在yarn build的时候实现的；

优点

• 生产环境中直接给出页面；
• 首页不会白屏；
• 搜索引擎可以看到页面内容（方便SEO）；

用户相关动态内容

较难提前静态化

• 需要在用户请求时，获取用户的信息，然后通过用户信息去数据库拿数据
• 需要用getServerSideProps

getServerSideProps

运行时机

• 无论是开发环境还是生产环境，都是在请求到来之后运行getServerSideProps；

参数

• getServerSideProps的参数是context，类型为NextPageContext；
• context.req / context.res分别获取请求和响应
• 一般只会用到context.req

总结

静态内容

• 直接写死在代码中的内容；

动态内容

• 通过AJAX请求，渲染成HTML；
• 术语：客户端渲染

动态内容静态化

• 通过getStaticProps获取用户无关的内容；
• 术语： SSG静态页面生成；

用户相关动态内容静态化

• 通过getServerSideProps获取请求，从请求中获得用户相关信息；
• 术语：SSR服务端渲染；
• 缺点：无法获取客户端信息，比如说目前浏览器的窗口大小；

有动态内容吗？没有就什么都不用做，直接输出HTML；
动态内容和客户端相关吗？相关就只能用客户端渲染（CSR）;
动态内容跟请求/用户相关吗？相关只能服务端渲染（SSR）或客户端渲染（CSR）；
动态内容的请求跟用户无关，那就使用SSG；

getStaticPaths

文档

• 当用到动态路由的时候需要用到getStaticPaths函数；
• 创建[id].tsx文件作为动态路由；

export const getStaticPaths = async () => {
  return {
    paths: [
      { params: {...} }
    ],
    fallback: true, false, or 'blocking',
  };
};

扩展知识

• 搜索“营销号生成器”来生成文章；
• gray-matter：把文件内容以json格式输出； yarn add gray-matter文档
• ua-parser-js：可以识别出当前运行在哪个浏览器中；yarn add ua-parser-js和yarn add --dev @types/ua-parser-js（安装一下声明文件）
• marked：把Markdown内容变成HTML；yarn add marked和yarn add --dev @types/marked