Next.js rendering strategy for unique dynamic route

Question

I want to make the best use of the server where my Next.js web app will be hosted, even if it is at the cost of the APIs where users get informations.

So I was wondering what was the best approach to render uniques dynamic routes, for example: /post/[postId] .

I want to avoid SSR and have static HTML files hydrated by APIs as often as possible, as I've made for /home/[page] where I've done some ISR to avoid frequent rerenders like this:

export async function getStaticProps(context = {}) { 
    return {
        props: {},
        revalidate: 120, //cache page for 120s
      }
}
// No prerender of paths <=> "paths: []"
export async function getStaticPaths(context = {}) { 
    return {
    paths: [],
      fallback: 'blocking'
    }
}

The problem for /post/[postId] being that postId is a unique identifier so caching the page has no real interest and prerendering is not possible.

The thing is /post/id1 and /post/id2 have no real HTML differences because the [postId] property is only used in a useEffect to fetch data so a SSR is a complete waste of server ressources..

So the question is what could be a way to optimise Next.js rendering uniques dynamics routes? Any idea is welcomed !

Answer 1

I guess one way is to use dynamic imports. This will decrease your bundle size and introduce lazy loading for your JavaScript code. One note with static HTML pages is that they are small in size so not a lot of optimization is needed.

const SomePage = dynamic(
  () => import('@modules/some-page/index'),
  {
    ssr: false,
  }
);