Avoiding aditional requests on dynamic path pages that are client components

[benjavicente]

Problem

I have a page like this:

// /example/[id]/page.tsx
"use client";

export default function Page() {
  return <>{/* a static component that reads from a context passed from the layout */}</>
}

Event thought the page represents a static component, the request is made to each id, like/example/1?_rsc, /example/2?_rsc, ...

So for each id the user navigates, a new request would be made to fetch the RSC payload.

This is inefficient compared with pages dir, where the request would be made once to _next/static/chunks/pages/example/[id]-[hash].js, so a single request is made for each page on that dinamic path (considering that there isn't any data loading on the page itself).

Is there a way to get this pages dir behavior on the app dir?

Example and relevant code

	Repo	Preview
Pages dir	https://github.com/benjavicente/nextjs-pages-dir-single-request/blob/main/src/pages/example/%5Bid%5D.tsx	https://nextjs-pages-dir-single-request.vercel.app/example/1
App dir	https://github.com/benjavicente/nextjs-app-dir-single-request/blob/main/src/app/example/%5Bid%5D/page.tsx	https://nextjs-app-dir-single-request.vercel.app/example/1

Note the speed on navigation of pages dir vs app dir, since there aren't any additional request after the page loads, vs the app dir that does a request on navigation.

Use case

I have multiple small pages that don't load a lot of data. It's “cheaper” to load the entire dataset on the layout, and consume the corresponding data with React Context.

Something like this, where the layout is a server component, and both pages are client components.

layout.tsx    # <Provider value={await  db.collect()} />
page.tsx      # data = useContext(Provider)
[id]/page.tsx # data = useContext(Provider).filter(v.id = useParams().id) ?? notfound()

The idea is to make navigation between page.tsx and all [id]/page.tsx instant.

[icyJoseph]

Hi,

Yeah, as far as I know, the Next.js is working on some improvements, but you can also do this:

• https://stackblitz.com/edit/github-clgjuyxe?file=src%2Fapp%2Fexample%2F[id]%2Fpage.tsx

In short, it is not ideal because useParams misbehaves, but usePathname works fine.

• https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api