Next.js预加载[编辑 | 编辑源代码]

Next.js预加载（Preloading）是一种性能优化技术，用于提前加载用户可能访问的资源（如页面、脚本或数据），以减少后续导航的延迟。Next.js通过内置的预加载机制，显著提升了单页应用（SPA）和多页应用（MPA）的用户体验。

概述[编辑 | 编辑源代码]

Next.js的预加载功能基于浏览器的`<link rel="preload">`机制，但通过框架的智能逻辑进一步优化。当用户悬停在链接上（`hover`）或页面检测到可能的路由跳转时，Next.js会自动预加载目标页面的资源（如JavaScript包、CSS或数据），从而在用户实际点击时实现近乎瞬时的加载。

核心优势[编辑 | 编辑源代码]

减少延迟：预加载关键资源，消除渲染阻塞。
提升交互体验：用户感知的页面切换速度更快。
智能触发：基于用户行为预测（如悬停或路由优先级）。

工作原理[编辑 | 编辑源代码]

Next.js的预加载分为两个阶段： 1. 资源预加载：提前获取目标页面的静态资源（如`_next/static/chunks/pages/about.js`）。 2. 数据预加载（可选）：如果使用`getStaticProps`或`getServerSideProps`，可提前发起API请求。

实现方式[编辑 | 编辑源代码]

1. 自动预加载[编辑 | 编辑源代码]

Next.js默认对所有`<Link>`组件启用预加载。当`Link`出现在视口（viewport）中时，框架会自动预加载资源：

import Link from 'next/link';

// 当用户鼠标悬停时，/about页面的资源会被预加载
export default function Home() {
    return (
        <Link href="/about">
            <a>About Us</a>
        </Link>
    );
}

2. 手动控制[编辑 | 编辑源代码]

通过`preload`方法可以编程式触发预加载：

import { useRouter } from 'next/router';

function NavBar() {
    const router = useRouter();

    const handleHover = () => {
        router.preload('/dashboard'); // 手动预加载
    };

    return (
        <button onMouseEnter={handleHover}>
            Go to Dashboard
        </button>
    );
}

3. 数据预加载[编辑 | 编辑源代码]

结合`next/link`的`prefetch`属性（默认启用）和数据处理：

// 页面: pages/products/[id].js
export async function getStaticProps({ params }) {
    const res = await fetch(`https://api.example.com/products/${params.id}`);
    const product = await res.json();
    return { props: { product } };
}

// 在父组件中预加载
<Link href="/products/123" prefetch={true}>
    <a>Product 123</a>
</Link>

高级配置[编辑 | 编辑源代码]

自定义预加载策略[编辑 | 编辑源代码]

在`next.config.js`中调整预加载行为：

module.exports = {
    // 只预加载视口内的Link（默认true）
    prefetch: true,
    
    // 限制并发预加载数量
    experimental: {
        maxConcurrentPrefetches: 5
    }
};