Modal by parallel routing on slow connection not working. Clicking on Link before hydration causes full reload instead of showing modal about next.js HOT 1 CLOSED

Hi @a-k-kord --

As you noted, custom Link interactivity relies on JavaScript, which means React has to hydrate first. This means that even a regular Link click will trigger an MPA navigation until hydration occurs.

Which means that either making a modal with parallel routing is a bad idea

I'm not sure I necessarily agree with this, since I suspect that being able to click the link and view the final page data is better than clicking the link and nothing happening. But nonetheless, this is still something you can control in your app.

One example of a way to deal with this is to disable SSR on the cards so that it waits for hydration, and specify a Loading component to use in the meantime. Under the hood, this makes use of React.lazy and Suspense to render a fallback UI until hydration. eg:

const LazyCardWithLink = dynamic(() => import("../CardWithLink"), {
  ssr: false,
  loading() {
    const id = React.useContext(CardIdContext);

    return (
      <Image
        width={200}
        height={200}
        src={`https://picsum.photos/id/${value}/200/300`}
        alt="alt"
        className="rounded-lg shadow-lg"
        priority
      />
    );
  },
});

This would render the Image and after hydration, it'll swap to CardWithLink which is essentially the image wrapped in a Link. But you could also choose to render a more generic fallback instead.

from next.js.