前端与 HTML | 青训营笔记

用户7905203499293
61 阅读2分钟

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

一、本堂课重点内容：

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

二、详细知识点介绍：

  • B端/C端

    • B端：to Business，如xxX管理系统，供内网使用
    • C端：外网也可以访问到的

    Next.js是用于开发C端的一个框架

  • CSR(client-side rendering)

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

  • 同构SSR(server-side rendering)

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

  • SSG(Static Site Generation 静态站点生成)

    在构建的时候直接把结果页面输出html到磁盘，每次访问直接把html返回给客户端，相当于一个静态资源

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

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

  • SSR SSG优势

    • 利于SEO(搜索引擎优化)
    • 更短的首屏时间：SSR/SSG只需要请求一个HTML文件就能展现出页面，虽然在服务器上会调取接口但服务器之间的通信要远比客户端快，甚至是同一台服务器上的本地接口调取因为不再需要请求大量js文件，这就使得SSR/SSG可以拥有更短的首屏时间

  • Next.js

    Nextjs 是一个构建于 Node.js之上的开源 Web 开发框架支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站。上手快，能力集全，而且覆盖了足够多的性能优化和生

三、实践练习例子：

Next.js客户端和服务端的开发。

四、课后个人总结：

这节课的内容学习起来十分吃力，很多东西都不懂也从来没有接触过，挑战比较大，只能说歌名尚未成功，同志还需努力。

五、引用参考：

avatar
文章
阅读
粉丝