Nextjs

认识NextJs 参考学习：深海鱼在掘金 Next.js从入门到实战保姆级教程 https://juejin.cn/column/7629863917262700579 NextJs轮廓 一句话描述：NextJs是一个基于React的框架，用于构建SSR（服务器端渲染）的Web应用。学习NextJs的前置要求：了解Html、css、JavaScript、TypeScript和React，至少得能看懂Next官方文档中的示例代码。 React和NextJs有什么区别？ 需要粗略地了解下Web应用渲染模式的演进历程： 早先的时候，普遍都是服务端渲染(SSR)模式：HTML全部组装完成后，服务器将它发送给浏览器。 去饭店吃饭 ——> 顾客点菜 ——> 服务员拿给后厨 ——> 厨师炒菜 ——> 服务员上菜 | | | | 页面加载: 空的HTML 下载JavaScript 执行JS 发给浏览器 优点：首屏加载快(没啥内容，也不等JS执行，也不需要请求响应)，SEO友好(爬虫拿到的就是服务器阶段完整内容的HTML，啥都有还不用执行JS和等接口响应) 缺点：切页面就卡，反应慢，耗时久(重新请求，再来一套点菜到上菜)， 后来，出现了Vue、React等框架，单页面应用(SPA)成为主流的客户端渲染(CSR)模式：浏览器只接收Html结构，JavaScript负责动态渲染内容。 吃快餐 ——>热销套餐 + 个性套餐(儿童餐) ——> 服务员组装(汉堡+炸鸡) ——> 散件(薯条)现炸 ——> 可乐自取 | | | | | 直接出餐 现点现做 预制现有的 增量现做 顾客自取组餐成功 (SSG) (SSR) ( ISR ) (RSC) 优点：页面切换流畅，响应快 缺点：SEO不友好，首屏加载耗时(JS执行+接口请求) NextJs的玩法：选择性切换渲染模式，NextJS的渲染模式全家桶： SSG(静态生成)：构建时候生成，最快 SSR(服务端渲染)：响应实时请求 ISR(增量静态再生)：静态+动态结合 RSC(React服务端组件)：默认组件，零JS水合(JS和HTML结构无冲突组合) PPR(部分与渲染)：流式渲染 CSR(客户端渲染)：传统SPA，补充手段 NextJs关键词 提到NextJs首先会想到的关键词就是框架本身的特色属性，了解关键词能进一步了解框架。 关键词1—核心渲染模式 服务端渲染(SSR，Server-Side Rendering)：每次请求，服务器实时执行代码并生成HTML发送给客户端，客户端接收HTML后下载JavaScript进行水合(Hydration)，完成页面交互。常用于内容频繁变化的场景，如个人主页，实时数据展示等。 静态生成(SSG，Static Site Generation)：构建阶段预先生成所有页面的HTML，部署到CDN等服务器。适用于内容相对文档的场景，如博客文章、产品介绍。 增量静态再生(ISR，Incremental Static Regeneration)：SSG的增强版本，页面以静态形式存在，内容在后台异步生成，无需重新部署。适用于低频度更新内容的场景。 客户端渲染(CSR，Client-Side Rendering)：页面HTML骨架为空，浏览器下载JS包后在浏览器端渲染页面。适用于局部交互模块场景，如购物车弹窗，登录悬浮。 关键词2—路由体系 NextJs中有两套路由体系：Pages Router 和 App Router，从社区更新趋势来看，往后的发展更倾向于使用App Router。 ...