学习Next.js | 青训营笔记

Mario556
96 阅读6分钟

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

一、本堂课重点内容：

本堂课的知识要点有哪些？

  • CSR SSR SSG
  • 认识Next.js
  • Next.js客户端开发
  • Next.js服务端开发

二、详细知识点介绍：

CSR SSR SSG

1.客户端渲染（Client Side Render）,常见B端WEB应用开发模式。

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

CSR简而言之就是用户在通过URL请求访问网站时，服务器端返回给的是html文档，再让浏览器去解析渲染展示页面，其中的js，css,图片文件等均需再次发送请求去服务端请求数据加载。

SPA：单页面应用，他所需的资源在一次请求中就加载完成，不需要刷新地动态加载，首屏时间更长。

2.服务器端渲染(SSR),代码耦合度高，且模板语言中混杂编程语言对于一些复杂的功能，维护起来很痛苦。这种模式下Java、PHP负责渲染逻辑，前端只负责UI和交互。

优点：SEO优化，更短的首屏时间

在服务端看来，所有的前端渲染显示页面都是一串字符串，包括html, js, css都是如此，服务端渲染即是将一段处理好后的html字符串返回给客户端，而在返回的这个html字符串中，服务端知识将需要展示到html的服务端数据等信息直接写入到了这段html字符串中让客户端浏览器能够直接对其进行显示。

同构SSR：BFF服务于前端应用的后端（Backend For Frontend）。前后端一体化，一套React代码在服务器运行一遍又在浏览器运行一遍。前后端都参与渲染。

3.静态页面生成 SSG (Static Site Generation)： 用于静态页面的渲染方式，构建时生成完整的html页面，无需服务端请求处理，服务器响应快，非常快就可以看到展示的页面。

CDN：Content Delivery Network,即内容分发网络。建立并覆盖在Internet之上，由分布在不同区域的边缘节点服务器群组成的分布式网络。

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

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

ssr和ssg的优势

1.利于SEO

2.更短的首屏时间

认识Next.js

Next.js是一个构建于Node.js之上的开源web开发框架，支持基于React的web应用程序功能，例如服务器端渲染和生成静态网站。

优势：上手快，能力集全，覆盖足够多的性能优化和生态。

SSR的实现

SSR 实现的关键就是：同构，一份代码，先通过服务端渲染(server-side rendering，ssr)，生成html字符串以及初始化数据，客户端拿到后，通过对html的dom进行patch和事件绑定对dom进行客户端激活(client-side hydration，csh)，这个整体的过程叫同构渲染。服务端将 HTML 片段提炼出来的过程就称为脱水，相应的，注水是在客户端要做的事，把只有样子的 HTML 恢复其功能。

Next.js 预渲染模式

Next.js 最突出的特性是预渲染，接收到 Javascript 代码后在客户端渲染网页是一个缓慢的过程。Next 通过向客户端发送每个页面的预渲染版本来解决这个问题。Next.js有两种预渲染的方式：静态生成和服务端渲染，他们之间的区别就是什么时候生成html页面。

静态生成，是在 build 应用的时候生成html, 然后每次请求的时候重用静态生成的页面

当我们可以在用户请求一个页面之前，就知道页面具体的样子，比如一篇博客，一份文档，我们就尽可能使用静态生成 ，这样你的所有 page（页面）都可以只构建一次并托管到 CDN 上，这比让服务器根据每个页面请求来渲染页面快得多。

服务端渲染，就是每次请求的时候都去生成html页面。

假设你的某个页面需要预渲染频繁更新的数据，比如一个实时监控界面，一份可以和用户交互的表单信息等等，你就需要使用服务端渲染，即SSR渲染

在开发模式下（即npm run dev），每次请求的时候都会重新渲染页面，不管页面是不是静态生成的。

Next.js客户端开发

初始化项目

为了初始化一个项目，我们需要配置一个 package.json 文件初始化一个项目，然后下载依赖，你也可以直接使用官方初始化完成的 demo：

npx create-next-app@latest--typescript

官方项目中有一个pages 文件夹，一个public 文件夹，一个styles 文件夹以及一些配置文件，如果是你自己创建的项目你需要自己创建一些项目，下面我们来讲每个文件夹的作用：

  • public 文件夹

这个文件夹存放了你需要引入的静态资源，比如图片 logo 等，等你在项目中使用这些资源时，你可以直接从 public 文件夹开始寻找这些资源，例如官方 demo 中的，vercel.svg 这个文件就在 public文件夹中。

  • pages 文件夹

这个文件夹存放我们需要的页面，并且根据这个文件夹的逻辑配置我们的路由，而 index.js 文件可以作为某个路由的根进行配置，例如：pages/index.js 就需要你只需要直接访问 localhost:3000 就可以访问，而 pages/test/new.js 文件你需要使用 localhost:3000/test/new进行访问。

  • styles 文件夹

存放我们需要的样式。

数据注入：

  • getInitialProps

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

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

  • getServerSideProps

    只会运行在服务端

  • getStaticProps

    涉及动态路由（带参数），需要配置所有可能的参数情况

Next.js服务端开发

1.BFF层开发

和Express等开发类似，区别是并没有参数可以直接区别请求类型

2.调试

debugger

3.CMS平台推荐

Strapi-headless CMS

strapi:github.com/strapi/stra…

  • 自定义内容结构
  • 轻松的内容管理
  • 开发人员友好的API
  • 角色和权限

初始化项目

yarn create strapi-app my-project --quickstart
  1. Content-Type Builder 构建结构体
  2. Content Manger 配置数据源并发布
  3. Settings Roles 选择角色并选择接口类型
  4. 如果涉及嵌套，需接口后添加 populate=deep 参数(npm install strapi-plugin-populate-deep--save)
  • 基础样式和背景的抽离
  • 主体化context全局注入
  • 从注入数据中取出theme和setTheme
  • 多进程间的主题同步

三、引用参考：

第五届青训营 PPT - Next.js实战项目.pptx

avatar
文章
阅读
粉丝