title: Calling the database from getStaticProps in nextjs
body: <p>I was watching a nextjs tutorial and the instructor did something that kind of breaks what I learn in school and left me thinking.</p>
  <p>He did this:</p>
  <pre><code>
  interface FaqProps {
    faq: FaqModel[];
  }
  
  export default function Faq({ faq }: FaqProps) {
    return (
      &lt;div&gt;
        {faq.map((f) =&gt; (
          &lt;ExpansionPanel key={f.id}&gt;
            &lt;ExpansionPanelSummary
              expandIcon={&lt;ExpandMoreIcon /&gt;}
              aria-controls=&quot;panel1a-content&quot;
              id=&quot;panel1a-header&quot;
            &gt;
              &lt;Typography&gt;{f.question}&lt;/Typography&gt;
            &lt;/ExpansionPanelSummary&gt;
            &lt;ExpansionPanelDetails&gt;
              &lt;Typography&gt;{f.answer}&lt;/Typography&gt;
            &lt;/ExpansionPanelDetails&gt;
          &lt;/ExpansionPanel&gt;
        ))}
      &lt;/div&gt;
    );
  }
  
  
  export const getStaticProps: GetStaticProps = async () =&gt; {
    const db = await openDB();
    const faq = await db.all(&quot;SELECT * FROM FAQ ORDER BY createDate DESC&quot;);
    return { props: { faq } };
  };
  
  </code></pre>
  <p>What I understood, because the faq never change, I can load them at build time, calling <code>getStaticProps</code>. Because <code>getStaticProps</code> only happens in the server I can call
  directly to the database.</p>
  <p>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?</p>