如何阻止Next JS 13预加载以降低Firebase使用成本？

1. 禁用单个Link组件的预加载 #

直接给目标Link组件添加prefetch={false}属性，即可关闭该链接的预加载逻辑，避免触发不必要的Firestore请求。示例代码：

import Link from 'next/link';

<Link href="/target-page" prefetch={false}>
  跳转至目标页
</Link>

2. 全局禁用所有预加载 #

如果需要统一关闭所有Link的预加载行为，可以在next.config.js中添加配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // 全局关闭预加载优先级，等价于禁用所有自动预加载
    prefetchPriority: 'off',
  },
};

module.exports = nextConfig;

3. 按需触发预加载（平衡体验与成本） #

如果想保留部分场景的预加载优化，同时避免无意义请求，可以通过状态动态控制prefetch属性。比如仅在用户鼠标悬停链接时启用预加载：

import { useState } from 'react';
import Link from 'next/link';

const CustomLink = ({ href, children }) => {
  const [enablePrefetch, setEnablePrefetch] = useState(false);

  return (
    <Link
      href={href}
      prefetch={enablePrefetch}
      onMouseEnter={() => setEnablePrefetch(true)}
      onMouseLeave={() => setEnablePrefetch(false)}
    >
      {children}
    </Link>
  );
};

export default CustomLink;

4. 解决标签页切换的重复预加载问题 #

针对切换标签页返回时的重复预加载触发，可以结合页面可见性事件控制请求逻辑。在页面组件中添加监听：

import { useEffect } from 'react';

useEffect(() => {
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') {
      // 可在此重置预加载相关状态，避免重复触发请求
    }
  };

  document.addEventListener('visibilitychange', handleVisibilityChange);
  return () => {
    document.removeEventListener('visibilitychange', handleVisibilityChange);
  };
}, []);

配合局部或全局的prefetch={false}设置，从根源减少这类无意义的Firebase调用。

内容的提问来源于stack exchange，提问作者SG_stack