初步了解Next.js

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

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

Next.js的四种模式：

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

js 复制代码

// app/csr/page.tsx
'use client'; // 关键：声明这是客户端组件

import { useState, useEffect } from 'react';

export default function CSRPage() {
  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>CSR Page</h1>
      <p>Data: {data.content}</p>
      <p>浏览器下载完 JS 后才开始请求数据</p>
    </div>
  );
}

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

js 复制代码

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

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

js 复制代码

async function getData() {
  // 这告诉 Next.js: "打包的时候请求一次，然后把结果存死在 HTML 里"
  const res = await fetch('https://api.example.com/data', { 
    cache: 'force-cache' 
  });
  
  if (!res.ok) throw new Error('Failed to fetch data');
  return res.json();
}

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

js 复制代码

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

Next.js的路由系统：

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

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

组件：

Next.js自带了一些组件

<Image />: 自动根据视口大小调整图片尺寸、格式、懒加载。防止布局偏移。
<Link />: 类似于 <a> 标签，但当链接出现在视口中时，Next.js 会自动预加载目标页面的代码，让跳转极其流畅。
<Script />: 优化第三方脚本的加载时机。