这是我参与「第五届青训营 」伴学笔记创作活动的第 11天
青训营课程笔记
CSR/SSR/SSG
- CSR：客户端渲染，渲染工作在客户端进行，服务端直接返回不加工的HTML用户在后续访问
- SSR：服务器端渲染
- SSG:静态站点生成，每次访问直接把html返回给客户端，相当于一个静态资源
SSR/SSG优势
- 利于SEO
- 更短的首屏时间
Next.js介绍
基于React提供的服务端渲染API实现，是一个构建于Node.js之上的开源Web开发框架，支持基于React的Web应用
Next.js客户端开发
Nextjs初始化
npx create-next-app@latest --typescript
数据注入
- getlnitialProps
- getServerSideProps:只会在服务器端执行部分逻辑
- getStaticProps：SSG在服务器端构建时执行
CSS Modules:Next.js支持使用文件命名约定的CSS模块
Layout:通过入口文件导入layout，可以实现每个页面公共的页眉页尾
文件式路由:当一个文件添加到pages目录中，它会自动作为一个路径可用
路由跳转：next-link跳转/useRouter跳转
多媒体适配-CSS适配/JS适配
JS适配：通过监听本地缓存同步不同页面的主题，用宽度进行判断，为了适配不改机型，仅拉扯屏幕宽度的情况，通过增加none类型来缓冲默认类型样式切换时的视觉突变，使用window.addEventLinsener("resize",checkUserAgent);监听屏幕宽度变化，及时适配当前页面的样式
Next.js服务器端开发
BBF层开发
和Express等开发类似区别是并没有参数可以直接区别请求类型
调试方式
“debugger”："cross-env NODE_OPTIONS='--inspect' next dev"
首页功能实现
- 页面/动画/多媒体适配
- BBF
- Strapi
- 多媒体格式的转换
主体化功能实现
- 基础样式和背景的抽离
- 主体化context全局注入
- 从注入数据中取出theme和setTheme
- 多进程的主题同步
总结
通过本次实战的了解，我清楚了Next.js框架在项目中的使用，学习了如何在客户端/服务器端进行相应开发
