How to manage data fetching for frequently created dynamic pages in Next.js?

Question

I am working on a Next.js project (Prisma as ORM) that contains multiple parts where dynamic pages are created often.

Until now, I fetched the data using getStaticProps and getStaticPaths. I realized only now that these are only run at build time and my project only works in development for the moment.

I tried to change the data fetching to useSWR with a fetcher:

...
const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function View() {
    const { data, isLoading, error } = useSWR('/api/survey-data', fetcher);
    const survey = data?.survey;

    if(error) return <div>Failed to load</div>;
    if(isLoading) return <Loading/>;
...

Passing through an api that calls a function that gets the data from the database using Prisma, which causes this error:

Unhandled Runtime Error Error: PrismaClient is unable to be run in the browser

I am unable to find a concrete example on what is the best practice for my use case. How can I fetch my data when Prisma can't run on the client?

Thank you for any insight!

Youssouf Oumar · Accepted Answer · 2023-08-13 15:22:41Z

0

You could stick with getStaticProps and use Incremental Static Regeneration, but if your data is changing that much, you could use getServerSideProps, as an example:

// pages/posts/[slug].js

export default function Post({ post }) {
  return <div>{post.title}</div>;
}

export async function getServerSideProps(context) {
  const post = await prisma.post.findUnique({
    where: {
      id: context.query.slug,
    },
  });
  if (!post) {
    return {
      notFound: true,
    };
  }
  return { props: { post } };
}

getServerSideProps runs on the server, so you will no longer get that Prisma error, and also, because it runs at request time, your user will get the most up-to-date data.

edited Aug 13, 2023 at 15:22

answered Aug 12, 2023 at 16:10

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

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

1 Comment

lynx Over a year ago

That is a way better solution, it solved it thank you !

Collectives™ on Stack Overflow

How to manage data fetching for frequently created dynamic pages in Next.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related