从 nextjs 中的 getStaticProps 调用数据库

Question

我正在看一个 nextjs 教程，导师做了一些事情，打破了我在学校学到的东西，让我陷入了思考。

他这样做了：

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 } };
};

我的理解是，因为常见问题永远不会改变，我可以在构建时加载它们，调用getStaticProps。因为getStaticProps 只发生在我可以调用的服务器中 直接进入数据库。

那么，可以这样做而不是对服务器进行 fetch 调用吗？ 这里的模式不是被打破了吗？ 这是 Web 开发的方向还是只是这个人所做的事情？

Answer 1

直接引用the Next.js docs的一句话：

直接编写服务端代码

请注意，getStaticProps 仅在服务器端运行。它永远不会在客户端运行。它甚至不会包含在浏览器的 JS 包中。这意味着您可以编写诸如直接数据库查询之类的代码，而无需将它们发送到浏览器。您不应该从 getStaticProps 获取 API 路由 — 相反，您可以直接在 getStaticProps 中编写服务器端代码。

我认为已经很清楚地表明，这种模式不仅是允许的，而且是鼓励的。 getStaticProps was introduced in Next.js 9.3 and is recommended over getInitialProps 当构建时的静态生成优于运行时的服务器端渲染时。与getStaticProps 相比，getInitialProps 函数 与客户端代码捆绑在一起，可以 潜在地在浏览器中运行。