编辑“︁Next.js预加载”︁（章节）

= 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请求。

<mermaid>
graph LR
    A[用户悬停在Link上] --> B[Next.js Router预加载目标页面JS]
    B --> C{是否使用数据获取方法?}
    C -->|getStaticProps| D[预加载静态数据]
    C -->|getServerSideProps| E[发起API请求]
</mermaid>

== 实现方式 ==

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

<syntaxhighlight lang="jsx">
import Link from 'next/link';

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

=== 2. 手动控制 ===
通过`preload`方法可以编程式触发预加载：

<syntaxhighlight lang="jsx">
import { useRouter } from 'next/router';

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

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

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

=== 3. 数据预加载 ===
结合`next/link`的`prefetch`属性（默认启用）和数据处理：

<syntaxhighlight lang="jsx">
// 页面: 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>
</syntaxhighlight>

== 高级配置 ==

=== 自定义预加载策略 ===
在`next.config.js`中调整预加载行为：

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

=== 性能权衡 ===
预加载虽然提升用户体验，但可能增加带宽消耗。可通过以下方式优化：
* 对高优先级路由使用`priority: true`
* 动态路由按需加载：`prefetch={router.pathname !== '/heavy-page'}`

== 实际案例 ==

=== 案例1：电商产品页 ===
当用户在商品列表页悬停时，预加载前3个商品的详情页：

<mermaid>
pie
    title 预加载资源类型
    "JS Bundle" : 45
    "CSS" : 20
    "API Data" : 35
</mermaid>

=== 案例2：文档网站 ===
在Next.js官方文档中，当鼠标悬停在侧边栏菜单时：
1. 预加载目标页面的`chunk.js`
2. 对静态生成的页面预加载`JSON`数据
3. 实际点击时直接渲染已有资源

== 数学建模 ==
预加载的收益可以用预期延迟减少来表示：

<math>
\Delta T = (T_{load} - T_{preload}) \times P_{click}
</math>

其中：
* <math>\Delta T</math>：平均节省时间
* <math>T_{load}</math>：常规加载时间
* <math>T_{preload}</math>：预加载完成后的加载时间
* <math>P_{click}</math>：用户点击概率

== 最佳实践 ==
1. '''关键路径优先'''：首屏内容优先预加载
2. '''避免过度预加载'''：移动端注意流量消耗
3. '''动态路由处理'''：使用`router.prefetch`动态处理
4. '''监控效果'''：通过`navigation-timing`API测量实际提升

== 故障排查 ==
若预加载未生效，检查：
* 是否在生产环境（开发模式不显示明显效果）
* `prefetch`是否被设为`false`
* 目标路由是否使用动态导入（`dynamic imports`）

== 参见 ==
* [[Next.js路由机制]]
* [[浏览器预加载规范]]
* [[性能优化指标]]

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js SEO与性能优化]]