Next.js: The inconsistency of Router between V1 and V2

[Huxpro]

TL;DR. Next V2 will switch entire page instead of re-rendering current page when routeChange, which is inconsistent with Next V1.

I have elaborated this issue under https://github.com/zeit/nextgram/issues/8.

[arunoda]

This is something we need to investigate.
I'll use nextgram for this.

[Huxpro]

@arunoda Nice.

FWIW, I have forked a [email protected] version of nextgram at https://github.com/Huxpro/nextgram/tree/next-2.0. Which have updated package.json and have migrated from next/css to styled-jsx, should reduce some time.

[arunoda]

Okay. Here's what going on here.
On nextgram it uses a .push() method of props. That API's was wrong and we re-wrote it.

By going through the nextgram, it seems like we need to bring back the functionality of that API again. But, I don't know whether it's a good idea to bring it back?

/ cc @rauchg @nkzawa

Basically, here's what's happening in that API.

• We change the URL of the route via push state
• But it doesn't render the component assign to that URL
• But render the current component
• And pass query params of the current URL into that.

I smell bad for such an API.

Let's see how to fix this in a different way.

[arunoda]

Okay, here next 2 style version of nextgram.

Live: https://nextgram2.now.sh/
Repo : https://github.com/arunoda/nextgram
PR: https://github.com/zeit/nextgram/pull/9

[nkzawa]

@arunoda I think it should keep the original behavior which shows a modal over the list when you click a link, but doesn't show the list on SSR.

[arunoda]

@nkzawa okay. That's possible. Let's do that.

[arunoda]

Done.

[arunoda]

@Huxpro could you send me a PR with the updated styled-jsx syntax.

[rauchg]

@huxpro can you confirm the API now behaves as intended?

[nkzawa]

Please check https://github.com/zeit/nextgram/pull/9

[Huxpro]

@nkzawa @arunoda @rauchg

Thx guys I found @nkzawa have updated style-jsx part. So basically @arunoda uses push(url, as=url) to achieve 'universal routing' without changing code in Next, kinda cheating on <Page> with a crafted url. How clever! Glad to see such flexibility.

so I just removed all react imports to make it more 'next smell' since react is a implementation details, and replaced imperatively router calls with <Link>. Please check out https://github.com/zeit/nextgram/pull/11

BTW, I am still concerning about how to do nestedly or partially re-rendering between Page to Page in Next. Well, that is an enhancement and not related to this issue.

[rauchg]

Yep as is one of the neatest things out there. Massive simplification

[arunoda]

BTW: I need to thank @nkzawa for showing me this simplest solution. I was using a custom server, but it's not needed in this way.