当前位置：首页 > news >正文

初步了解Next.js

news 2026/3/26 22:46:06

Next.js是React的一个超集框架，为什么会有Next.js这个框架存在呢，因为它可以解决React的痛点，就是客户端渲染

Next.js的一大亮点就是支持多模式混合渲染，分别有四种模式，CSR，SSR，SSG，ISR，然后我开介绍一下这四种模式是什么以及他们分别是如何渲染的。

Next.js的四种模式：

CSR(默认渲染模式)：这种渲染模式就是React的渲染模式，客户端渲染。这种渲染模式的一大特点就是Js渲染，过程是这样的，浏览器加载空的HTML，加载JS，JS执行并且加载页面，但是这种加载模式有一个很大的弊端，就是SEO(搜索引擎优化)差，并且首屏加载慢

// app/csr/page.tsx'use client';// 关键：声明这是客户端组件import{useState,useEffect}from'react';exportdefaultfunctionCSRPage(){const[data,setData]=useState(null);const[isLoading,setLoading]=useState(true);useEffect(()=>{// 浏览器端发起请求，就像传统的 React 一样fetch('https://api.example.com/data').then((res)=>res.json()).then((data)=>{setData(data);setLoading(false);});},[]);if(isLoading)return<p>Loading...</p>;if(!data)return<p>No data</p>;return(<div><h1>CSRPage</h1><p>Data:{data.content}</p><p>浏览器下载完JS后才开始请求数据</p></div>);}

SSR：这种加载模式是服务器端来进行加载的，过程：用户请求页面 -> 服务器执行React代码生成HTML -> 返还给浏览器。优点：SEO好，首屏加载快，并且数据是实时的。缺点就是服务器压力大。

asyncfunctiongetData(){// 这告诉 Next.js: "绝对不要缓存，每次有人访问页面，你都要重新去 API 拉数据"constres=awaitfetch('https://api.example.com/data',{cache:'no-store'});returnres.json();}

SSG：静态站点生成，在项目构建打包是就生成HTML，用户访问时直接给HTML文件。优点：加载速度最快，服务器压力小。数据非实时，适合博客和文档。

asyncfunctiongetData(){// 这告诉 Next.js: "打包的时候请求一次，然后把结果存死在 HTML 里"constres=awaitfetch('https://api.example.com/data',{cache:'force-cache'});if(!res.ok)thrownewError('Failed to fetch data');returnres.json();}

ISR：SSG的升级版，可以设定时间，过期后用户访问时后台会自动重新构建该页面。兼备了SSR的动态和SSG的速度。

asyncfunctiongetData(){// 这告诉 Next.js: "先缓存起来，但如果这数据超过 60秒 没更新了，下次有人来访问时，后台偷偷去更新一下"constres=awaitfetch('https://api.example.com/data',{next:{revalidate:60}});returnres.json();}

Next.js的路由系统：

Next.js使用的文件系统路由，不需要想React-router一样配置路由表

Pages Router(旧的路由)：文件放在pages/ 目录下，通过操控文件名，可以生成动态路由和静态路由。在数据获取方面，需要使用getStaticProps来实现SSG静态站点渲染，使用getServerSideProps实现SSR服务器端渲染。
App Router(Next.js新特性)：文件放在app/ 目录中，比pages路由方式不一样的是可以通过layout文件来定义全局和局部的布局，然后就是自带了一层渲染方式，RSC渲染方式，过程：HTML发给浏览器，JS代码不会发给浏览器，浏览器只负责渲染，不负责逻辑