这是我参与「第五届青训营 」笔记创作活动的第9天
本堂课重点内容
1. CSR, SSR, SSG 2. 什么是 Next.js 3. Next.js 客户端开发 4. Next.js 服务端开发 5. 项目核心功能讲解
重点知识点介绍
CSR，SSR，SSG
- CSR：客户端渲染Client Side Rendering，渲染工作在客户端（浏览器）进行，而不是在服务器端进行。
- 前后端分离，减轻服务器压力，可以做成SPA增量渲染
- 不利于SEO，首屏渲染时间长
- SSR：服务端渲染Server Side Rendering，整个渲染过程是在服务器端进行，服务器返回渲染完成的HTML例如JSP，PHP
- 有利于SEO，首屏渲染时间短
- 占用服务器资源，无法只渲染可变区域每次跳转新页面都要在服务器重新渲染整个页面，代码耦合度高难以维护
- 同构SSR：一套 React 代码在服务器上运行一遍，到达浏览器又运行一遍。 服务端渲染完成页面结构，客户端渲染绑定事件
- SSG：静态站点生成Static Site Generation，在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源
- 与SSR相比 可以将页面输出到CDN缓存，更减轻服务器压力
- 与SSR相比 无法针对不同用户生成不同页面，只能生成静态数据否则每次数据变动都要重新生成
- 还有ISR，DPR等
Next.js实战
Next客户端开发
数据注入
- getInitialProps
只在服务端运行，只能在页面层面进行绑定，采用同构，使用客户端路由跳转
内部跳转(Link)时会在客户端进行数据请求，直接打开不受影响
- getServerSideProps
只会运行在服务端
- getStaticProps
涉及动态路由（带参数），需要配置所有可能的参数情况
文件式路由
- 有一个基于页面概念的基于文件系统的路由器。当一个文件被添加到pages目录中时，他会自动作为一个路径可用 - 预定义路由优先级更高，预定义路由能直接匹配的路由就不会分发给下面的动态路由
Next.js中文文档：Next.js - React 应用开发框架 | Next.js中文网 (nextjs.cn)
Next服务端开发
- czm1290433700/ssr-server: ssr
课后思考
1. 什么是 CSR, SSR 和 SSG？常规的 SSR 与 同构 SSR 之间有什么不同？ 2. 一个 SSR 框架的实现要有哪些必须的元素？ 3. 为什么我们需要使用 nextjs，它能帮我们解决什么问题？ 4. getInitialProps、getServerSideProps、getStaticProps 三者有什么异同？ 5. Nextjs 的 路由机制是怎样的？ 6. CMS 是什么？在实际的业务项目中，我们为什么需要它？ 7. Strapi 怎么配置发布一个接口？有哪些步骤？ 8. 对于多个主题的效果，我们可以通过什么渠道实现？
- 参考：前端与Nextjs
课后个人总结
两个小时的课对我这个react零基础的人来说有些困难，但是肯学就会有进步
引用参考
第五届青训营 PPT - Next.js实战项目.pptx
