I'm new to next.js and as a first step, before I start developing the actual app, I'm following the docs to learn the basics, and right now, I'm struggled trying to get the prefetch working, since all the preloaded requests are returning 404 error.
So what's wrong with my code? How can I solve this problem?
The demo repository is on github.
请注意,只有
express
服务器知道如何处理此类URL/post/:id
,next.js
但不知道,因此会next.js
尝试预取不存在的页面(您可能会在Chrome控制台输出中看到)。您可以轻松地解决此问题:只需以这种方式重写链接
结果,
post.js
将仅执行一个查询以预取页面。这种技术称为“路由屏蔽”,您可以在Next.js教程中了解更多信息。
An update: It seems that the question is more about how
prefetch
feature actually works in Next.js so I will try to explain it. Withoutprefetch
prop on the Link Next.js will load related chunk on demand (when a user clicks link) so it will cause a small delay to load and parse javascript. Theprefetch
prop allows you to remove this delay because javascript will be loaded as soon as possible after application start. In both cases new page will be rendered in the browser like in a usual React app.