[Next.js 实战项目| 青训营笔记]

Haite
37 阅读3分钟

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

一、视频课笔记：

1.本堂课重点内容：

  1. CSR, SSR, SSG
  2. 什么是 Next.js
  3. Next.js 客户端开发
  4. Next.js 服务端开发
  5. 项目核心功能讲解

2.详细知识点介绍：

  • CSR, SSR, SSG:

    • CSR:
      • 客户端准染(Client-Side Rendering).常见B端 WEB 应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行 服务器直接返回不加工的HTML用户在后续访问操作
      • SPA 单页面应用,它所需的资源(HTML CSS JS等)，在一次请求中就加载完成，不需刷新地动态加载，首屏时间更长
    • SSR:
      • SSR( Server-Side Redering)o 不是什么新鲜的概念，从原先的ISP!PP就已经体现了服务器端渲染。代码耦合度高， 且模板语言中混杂编程语言对于一些复杂的功能， 维护起来很痛苦这种模式下Java,PHP 负责渲染的逻辑，而前端只负责UI和交互。
    • SSG
      • :静态站点生成(Static Site Generation) ，在构建的时候直接把结果页面输出#ml到磁盘，每次访问直接把ml 返回给客户端，相当于一个静态资源
      • CDN:建立并覆盖在Intemet 之上，由分布在不同区城的边缘节点服务器群组成的分布式网络。
      • 相比SSR 因为不需要每次请求都由服务器端处理，所以可以大幅减轻服务器端的压力
      • 缺陷在于只能用于偏静态的页面, 无法生成与用户相关的内容、 也就是所有的用户访问的页面都是相同的。

  • 什么是 Next.js

    • 学习曲线平缓，开发效率较高运行效率接近常见的编译语言
    • 社区生态丰富及工具链成熟(npm, V8 inspector)与前端结合的场景会有优势(SSR)
    • 现状：竞争激烈, Nodejs有自己独特的优势

  • Electron跨端桌面应用：

    • 商业应用:vscode. slack, discord, z0om
    • 大型公司内的效率工具
    • 现状:大部分场景在选型时，都值得考虑

  • 介绍Node.js运行时结构：

    • Nextjs是一个构建于Nodejs 之上的开源 Web开发框架，支持基于React的 Web应用程序功能， 例如服务端渲染和生成静态网站。
    • 上手快，能力集全， 而且覆盖了足够多的性能优化和生态。
    • 对于新同学掌握前后端一体化的开发模式很友好。

image.png

  • Next.js 客户端开发
  1. 初始化
  2. 数据注入
  3. getInitialProps
  4. getServeSideProps
  5. getStaticProps
  6. CSS Modules
  7. Layout
  8. 文件式路由
  9. BFF层的文件式路由
  10. 路由跳转
  11. header修改
  12. 多媒体适配
  13. 大图优化
  • Next.js 服务端开发
  1. BFF层开发
  2. 调试方式
  • 项目核心功能讲解
  1. 首页功能实现
  2. 文章页实现
  3. 主题化功能实现

三、个人思考与总结： 1.Next.js的应用广，非常值得深入学习和掌握。 2.Next.js有很多优点和缺点。

avatar
文章
阅读
粉丝