Nextjs App Router full page reload with dynamic nested routes

Developing with Prismic
1

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

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

Our routes as defined in prismicio.js:

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:

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 and notice that other pages do not exhibit the same behavior: 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?

3

If anyone else runs into this issue, we fixed the problem by using catch-all paths as outlined here: Prismic Catchall Paths and deployed to Vercel.

1 Like
4

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