Next.js Discord

Discord Forum

Pages aren't reconciling on routing

Unanswered
Morelet’s Crocodile posted this in #help-forum
Open in Discord
Morelet’s CrocodileOP
Hey folks! I'm struggling to figure out why my pages aren't reconiling on routing.

I've got a minimal reproduction on a fresh Next.js app.
Creating the file app/[slug]/page.tsx

import Link from "next/link";

export default function Page({ params }: { params: { slug: string } }) {
  return <div key="d">
    slug: {params.slug}
    <br />

    <input type="text" key="i" />
    <br />
    <Link href="/foo">foo</Link>
    <br />
    <Link href="/bar">bar</Link>
  </div>
}


I would expect (and observe with react-router) the contents of the <input> element preserved between changed routes. But with Next.js it is invalidated. Am I holding something wrong?

14 Replies

Morelet’s CrocodileOP
to sanity check my claim about react-router:
James4u
@Morelet’s Crocodile that's resonable thing. to keep your input value, you can store the value in the url or in the redux in client side
Morelet’s CrocodileOP
no can do, I need total page reconciliation
is there any reason why this is happening though?
James4u
why do you think it should keep the input value?
Morelet’s CrocodileOP
because this is core React behaviour - if tree t and tree t' are identical, the HTML elements (and their state) are preserved (reconciled) at best effort
I feel for server components they are remounted instead of rerendered
@joulev Does reconciliation work fine for client components?
Morelet’s CrocodileOP
I slapped a 'use client' at the top and got nothing
@Morelet’s Crocodile I slapped a `'use client'` at the top and got nothing
joulev
yeah just checked and found that page components are remounted on navigation. that's why layouts exist: they aren't remounted.

in this structure if you put the <input> inside the layout file it works.
Morelet’s CrocodileOP
@joulev i assume that means that the layout can't be dynamic dependent on [slug]
joulev
server-side, no. but client-side it still can use usePathname and useParams perfectly fine – which is equivalent to the pages router where everything is client components.

if a server component relies on the value of slug, it has to be recomputed entirely when slug changes, hence remounted. server components don't rerender.
Morelet’s CrocodileOP
fascinating - will give this a shot
thanks for all your help!