Implementing Mixed Static and Dynamic Rendering with Dynamic Routes

[emfelipe]

TL;DR: Working on a Next.js project with only dynamic routes and mostly static content from CMS, but need some parts to be dynamically rendered (SSR). Trying to implement parallel routes for static (force-static) and dynamic (force-dynamic) rendering within one directory to have mixed rendering, but it doesn't work. Implemented a partially working temporary solution.

Seeking advice on effectively combining static and dynamic rendering in this structure.

Context

I'm working on a large-scale project in Next.js, which is primarily driven by CMS data (including page paths). I'm facing a challenge with implementing a mix of static and dynamic rendering. Here's an overview of the project structure:

app
├── [lang]
│   └── [[...slug]]
│       ├── page.tsx
│       └── layout.tsx

The problem

The majority of the app is statically generated and should only revalidate when there are changes in the CMS. However, a portion of the app needs server-side rendering (SSR) to handle user data and URL parameters, offering unique content for each user.

I'm considering setting up two page.tsx files within parallel routes:

• @ssg/page.tsx with "force-static" for static generation.
• @ssr/page.tsx with "force-dynamic" for dynamic rendering.

The intended structure for these parallel routes is:

app
├── [lang]
│   └── [[...slug]]
│       ├── layout.tsx (decides which parallel route to use - ssg or ssr)
│       ├── @ssg
│       │   └── page.tsx (force-static)
│       └── @ssr
│           └── page.tsx (force-dynamic)

Unfortunately, this setup isn't functioning as expected. Is it not possible to have different "dynamic" options for each route in a parallel structure?

---

Partially working temporary solution

As a temporary solution, I've used the following structure:

app
└── [lang]
    ├── [[...slug]]
    │   ├── page.tsx
    │   └── layout.tsx
    └── ssr
        └── [[...slug]]
            ├── page.tsx (force-dynamic)
            └── layout.tsx (force-static)

In this setup, middleware is used to rewrite requests to show the ssr content (example: /en/abc -> /en/ssr/abc). However, this doesn't seem to cache the layout, and it appears that the layout is regenerated with each page request, inheriting the "dynamic" option from the page.

Mixed Rendering with Dynamic Routes

Could anyone provide guidance on how to achieve this mixed static and dynamic rendering setup in Next.js with completely dynamic routes? Any insights or alternative approaches would be greatly appreciated.

[dogfrogfog]

I'm having literally the same problem. Trying to mix static and dynamic routes under the dynamic slug ([...category]), having errors :)

[facundocapua]

I'm also facing the same situation.

In my case it's an ecommerce website and most of the website can be solved with ISR (home, category, product pages). However, the cart must be dynamic.
My scenario is very similar to NextJS ecommerce demo and I'm seeing the cache header X-Vercel-Cache is a MISS

In my opinion the optimal way should be to have parallel routes to be able static or dynamic independently. Is that even possible? Is the current way the best possible solution all things considered?

[dogfrogfog]

I have tried parallel routes and it doesn't work. Dynamic slot makes static one dynamic as well. But this might work in combo with partial prerendering, which is available on canary (wrap dynamic slot into suspense with the partial prerendering turned on).

[dezmou]

Same issue, beside there are explicitely saying that in the documentation :

I am still unable to make nextjs cache static html file of a route if I need to have some user related data like headers() even if this header call is not in the route

[georgewritescode]

Not sure it is possible. I would be great if rather than a string, the dynamic export was a function that took params & searchParams in as parameters, e.g.
export const dynamic = (params, searchParams) => {....}