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?
getStaticProps
. This includes reading from the filesystem or a database."