2022-10-31

Is this the right use-case for on demand ISR in Next.js?

So I am building an app that lets you search for a word and gives you the word in other languages. A clone to this site

I just tried Next.js On Demand ISR feature and I did that because fetching from the client using API routes was too slow in my app.

I also thought of generating static pages but that would cause hundreds of thousands of static pages.

Here's how my code looks like now:

export async function getStaticPaths() {
  console.log("[Next.js] Running getStaticPaths for word page");
  return {
    paths: [{ params: { word: "1" } }, { params: { word: "2" } }],
    fallback: "blocking",
  };
}

export async function getStaticProps({ params }: GetStaticPropsContext) {
  const db = await getContainer();

  const { resources } = await db.items
    .query(
      `SELECT c.language, c.Translation, c.id FROM c WHERE c.PrimaryWord='${params?.word}'`
    )
    .fetchAll();

  return {
    props: {
      resources,
    },
  };
}

I saw a difference in the performance using this approach instead of normal API routes and client-side fetching that took so long.

But I don't know if this is the right use-case of on-demand ISR and if this is the right approach to it or not.



No comments:

Post a Comment