Next.js | 青训营笔记

40 阅读1分钟

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

  1. 课程目标
  2. CSR,SSR,SSG
  3. 什么是Next.js
  4. Next.js客户端开发
  5. 休息时间
  6. Next.js服务端开发
  7. 核心功能讲解

CSR,SSR,SSG

客户端渲染:常见B端WEB应用开发模式,前后端分离,服务器压力相对更轻,渲染工作在客户端进行,服务器直接返回不加工的HTML用户在后续访问操作。

SPA:单页面应用,它所需资源(html,css,js等),在一次请求中就加载完成,不需刷新地动态加载,首屏时间更长。

SSR:代码耦合度高,且模板语言中混杂编程语言对于一些复杂的功能,维护起来很痛苦。

BBF:服务于前端应用的后端。前后端一体化,一套react代码在服务器上运行一遍,到达浏览器又运行一遍。前端后端都要参与渲染,而且首次渲染出的HTML要一样。

SSG

Snipaste_2023-02-01_15-39-16.png

1.png

什么是Next.js

Next.js 是一个轻量级的 React 服务端渲染应用框架。

Next.js (frontendx.cn)

Next.js客户端开发

2.png

3.png SSR与getInitialProps不同的是即使使用router跳转当前页,也只会在服务端执行这部分逻辑。

多媒体适配

这是本人写代码的痛点

4.png

5.png

Next.js服务端开发

6.png

核心功能讲解

7.png

8.png