Next.js实战项目理解篇|青训营笔记

96 阅读2分钟

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

今日学习重点:

知道什么是CSR,SSR,SSG,什么是Next.js,以及如何做Next.js客户端开发。

学习要达到的课程目标

具备C端的Web应用开发的基本能力

什么是CSR

CSR全称是 (Client Side Rendering),常见的B端web应用开发模式,前后端分离,服务器压力相对较轻渲染工作在客户端进行,服务器直接返回不加工的HTML用户在后续访问操作。举个例子,我们平时用vue,react等框架开发的项目,都是先下载html文档(不是最终的完全的html),然后下载js来执行渲染出页面结果

作者:前端李白
链接:juejin.cn/post/703915…
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

什么是SSR

SSR全称是 Server Side Rendering,代表的是服务端渲染。与客户端渲染不同的是,SSR输出的是一个渲染完成的html,整个渲染过程是在服务器端进行的。例如传统的JSP,PHP都是服务端渲染 在这种模式下,JAVA,PHP负责渲染的逻辑,而前端只负责UI和交互。

什么是SSG

SSG全称是 Static Site Generation ,代表的是静态站点生成。在构建的时候直接把结果页面输出html到磁盘,每次访问直接把html返回给客户端,相当于一个静态资源

CSR,SSR,SSG的优缺点以及更详细的理解大家可以看上面的链接

BFF:Backend For Frontend,服务于前端应用的后端。

SSR,SSG的优势:

利于SEO 更短的首屏时间SSR/SSG只需要请求一个HTML文件就能展现出画面,虽然在服务器上会调取接口, 但服务器之间的通信远比客户端要快,甚至是同一台服务器上的本地接口。

什么是Next.js

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

核心概念同构

客户端会做的事情,服务端也会做一遍,客户端和服务端代码都会参与进来 这一篇文章是用于理解CSR,SSR,SSG,相当于一个了解文档,让自己对这些知识有一个深刻的了解,再去进行代码的学习,加深应用。