Implementing Mixed Static and Dynamic Rendering with Dynamic Routes #59820
Replies: 4 comments 1 reply
-
I'm having literally the same problem. Trying to mix static and dynamic routes under the dynamic slug ([...category]), having errors :) |
Beta Was this translation helpful? Give feedback.
-
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. 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? |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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:
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:
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:
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.
Beta Was this translation helpful? Give feedback.
All reactions