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 !

If the data is fetched from the client-side why use getStaticPaths/getStaticProps at all? You can have a dynamic route without any data fetching method. — juliomalves
– juliomalves, Commented Jun 25, 2022 at 15:53
Ahah i've been missing that thanks. The thing is would want to have a getStaticPaths to statically generate i18n routes. Any workaround ? — JeanJacquesGourdin
– JeanJacquesGourdin, Commented Jun 25, 2022 at 18:01

Bojan Tomić · Accepted Answer · 2022-06-22 09:57:19Z

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,
  }
);

answered Jun 22, 2022 at 9:57

Bojan Tomić

1,11512 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JeanJacquesGourdin Over a year ago

Thank you ! So if I understand well this would resemble a classic react app by letting the client make the render ? I can prerender the HTML page with a dynamic route this way ?!

Bojan Tomić Over a year ago

No problem. Well React app is bundled on the server and sent to the client, but this would, while routing load requested routes only when requested not before. That's where you can save some bandwidth.

Collectives™ on Stack Overflow

Next.js rendering strategy for unique dynamic route

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related