优化Next.js应用：禁用不必要的子页面预加载

理解Next.js的预加载机制

next.js作为一个功能强大的react框架，其核心优势之一是提供了出色的性能优化，其中就包括路由预加载（prefetching）。当用户在页面上看到一个<link />组件时，next.js会默认在后台静默地预加载该链接指向的页面资源（包括javascript代码、数据等）。这样做的目的是为了在用户点击链接时，能够实现几乎即时的页面切换，从而提供流畅的用户体验。

在Next.js 13的App Router模式下，这种预加载行为同样存在，并且通常是默认开启的。当一个父页面被渲染时，所有包含在父页面中的<Link />组件所指向的子页面，其相关资源都可能被预加载。

问题分析：不必要的资源消耗

尽管预加载旨在提升用户体验，但在某些特定场景下，它可能导致显著的资源浪费。考虑一个典型的应用场景：一个产品列表页面展示了24个产品，每个产品都有一个对应的详情页。

1. 默认预加载行为: 当用户访问产品列表页时，Next.js可能会尝试预加载所有24个产品详情页的资源。如果每个详情页都需要从外部数据源（如Firebase、API接口）进行数据读取，那么在用户尚未点击任何产品之前，系统可能已经执行了24次额外的详情数据读取请求。这24次请求是除了加载产品列表本身所需的请求之外的。
2. 重复读取: 更甚者，当用户最终点击某个产品进入其详情页时，Next.js会将其视为一次新的页面访问，并再次执行该详情页的数据读取。这意味着，对于一个产品，可能发生了两次详情数据读取（一次预加载，一次实际访问），而其他23个未被点击的产品详情页的预加载数据则完全浪费。
3. 成本与效率问题: 对于依赖按请求计费的后端服务（如Firebase的文档读取），这种不必要的预加载会导致成本的急剧增加。即使不考虑成本，过多的后端请求也会占用服务器资源，增加网络流量，并可能影响整体应用的响应速度。

显然，在这种情况下，默认的预加载行为弊大于利，我们需要一种机制来控制何时进行预加载。

解决方案：禁用特定链接的预加载

Next.js提供了一个简洁的解决方案来控制单个<Link />组件的预加载行为：通过设置prefetch={false}属性。

当你在<Link />组件上添加prefetch={false}时，Next.js将不会在组件进入视口时自动预加载该链接指向的页面资源。只有当用户实际点击该链接时，页面资源才会被请求和加载。

如何应用 prefetch={false}

你只需在需要禁用预加载的<Link />组件上添加prefetch={false}属性即可。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

代码示例：

以下示例展示了如何在产品列表页面中禁用产品详情页的预加载：

import Link from 'next/link';
import React from 'react';

// 模拟产品数据
const products = [
  { id: 'prod001', name: '智能手机' },
  { id: 'prod002', name: '无线耳机' },
  { id: 'prod003', name: '智能手表' },
  { id: 'prod004', name: '笔记本电脑' },
  // ... 更多产品，例如20个或更多
];

export default function ProductsListPage() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>产品列表</h1>
      <p>点击产品名称查看详情，预加载已禁用以节省资源。</p>
      <ul>
        {products.map((product) => (
          <li key={product.id} style={{ marginBottom: '10px' }}>
            {/* 在此处添加 prefetch={false} 禁用预加载 */}
            <Link href={`/products/${product.id}`} prefetch={false}>
              {product.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

在上述代码中，当ProductsListPage加载时，即使页面上显示了所有产品链接，Next.js也不会自动预加载/products/prod001、/products/prod002等详情页的资源。只有当用户点击了某个产品名称（例如“智能手机”）时，对应的/products/prod001页面及其所需数据才会被请求和加载。

注意事项与最佳实践

• 何时使用 prefetch={false}:
  • 当链接指向的页面需要进行昂贵的外部数据读取（如数据库查询、API调用）时。
  • 当链接指向的页面不经常被用户访问，或者用户访问的概率较低时。
  • 当预加载的数据可能很快失效，导致用户看到旧数据时。
  • 当页面数量庞大，全部预加载会导致显著的网络流量和服务器负载时。
• 何时保留默认预加载 (prefetch={true} 或不设置):
  • 对于核心导航路径、高频访问页面，且其数据加载成本较低时，应保留默认预加载以提供最佳用户体验。
  • 对于静态内容或客户端渲染的页面，预加载通常不会带来额外的服务器负担。
• 性能权衡: 禁用预加载会减少不必要的后端请求和网络流量，从而降低资源消耗和成本。然而，这也意味着当用户点击链接时，目标页面的加载时间可能会略有增加，因为资源是在点击时才开始获取。开发者需要根据具体的业务需求和用户体验目标，在这两者之间进行权衡。
• App Router与Pages Router: prefetch={false}属性在Next.js的App Router和Pages Router中都适用。
• 其他优化策略: 禁用预加载只是优化资源消耗的一种方法。对于更复杂的数据获取场景，还可以结合其他策略，例如：
  • 客户端数据获取: 对于非关键或需要个性化的数据，可以在详情页加载后，通过客户端JavaScript进行数据获取。
  • 数据缓存: 合理利用Next.js的数据缓存机制或自定义缓存策略。
  • 按需加载组件: 使用React.lazy和Suspense按需加载不立即需要的UI组件。

总结

Next.js的预加载功能是提升用户体验的强大工具，但其默认行为在某些场景下可能导致不必要的资源浪费和成本增加。通过在<Link />组件上策略性地使用prefetch={false}，开发者可以精确控制预加载行为，有效避免在父页面加载时对子页面进行不必要的外部数据读取。这有助于优化应用的性能，降低服务器负载和数据费用，从而在用户体验和资源效率之间取得更好的平衡。理解并灵活运用这一特性，是构建高效、可伸缩Next.js应用的关键一环。

以上就是优化Next.js应用：禁用不必要的子页面预加载的详细内容，更多请关注php中文网其它相关文章！