Header/Footer randomly disappears in App Router layout.

[wajidafridi]

Summary

I’m using Next.js 15 App Router and noticed that Header/Footer, which is defined in the root layout.jsx, sometimes disappears randomly when navigating between certain authenticated routes like /user, /user/wishlist, /user/my-orders, etc.

This happens very rarely (maybe 1 in 50 navigations), but when it does:

• The Header/Footer completely vanishes from the DOM.
• It is not present in DevTools or HTML.
• There is no console error, no server log, and Inspect Element confirms it's not in the HTML.
• On refresh, the footer reappears correctly.

Additional information

-The root layout.jsx is a Server Component and includes <Header /> and <Footer />.
-APIs are not available at build time, so I rely on revalidate to update all pages and layout data post-build via ISR.
-I previously used a 'use client' wrapper component (UserClient) inside user/layout.jsx, which I now moved to individual page files to avoid breaking the layout tree.
-I removed all nested layout.jsx files (e.g. in /user) to avoid breaking layout consistency.
-Still, the issue persists occasionally during fast client-side navigation between the /user/* routes, and /cart/ Routes.
-I do not use any parallel routes.

App Structure:
app/
├─ [locale]/
│  ├─ layout.jsx       // Root layout with <Header />, <Footer />
│  ├─ page.jsx 
|  └─cart/
│  |  └─ page.jsx   
│  └─ user/
│     ├─ page.jsx      
│     ├─ wishlist/
│     │   └─ page.jsx 
│     └─ my-orders/
│         └─ page.jsx

Example

https://github.com/wajidafridi/nextjs-header-footer-disappears-app-router

[SametDulger]

Hi @wajidafridi,

Thanks for the details and repo link. The header/footer disappearing randomly during navigation is likely due to how Next.js App Router handles streaming and async data fetching.

Possible causes:

Suspense or data fetching race conditions causing parts of layout to temporarily not render.

Streaming rendering quirks in React 18 that can omit layout content briefly.

Cache invalidation or ISR causing incomplete renders.

Hydration issues from client/server component boundaries.

Suggestions:

Wrap layout content in Suspense with a fallback that always shows header/footer placeholders.

Make header/footer static or load their data early to avoid suspension.

Avoid dynamic keys/props on header/footer that trigger remounts.

Test disabling ISR/revalidate to isolate caching effects.

Check for subtle hydration warnings.

If issue persists, open a minimal repro issue for Next.js team.

Your repo will help investigate. Let me know if you want help with that.