Next.js Discord

Discord Forum

Do not fetch everything when changing url

Unanswered
Florida White posted this in #help-forum
Open in Discord
Florida WhiteOP
I have an application with two pages /page1 and /page2 and I navigate between them using router.push().
Both of the pages have some common components (header, footer, navigation sidebar, ...)
I see that every thime I change page, hydrateRoot() is called and every component (the "common" ones too) fetches data, renders, calls its mounting hooks, ...
This slows down the performance of my app
Is there a way to avoid this for "common" components too?
And have a render only for "specific" components?

Thanks

14 Replies

Schneider’s Smooth-fronted Caiman
You can create a layout.tsx shared for page1 and page2. It will be rendered once and persisted between navigations. It can't get any searchParams though https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates
Florida WhiteOP
Thank you @Schneider’s Smooth-fronted Caiman .
Is this a new feature of Next.js 14?
I've just complete the migration from Next.js 13 and I was not aware of this
Is there any recommended approach in case some part of the "common" components (in the layout, I think) should be visibile or invisible in some of the pages?
Schneider’s Smooth-fronted Caiman
It's the feature of the app router. You can add layouts to the root, subsegments, even a single page. Whatever works for you
Florida WhiteOP
But, is it ok (from performance point of view) if I show/hide some parts of layout (i.e., common components)? or is there another approach?
ᴉuɐpɹɐɐ
Both of the pages have some common components (header, footer, navigation sidebar, ...)
Did you put header footer navigation sidebar in a layout.tsx?
But, is it ok (from performance point of view) if I show/hide some parts of layout (i.e., common components)? or is there another approach?
Its okay, you can use client component in layout.js to show/hide components
Florida WhiteOP
Only to be sure, this behavior is specific to App Router, right?
As far as I understand, in the "old" Page Router the layouts are not rendered only once
And my application comes from Next.js 12, and uses Page Router. So I think I should migrate to App Router, first
might want to check the official migration guide for that