这是我参与「第五届青训营」笔记创作活动的第8天。

前言

本节课程主要分为五个方面：

CSR, SSR, SSG
什么是 Next.js
Next.js 客户端开发
Next.js 服务端开发
项目核心功能讲解

课前部分老师主要罗列课程中涉及到的概念。对于不熟悉的概念，我们可以查询预习；课中部分老师主要罗列一些课程需要使用的 Demo 仓库，帮助我们跟上课程的进度；课后部分是一些老师提出的问题，帮助我们们在课后梳理本课程的重点。

课前预习

CSR, SSR, SSG基本概念

CSR——客户端渲染(Clinet-Side Rendering)。前后端分离，服务器压力较小，渲染在客户端进行。
SSR——服务器端渲染(Server-Side Rendering)。在浏览器中生成和操作DOM，将服务器端的响应返回给客户端。
SSG——静态站点生成(Static Site Generation)。在构建时将结果页面输出html到磁盘，每次访问将html返回给客户端，相当于一个静态资源。相较于SSR减轻了服务器daunt的压力，但每个用户访问的页面都相同。

什么是 Next.js

Next.js 是一个构建于 Node.js之上的开源 Web 开发框架支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站。 Next.js的特点：上手快，能力集全，而且覆盖了足够多的性能优化和生态。对于新同学掌握前后端一体化的开发模式很友好。 Next.js初始化： npx create-next-app@latest --typescript

Next.js 客户端开发

Nextjs 初始化

确保 TypeScript 编译器选择Next.js 类型，可以放到gitignore中，不需要变更。 next.config.js：nextjs 的配置，我们可以补充webpack的一些配置进行。

getInitialProps

在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染路由跳转使用客户端路由意味着如果使用 router 跳转当前页，会在客户端执行这部分逻辑

getServerSideProps

SSR，与 getlnitialProps 不同的是即使使用router 跳转当前页，也只会在服务端执行这部分逻辑。

Next.js 服务端开发

BFF层开发：

和 Express 等开发类似区别是并没有参数可以直接区别请求类型

一个接口的生成有以下几个过程:

1.content-type builder 编辑结构体
2.content manager 配置数据源，并且发布
3.settings roles 里选择对应角色并勾选要发布的接口类型

老师在课堂上分享的项目

SSR 实现： github.com/czm12904337…
CMS 仓库地址：github.com/czm12904337…
Demo 仓库地址： github.com/czm12904337…

课后问题

针对老师提出的问题进行了逐一解答：

什么是 CSR, SSR 和 SSG？常规的 SSR 与同构 SSR 之间有什么不同？
一个 SSR 框架的实现要有哪些必须的元素？
为什么我们需要使用 nextjs，它能帮我们解决什么问题？
getInitialProps、getServerSideProps、getStaticProps 三者有什么异同？
Nextjs 的路由机制是怎样的？
CMS 是什么？在实际的业务项目中，我们为什么需要它？
Strapi 怎么配置发布一个接口？有哪些步骤？
对于多个主题的效果，我们可以通过什么渠道实现？

Next.js 实战项目 | 青训营笔记

前言