这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
本课重点内容
- 了解Nextjs
本课内容概要
概念区分
- CSR：前后端分离，服务器压力相对更轻，渲染在客户端进行。服务器返回不加工的HTML
- SPA：单页面应用，在一次请求中完成所有内部页面的加载，首次加载需耗费一定时间
- SSR：java、php负责渲染逻辑；前端只负责UI与交互，不加工
- SSG:将静态资源存储在CDN中，相比SSR更大幅度节省服务器；但是仅仅针对静态页面
SSR与SSG的优势在于他们能更有利于：
- 搜索引擎的排名检索
- 更短的首次加载时间
Next.JS
基于NodeJS的一款开源框架，支持基于React的web应用 （vue有nuxt）
用法
数据注入
数据的注入一般分为这几类：
- getinitialprops：在服务器端执行，首次渲染由服务器渲染，路由采用客户端路由
- getseversideprops：在服务端执行路由跳转
- getstaticprops:静态资源，可以存储在CDN中
CSS 与布局
nextjs支持使用文件名约定的CSS模块
在入口文件导入layout可以实现每一个页面的页首页眉页脚页底等。
路由
文件相关
- 文件式路由：当文件被添加到pages的目录中时，它会自动作为一个路径可以用。
- 基于BFF层文件式的路由：区别在于用API层面访问，而不是page
