# Nextjs App Router full page reload with dynamic nested routes

**URL:** <https://community.prismic.io/t/nextjs-app-router-full-page-reload-with-dynamic-nested-routes/14049>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [September 7, 2023, 8:18pm UTC](https://community.prismic.io/t/nextjs-app-router-full-page-reload-with-dynamic-nested-routes/14049 "2023-09-07T20:18:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jgunderson](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jgunderson](https://community.prismic.io/u/jgunderson)\
**Post date:** [September 7, 2023, 8:18pm UTC](https://community.prismic.io/t/nextjs-app-router-full-page-reload-with-dynamic-nested-routes/14049/1 "2023-09-07T20:18:33Z")

</div>

We're encountering an issue where some nested dynamic pages are doing a full reload when they are accessed via internal links. This is occurring on the following App directory structure:  
 ![Screenshot 2023-09-07 at 2.05.12 PM](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/7/78f3b9bc236a98dbefb30fde7615077df7c2ada8.png)

These routes would be something like "/stay/campgrounds/campground-name" or "/stay/guest-ranches-lodges/lodge-name". Any route accessed within "/stay" does a full page load instead of only updating content.

Another set of nested dynamic pages works as expected with the following structure:  
 ![Screenshot 2023-09-07 at 2.05.37 PM](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/e/e1f4922f2c00864157d5447765087eeec8ac122f.png)

Our routes as defined in prismicio.js:

```auto
const routes = [
  {
    type: "homepage",
    path: "/",
  },
  {
    type: "page",
    path: "/:uid",
  },
  {
    type: "stay_page",
    resolvers: {
      category: "stay_category",
    },
    path: "/stay/:category/:uid",
  },
  {
    type: "explore_page",
    resolvers: {
      category: "category",
    },
    path: "/explore/:category/:uid",
  },
  {
    type: "play_page",
    path: "/play/:uid",
  },
  {
    type: "stay_category_page",
    path: "/stay/:uid",
  },
  {
    type: "outdoor_recreation_page",
    path: "/play/outdoor-recreation/:uid",
  },
];

```

Here is our [category] \> page.js query:

```auto
import { createClient } from "@/prismicio";
import { SliceZone } from '@prismicio/react';
import { components } from '@/slices';
import StayCategoryPageContent from "@/components/StayPages/StayCategoryPageContent/StayCategoryPageContent";

export default async function Page({ params }) {
  const client = createClient();

  const page = await client.getByUID("stay_category_page", params.category);
  const stay_pages = await client.getAllByType('stay_page')

  const stayListings = Array.from(
    new Set(stay_pages.filter((item) => item.data.stay_category.uid === params.category))
  )

  return (
    <main>
      <StayCategoryPageContent page={page} stayListings={stayListings} />
      <SliceZone slices={page.data.slices} components={components} />
    </main>
  )
}

export async function generateStaticParams() {
  const client = createClient()

  const pages = await client.getAllByType('stay_category_page')
 
  return pages.map((page) => {
    return {
      uid: page.uid,
   }
  })
}

```

You can view the dev site here: [https://yellowstone-teton.vercel.app/stay/guest-ranches-lodges](https://yellowstone-teton.vercel.app/stay/guest-ranches-lodges) and notice that other pages do not exhibit the same behavior: [https://yellowstone-teton.vercel.app/play/outdoor-recreation/hiking](https://yellowstone-teton.vercel.app/play/outdoor-recreation/hiking)

Does anyone know what is causing these nested routes to do a full page load while others are not? Is there an issue with dynamic nested routes in our case?

---

<div class="post-metadata">

**Author:** ![jgunderson](https://avatars.discourse-cdn.com/v4/letter/j/ebca7d/32.png) [@jgunderson](https://community.prismic.io/u/jgunderson)\
**Post date:** [September 8, 2023, 10:25pm UTC](https://community.prismic.io/t/nextjs-app-router-full-page-reload-with-dynamic-nested-routes/14049/3 "2023-09-08T22:25:29Z")

</div>

If anyone else runs into this issue, we fixed the problem by using catch-all paths as outlined here: [Prismic Catchall Paths](https://prismic.io/docs/define-paths-nextjs#catchall-paths) and deployed to Vercel.

---

<div class="post-metadata">

**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\
**Post date:** [September 11, 2023, 8:47am UTC](https://community.prismic.io/t/nextjs-app-router-full-page-reload-with-dynamic-nested-routes/14049/4 "2023-09-11T08:47:40Z")

</div>

I'm glad to hear that you were able to sort this out. Let us know if you run into any other issues.