认识NextJs

参考学习：深海鱼在掘金 Next.js从入门到实战保姆级教程

https://juejin.cn/column/7629863917262700579

NextJs轮廓

一句话描述：NextJs是一个基于React的框架，用于构建SSR（服务器端渲染）的Web应用。学习NextJs的前置要求：了解Html、css、JavaScript、TypeScript和React，至少得能看懂Next官方文档中的示例代码。

React和NextJs有什么区别？

需要粗略地了解下Web应用渲染模式的演进历程：

  1. 早先的时候，普遍都是服务端渲染(SSR)模式：HTML全部组装完成后，服务器将它发送给浏览器。

    去饭店吃饭 ——> 顾客点菜 ——> 服务员拿给后厨 ——> 厨师炒菜 ——> 服务员上菜
				|		      |   			|             |
页面加载:   	空的HTML    下载JavaScript    执行JS       发给浏览器
    • 优点：首屏加载快(没啥内容，也不等JS执行，也不需要请求响应)，SEO友好(爬虫拿到的就是服务器阶段完整内容的HTML，啥都有还不用执行JS和等接口响应)
    • 缺点：切页面就卡，反应慢，耗时久(重新请求，再来一套点菜到上菜)，

  2. 后来，出现了Vue、React等框架，单页面应用(SPA)成为主流的客户端渲染(CSR)模式：浏览器只接收Html结构，JavaScript负责动态渲染内容。

    吃快餐 ——>热销套餐 + 个性套餐(儿童餐)  ——> 服务员组装(汉堡+炸鸡) ——>  散件(薯条)现炸 ——> 可乐自取 
			 |			|					   |			  |                  |
		  直接出餐	  现点现做                预制现有的         增量现做            顾客自取组餐成功
		    (SSG)      (SSR)                  (			ISR          )               (RSC)
    • 优点：页面切换流畅，响应快
    • 缺点：SEO不友好，首屏加载耗时(JS执行+接口请求)

  3. 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。

  • Pages Router：基于传统React客户端渲染思维封装SSR/SSG
  • App Router ：重构后，原生绑定RSC服务端组件，配合客户端组件双管齐下

关键词3—数据获取

Pages Router 的三套固定API：

// SSG 静态生成，构建时候一次性拉取数据，生成静态HTML
export async function getStaticProps(){}

// 动态路由SSG，预定义参数列表
export async function getStaticPaths(){}

// SSR 每次访问都在服务端请求最新数据
export async function getServerSideProps(){}

// 组件内，使用useEffect = CSR

App Router 统一基于浏览器标准做数据请求：

  • 自动去重：同一个请求在同一个渲染周期多次调用，只发一次实际网络请求

  • 三级缓存策略：默认静态数据永久缓存

  • RSC内直接aysnc/await执行异步解构数据，无需useEffect、SWR

  • 服务端发起请求，请求Cookie、Token在服务端统一携带，不会暴露前端。(双Token安全机制)

    SWR：React hooks数据请求库，来源Stale-While-Revalidate,主要处理数据获取、缓存管理、状态同步。

NextJs专属特性

NextJs在App Router 的基础上基于React Server Component(RSC) 拆分出两类组件，再配套 Server Action解决了「服务端执行逻辑、客户端触发调用」的前后端交互问题。

  1. 服务端组件（Server Component）：默认组件，运行在 Node/Edge 服务端，不进浏览器 JS 包；
  2. 客户端组件（Client Component）：加 "use client"，运行在浏览器，能使用 hooks、DOM API、交互事件；
  3. Server Actions（服务端 Action）：可理解为内嵌在组件代码里的后端接口函数，客户端按钮直接调用，不用单独写 route.js。

NextJs强势点

概括总结就是零配置的工程化能力。主要为：

  • 零配置支持Typescript，ESModule
  • 内置路由、内置API接口(API Router/Router Handlers)
  • 图片优化(next/image)
  • 字体优化(next/font)
  • 脚本优化(next/script)
  • 图片懒加载、自动压缩、格式自适应
  • 内置CSS支持：CSS Modules、Tailwindcss

NextJs生态和未来

了解下NextJs与其他技术的关系，便于选型决策。

  • NextJs与React：React是基础库作为基座提供基础能力(组件化UI开发)，NextJs是框架作为服务层提供解决方案。
  • NextJs与Nuxt：熟悉Vue使用Nuxt，熟悉React使用NextJs。
  • NextJs与传统后端框架：NextJs定位是全栈Web框架，对于复杂业务逻辑、微服务架构场景，还是需要专业的后端框架处理(如Express、NestJs等)。

关于AI发展的当下：NextJs的流式输出支持+双Token的服务端安全调用，配合混合渲染策略让NextJs与AI高度匹配，妥妥的未来可期。