这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
一、本堂课重点内容：
- CSR, SSR, SSG
- 什么是 Next.js
- Next.js 客户端开发
- Next.js 服务端开发
- 项目核心功能讲解
CSR/SSR/SSG
- CSR：客户端渲染，渲染工作在客户端进行，服务端直接返回不加工的HTML用户在后续访问
- SSR：服务器端渲染
- SSG:静态站点生成，每次访问直接把html返回给客户端，相当于一个静态资源
SSR/SSG优势
- 利于SEO
- 更短的首屏时间
Next.js介绍
基于React提供的服务端渲染API实现，是一个构建于Node.js之上的开源Web开发框架，支持基于React的Web应用
Next.js服务器端开发
BBF层开发
和Express等开发类似区别是并没有参数可以直接区别请求类型
调试方式
“debugger”："cross-env NODE_OPTIONS='--inspect' next dev"
首页功能实现
- 页面/动画/多媒体适配
- BBF
- Strapi
- 多媒体格式的转换
主体化功能实现
- 基础样式和背景的抽离
- 主体化context全局注入
- 从注入数据中取出theme和setTheme
- 多进程的主题同步
详细知识点介绍
- Node.js 的应用场景：前端工程化、web服务端应用、electron跨端桌面应用。
- 复习前端工程化：打包工具Bundle：webpack，vite，esbuild，parcel；代码压缩uglify：uglifyjs；语法转换transpile:babeljs,yp
getInitiaIProps
在服务端执行，只能在页面层面进行绑定，采用同构，首次渲染服务端渲染，路由跳转使用客户端路由 意味着如果使用router跳转当前页，会在客户端执行这部分逻辑
getStaticPaths
SSR，在服务器端构建时执行 如果涉及动态路由(带参数);需要使用getStaticPaths配置所有可能的参数情况
CSS Modules
Next.js支持使用文件命名约定的CSS模块[name].module.css
Layout
通过在入口文件导入layout ，可以实现每个页面公共的页眉页尾
文件式路由
Next.js有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到pages目录中时，它会自动作为一个路径可用 预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由
