Next.js | 青训营笔记

syrun
278 阅读5分钟

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

1. web应用

  • c端
    • 可以部署到外网使用的网站
  • B端
    • 多为内部网站使用，比如学校的教学管理平台

2. 渲染模式

  • CSR
    • 客户端渲染 （Client-Side Rendering）
    • 常见于 B 端 web 应用开发模式。前后端分离，服务器相对压力更轻， 服务器直接返回不加工的 HTML，渲染工作在客户端进行
    • 弊端
      • 首屏时间长
      • 不利于 SEO 优化
  • SSR
    • 服务端渲染（Server-Side Rendering）
    • 常见于 C 端的开发模式
    • 服务器会返回加工的 HTML (区分某个 web 应用是 C 端还是 B 端)
    • 弊端
      • 代码耦合度较高
      • 前端和后端语言、逻辑的混杂，不利于应用后期的维护
    • 同构 SSR
      • 接口服务和模板页面都在一个项目结构目录下，但不在一个文件内
      • 前后端一体化，一套 React 代码在服务器上运行一遍，到达浏览器又运行一遍。前后端都要参与渲染，并且首次渲染的内容一样
      • BFF： 服务于前端应用的后端（一个 Node 服务）
        • 在接口和模板页面中配置的中间件 （相当于前端和后端的中介）
        • BFF 可以操作数据库，但是通常不会直接操作，而是对下游的请求的数据进行拼接和汇总，交给模板页面进行数据展示或交互
        • 使用 BFF 之后， 接口服务就只需要在乎数据本身，而数据的处理可以放在 BFF 中，以提高可维护性和可复用性
  • SSG
    • 静态站点生成 （Static Site Generation）
    • 和 SSR 的效果是一样的，区别在于： SSG 在一开始构建时的结果上传到 CDN 上，作为一个静态的 HTML 文件。所以，相比于 SSR ，SSG 由于不需要每次请求都由服务器处理，所以服务器的压力更轻
    • 弊端
      • 由于 SSG 在构建时会直接将结果上传到 CDN 上，相当于一个静态资源。所以 SSG 只能用于偏静态的页面，无法生成与用户相关的内容，也就是所有用户访问到页面都是相同的
    • CDN
    • 建立并覆盖在 Internet 之上，由分布在不同区域的边缘节点服务器群组成的分布式网络
  • SSR / SSG 的优势
    • 利于 SEO 优化
      • 由于服务器参与渲染，所以搜索引擎可以爬取到网站的相关 HTML 结构， 这利于网站排名
    • 更短的首屏时间
      • SSR / SSG 只需要请求一个 HTML 文件，就能展现页面，虽然在服务器上会调取接口，但是服务器之间的通信比客户端快。因为不再需要请求和执行大量的 JS ，这就使得 SSR / SSG 可以拥有更短的首屏时间
  • image.png

3. 什么时 Next.js

基于 Node.js 之上的开源 Web 开发框架，支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站

帮助我们更好的开发一个 SSR / SSG 的项目

覆盖了足够多的性能优化和生态

4. SSR 的实现

  • 同构：客户端所做的事情服务端也会原封不动地做一遍，来保证客户端与服务端预期是相同的
    • 为什么需要同构?
      • 如果不进行同构，无法保证一些事件得到触发
  • 脱水、注水
    • 保障客户端和服务端达到数据同步

5. 实战

  • 数据注入

    • getServerSideProps

      • 和 getIntialProps 的效果很相似，不同点在于
        • 这个函数只会发生在服务器端

    • getStaticProps

      • SSG
      • 这个函数会在服务器端构建时执行
      • 但是我们知道使用 SSG 渲染时返回的结果是一个静态资源，所以需要一些额外的配置来获取准确的资源。
      • 所以如果涉及动态路由，需要使用 getStaticPaths 配置所有可能的参数情况
      • 很明显，这比较适用于静态资源页面不是很多的情况

    • getIntialProps

      • 使用该 API 定义的函数在跳转外部路由时（直接访问页面，而不是通过客户端定义的路由进行跳转）会发生在服务器端，这样有利于 SEO，只有该函数发生在服务端，相关数据才会在通过路由访问网站首页之前被注入到 HTML 中

      • 但是如果跳转的是客户端的路由，那么通过该 API 定义的函数会发生在客户端中

    • 客户端注入

    • 下面是三种 API 的基本使用方法

image.png image.png image.png

6. 文件式路由

Next.js 有一个页面概念的基于文件系统的路由器。当一个文件被添加到 pages 目录中时，它会自动作为一个路径可用

7. BFF层的文件式路由

BFF, 不生产数据，只是数据的搬运工。作为服务器构建包，不影响客户端 bundle 体积，相同的 router 生成方式，不过是作为 API 层访问，而不是 page

8. 大图优化(webp)

webp 可以将 一个 png 格式的图片继续大小压缩，但是 webp 格式的图片的解析时间会被 png 格式的解析时间更长，因此在网速慢的时候，使用 webp 比较合适（解析时间远小于图片下载时间 ），但是在网速快的情况下，使用 webp 格式则不是很好的选择（图片下载时间差不多，但是 webp 的解析时间更长）

avatar
文章
阅读
粉丝