9

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.

enter image description here

Lucas Silva
  • 1,361
  • 1
  • 13
  • 18

2 Answers2

9

Notice that only express server knows how to process URL of this kind /post/:id, next.js doesn't know it so next.js tries to prefetch unexistent pages (and you may see in the Chrome console output).

You may fix this behaviour easily: just need rewrite your links this way

<Link href={`/post/?id=${show.id}`} as={`/post/${show.id}`} prefetch>

As a result only one query to prefetch post.js page will be executed. enter image description here

This technique is called "route masking" you may read more about in in the Next.js tutorial

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. Without prefetch 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. The prefetch 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.

Andrei Belokopytov
  • 1,063
  • 7
  • 17
  • I was using the "routing masking" before I added the custom server, bu I got 404 error when refreshing the page or accessing the post page directly. So I thought the custom server would solve this problem without the need to mask the route in the client anymore. I'll test it when I get home. Thanks! – Lucas Silva May 07 '19 at 15:14
  • You need to use both these features together – Andrei Belokopytov May 07 '19 at 17:46
  • I remembered why I removed the `as` attribute in the client: when it is present, the prefetch seems to be ignored. No prefetch requests are made, as you can see in the image you uploaded. Where are the 10 requests for each post available? – Lucas Silva May 07 '19 at 22:11
  • From the screenshot I provided you may see that javascript for the `page.js` is preloaded from the frontpage. App won't do 10 requests because you don't have 10 different pages in your app, you only pass different parameters to this page. – Andrei Belokopytov May 07 '19 at 22:39
  • Seems that you are confused with what "preloading" does actually mean in this context. Next.js won't preload data for your page, it won't render html for the page, it will only preload javascript for the page, and when you will open it later this page will be rendered completely in the browser – Andrei Belokopytov May 07 '19 at 22:49
  • Yeah! I was expecting it to make the real request and store the response from each Link with the prefetch attribute. This way when a link is pressed, the only work would be to render the html. – Lucas Silva May 08 '19 at 11:51
3

Don't use this: import Link from "next/link";

Use: import { Link } from './routes'; This is the routes.js configuration file

My routes.js:


const routes = (module.exports = require("next-routes")());
routes.add("/:username", "profilepage");

Using :

import { Link } from './routes';
<Link route={"/my_page"}><a href="my_page">My Page</a></Link>
John Jaider Vanegas
  • 31
  • 3