英文:
How can I prevent Next JS from preloading child pages?
问题
我正在使用带有Firebase的Next JS 13应用程序目录。每当加载父页面时，它也加载所有子页面。但问题是，当访问子页面时，它会作为新页面加载。如果不向服务器发送请求，我可能会接受。
假设我有一个包含总共24个产品的productsList页面。在这个页面上，我们显示所有产品。当点击一个项目时，它会重定向到详细页面。因此，在初始页面上，它加载了24次服务器读取，以及额外的24次读取，因为它也读取了详细信息。这使得总共有48次读取。但用户可能只选择一个或一个也不选。但它加载得太多而没有必要。这是一种浪费读取的方式。
当用户选择一个产品时，它会作为新的读取加载。这是一个额外的读取，使得总共有49次读取。
是否有办法防止Next JS在点击之前读取子页面？
英文:
I'm using Next JS 13 app directory with firebase. and whenever it loads a parent page it loads all the children as well. but the issue is that when a child page is visited it loads as new page. if it wasn't requesting to the server i maybe okay with it.
let's say i have productsList page with 24 products total. in this page we display all the products. when an item is clicked it redirects to a detail page. so in the initial page it loads 24 reads to a server, and additional 24 reads b/c it is reading the details as well. so that makes it 48 total reads. but the user might select only one or none. but it loads much without necessity. that is a waste of reads.
and when user selects a product it loads as new read. that is an additional read which makes it 49 read.
is there a way to prevent next js to read the child before it is clicked?
答案1
得分: 0
你可以通过在你的 <Link /> 组件中添加 prefetch={false} 来禁用预取。文档
import Link from 'next/link';
export default function Page() {
return (
<Link href="/dashboard" prefetch={false}>
Dashboard
</Link>
);
}
英文:
You can disable prefetching by adding prefetch={false} to your <Link /> components. Docs
import Link from 'next/link';
export default function Page() {
return (
<Link href="/dashboard" prefetch={false}>
Dashboard
</Link>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论