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

Next.js是React的Web开发框架，允许开发者创建全栈应用。

CSR SSR SSG

CSR

客户端渲染(Client-SideRendering)常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML，用户在后续访问操作。这种模式利于SEO

SPA(single page application)：单页面应用，他所需的资源在一次请求中就加载完成，不需刷新地动态加载，首屏时间更长

SSR

SSR(Server-SideRendering)，从传统的JSP/PHP就已经体现了服务端渲染，这种模式的缺点也很显而易见，即代码耦合度高，且模板语言中混杂编程语言对于一些复杂的功能，维护起来很痛苦

BFF: Backend For Frontend，服务于前端应用的后端

SSG

静态站点生成(Static Site Generation), 在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源，因此利于SEO

CDN: 建立并覆盖在Internet 之上，由分布在不同区域的边缘节点服务器群组成的分布式网络

这种模式优点是可以大幅减轻服务器端的压力，缺点在于只能用于偏静态的页面，无法生成与用户相关的内容(适合文档站开发)

Why

基于 React 提供的相关服务器端渲染 API 实现，整个过程实现比较繁琐重复，从零实现对新上手同学很不友好，于是迫切需要一个封装好的集合来快速上手服务器端渲染

What

Next.js是一个构建于Node.js之上的开源 Web开发框架，基于React，,上手快，能力集全，大厂开发，性能好，而且生态系统完善，对于新手掌握全栈Web开发很友好

客户端开发

Get Started

Next的官方文档非常完善，几行命令即可创建出一个脚手架

npx create-next-app@latest --typescript
# or 
yarn create next-app --typescript
# or 
pnpm create next-app --typescript

然后直接启动即可在3000端口看到欢迎页面

数据注入

• getInitialProps在服务器端执行，只能在页面层面进行绑定，采用同构，首次渲染服务器端渲染，路由跳转使用客户端路由
• getServerSideProps，SSR，与 getInitialProps 不同的是即使使用 router 跳转当前页，也只会在服务端执行这部分逻辑
• getStaticProps，SSG，在服务器端构建时执行 如果涉及动态路由（带参数），需要使用getStaticPaths 配置所有可能的参数情况

文件式路由

类似于Nuxt，Next.js 有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到 pages 目录中时，它会自动作为一个路径可用，这种路由系统非常直观易懂

多媒体适配

可以用SCSS写出非常简洁易懂的CSS适配

JS多媒体适配

大图优化

为了节约昂贵的服务器宽带/CDN费用，可以将图片转换为压缩率更高的webp格式

服务端开发

Debug

Strapi

优秀开源的无前端CMS，100%由JS写成且高度可定制化 仓库地址https://github.com/strapi/strapi