Nextjs实战项目 | 青训营笔记

87 阅读2分钟

这是我参加青训营的第八天

分享要点:

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

1.CSR, SSR, SSG

CSR

客户端渲染。常见B端WEB应用开发模式。

前后端分离,服务器压力相对更轻。渲染工作在客户端进行,服务器直接返回不加工的HTML,用户在后续访问操作。

一次请求就加载完成

SSR

从原先的JSP/PHP就已经体现了服务器端渲染

服务端渲染 Server-Side Rendering

早期的 JSP 和 PHP,前端仅负责 UI 和交互

SSG

静态站点生成,在构建的时候直接把结果页面输出html到磁盘,每次访问直接把html返回给客户端,相当于一个静态资源。

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

相比SSR,因为不需要每次请求都由服务器处理,所以可以大幅减轻服务器端的压力。

缺陷在于只能用于偏静态的页面,无法生成与用户相关的内容,也就是所有的用户访问的页面都是相同的。

2.什么是 Next.js

getInitialProps

只在服务端运行,只能在页面层面进行绑定,采用同构,使用客户端路由跳转

内部跳转(Link)时会在客户端进行数据请求,直接打开不受影响

getServerSideProps

只会运行在服务端

getStaticProps

涉及动态路由(带参数),需要配置所有可能的参数情况

3.Next.js 服务端开发,Next.js 客户端开发接口开发

/page/api 文件夹下

调试 debug CMS

Content Manage System

strapi

Content-Type Builder 构建结构体

Content Manger 配置数据源并发布

Settings Roles 选择角色并选择接口类型

(嵌套需添加 populate=deep 参数 使用 strapi-plugin-populate-deep 插件)

4.项目核心功能讲解

基础样式和背景的抽离 主体化context全局注入 从注入数据中取出theme和setTheme 多进程间的主题同步