Next.js 与前端开发实战 | 青训营笔记

SunACong
178 阅读3分钟

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

CSR SSR SSG

  • CSR
    • 客户端渲染（Client-Side Rendering），常见于B端Web应用开发模式，前后端分离开发，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用在在后续访问操作。
  • SSR
    • Server-Side Rendering不是新鲜概念， JSP/PHP已经体现服务器渲染
    • JSP/PHP使用耦合度很高，模板语言混杂各种编程语言。
    • 同构SSR
      • BFF（Backend For Frontend） 服务于前端的后端
  • SSG
    • 静态站点生成（Static Site Generation）在构建时直接把结果页面输出html到磁盘，每次访问把html返回给服务端，相当于一个静态资源
    • CDN：建立在覆盖在Internet之上，有分布在不同区域的边缘节点服务器群组成的分布式网络
  • 对比SSG SSR
    • SSG不需要每次请求都由服务器处理，大幅度减轻服务器端的压力
    • SSG缺陷所有用户访问的页面都是一样的
  • SSR SSG优势
    • 利于SEO
      • 搜索引擎对关键词的排序检索，用户搜索词可以在服务端返回的html页面中找到关键词利于SEO
    • 更短的首屏时间
      • 只需要一个HTML文件就可以展示页面，服务器端的通信会比客户端快很多，不再需要大量的js文件

什么是Nextjs

  • React有SSR API但是有很多重复的工作
  • Nextjs基于React提供相关服务端渲染API实现，
  • Next.js是一个构建于Node.js之上的开源Web 开发框架，支持基于React的Web应用程序功能,例如服务端渲染和生成静态网站。上手快,能力集全，而且覆盖了足够多的性能优化和生态。对于新同学掌握前后端一体化的开发模式很友好。

最重要的三个部分

  • getInitialProps
    • 在走内部跳转的时候会在客户端走
    • 直接访问页面是走服务器端 （f5刷新）
  • getServerSideProps 推荐
    • SSR 永远只走服务器端
  • getStaticProps
    • SSG 在服务端构建时执行，涉及动态路由（带参数）需要使用该api配置所有可能的参数情况
    • 适用于量固定并且数量不是很多的情况

Nextjs客户端开发

Layout

  • 定义Layout组件

文件式路由

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

  • 预定义路由优先级更高，预定义路由直接匹配的路由就不会分发给下面的路由 image.png

BFF层的文件式路由

  • BFF作为服务器构建包，不影响客户端构建bundle体积，相同的router生成方式，不过是作为API层访问，而不是page

路由跳转方式

  • next/link
  • useRouter
  • 原生方法跳转

header修改

  • 可用于修改TDK (title description keywords) image.png

多媒体适配

  • CSS适配
    • 使用rem image.png
  • JS适配

大图优化-webp

Nextjs服务端开发

  • Strapi - headless CMS image.png

核心功能讲解

首页功能

image.png

文章页实现

image.png

主体化功能实现

image.png

总结

  • 为什么需要nextjs
  • 什么是nextjs
    • c端 b端
    • c端对seo要求较高 搜索引擎排名要靠前
  • 同构ssr
    • 服务器端 和 客户器端需要所有事情同步做一遍
      • 脱水和注水 三种注入的方式保证客户端和服务端数据同步 最重要的三个部分
    • NextJs去除了React中重复的操作
  • ssr和ssg区别
  • 客户端开发
    • 数据注入
  • 服务端开发
    • BFF层 不生产数据 只搬运数据
avatar
文章
阅读
粉丝