接上篇：一起学习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
网友评论