Slow deployment with dynamic pages.

Issues
1

I’m facing an issue where after implementing dynamic pages in my project the deployed codegen site became really slow and doesn’t properly load any (including static) pages. The url updates “mypage.com/xyz/” but the content doesn’t update until a full reload is done in the browser.
Should i use the [[…catchall]].tsx file mentioned in the docs?
If so, should the [slug] paths go inside the brackets like this: const slugs = await getProductSlugs([“metadata”, “xyz/test”]) ?
Thank you.

2

This is how it looks in the performance monitor
I think theres a rendering bug with the setState call where its causing a lot of re-renders

dev.png
dev.png3429×1701 1.12 MB

3

When you use dynamic pages, if you are depending on SSR, then you should be sure to update your getStaticPaths() to include the paths for all the slugs you use for your dynamic page. For example, it might look like…

export const getStaticPaths: GetStaticPaths = async () => {
  const pageModules = await PLASMIC.fetchPages();
  const productSlugs = await getProductSlugs();

  return {
    paths: [
      ...pageModules.map((mod) => ({
        params: {
          catchall: mod.path.substring(1).split("/"),
        },
      })),
      ...productSlugs.map((slug: any) => ({
        params: {
          catchall: ["product", slug]
        }
      }))
    ],
    fallback: "blocking",
  };
}