Next.js: Pages reload in dev mode when using Link

[paulomunoz]

Hi, I am having an same issue which I believe to be very similar to https://github.com/zeit/next.js/issues/2147. As 2147 is closed, and is related to a previous (much older) version, I am creating a fresh new issue ticket.

In dev mode only, clicking a Link to any page causes a reload of the new page.

To Reproduce:

• Click a <Link> wrapping an <a> to a page

Expected behaviour:

• Page compiles
• You go to that page

Perceived behaviour:

• Page compiles
• New page appears briefly
• Browser reloads the new page's URL - that differs from 2147, which would load the previous page's instead.

System information

• Node 8.11.3
• Next.js 7.0.1
• Express 4.16.4

Seeing this in Chrome. I'm noticing that the server is showing a 200 to the new page's URL, so it's a full page load rather than just re-rendering client side.

-- Further information --

• I am using a custom server (express) and calling nextjs({ dev }).render

[timneutkens]

Please read this comment: https://github.com/zeit/next.js/issues/2833#issuecomment-414919347

You're probably using <Link> incorrectly

[paulomunoz]

Hi @timneutkens, thank you for your reply, actually, I found out the reason for this behaviour is something else completely different. The reason is that I am forcing trailing slashes on all pages, and on DEV mode, that causes the trailing slash to be appended into the on-demand-entries-ping page. For example: /_next/on-demand-entries-ping?page=/faq/. And that's what causes the page refresh.

I managed to confirm this by editing the on-demand-entry-handler.js file, in the function normalizePage I included unixPagePath === "/" ? unixPagePath : unixPagePath.replace(/\/$/, ""), for removing the trailing slash from these requests.
Similarly, on the on-demand-entries-client.js file I added _router.default.pathname === "/" ? _router.default.pathname : _router.default.pathname.replace(/\/$/, "") in the _ping function (inside the switch, case 0).

As, of course, this is not sustainable to keep as a solution from my end, we've solved it using express-urlrewrite, and removing the trailing slash from any request that starts with /_next/on-demand-entries-ping. 👍

Anyway, I know there's a whole discussion about using or not using trailing slashes, and you might not be interested in adding this change to next itself (even though I'd be happy to have it there), but I hope our solution can at least help people with the same problem.

Thanks

--
edit:
In fact, for future reference, if anyone landing here is trying to force trailing slashes on all pages, I'd be happy to share our solution for that.