1

I was watching a nextjs tutorial and the instructor did something that kind of breaks what I learn in school and left me thinking.

He did this:


interface FaqProps {
  faq: FaqModel[];
}

export default function Faq({ faq }: FaqProps) {
  return (
    <div>
      {faq.map((f) => (
        <ExpansionPanel key={f.id}>
          <ExpansionPanelSummary
            expandIcon={<ExpandMoreIcon />}
            aria-controls="panel1a-content"
            id="panel1a-header"
          >
            <Typography>{f.question}</Typography>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <Typography>{f.answer}</Typography>
          </ExpansionPanelDetails>
        </ExpansionPanel>
      ))}
    </div>
  );
}


export const getStaticProps: GetStaticProps = async () => {
  const db = await openDB();
  const faq = await db.all("SELECT * FROM FAQ ORDER BY createDate DESC");
  return { props: { faq } };
};

What I understood, because the faq never change, I can load them at build time, calling getStaticProps. Because getStaticProps only happens in the server I can call directly to the database.

So, is okay to do this instead of doing a fetch call to the server? Aren't pattern being broken here? Is this where the web development is going or is just something this person does?

3

2 Answers 2

4

To cite a quote directly from the Next.js docs:

Write server-side code directly

Note that getStaticProps runs only on the server-side. It will never be run on the client-side. It won’t even be included in the JS bundle for the browser. That means you can write code such as direct database queries without them being sent to browsers. You should not fetch an API route from getStaticProps — instead, you can write the server-side code directly in getStaticProps.

I think it's made pretty clear that this pattern is not only allowed, but encouraged. getStaticProps was introduced in Next.js 9.3 and is recommended over getInitialProps when static generation at build-time is preferred over server-side rendering at run-time. In contrast with getStaticProps, the getInitialProps function is bundled with the client-side code and can potentially run in the browser.

3
  • getStaticProps is only executed once at build time is that correct? What is then the point in making a database query if I only get the data at build time and never again after that? Or am I missing something completely here?
    – Mrob
    Jan 26, 2021 at 15:11
  • 1
    @Mirco if your database has tables that aren't expected to change often (even if it's as often as once an hour), I believe that when developing with Next.js the typical practice is to rebuild the static pages by restarting the server with a cron job or other timed service. While it seems like a lot of work upfront, the purpose is to decrease the TTFB metric as low as possible for what can practically be considered static content. Jan 26, 2021 at 15:30
  • I see. Thank you for your detailed answer
    – Mrob
    Jan 26, 2021 at 15:50
0

For the future reader, regarding the point of creating static pages with getStaticProps and then rebuilding to update the props, I would like to add that along with the props object, you can return revalidate: 60 (with 60 being just an example here) which will re-evaluate the code in getStaticProps every 60 seconds. If you expect that your data will not change in the next hour, you can revalidate in 3600 seconds or accordingly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.