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仅在服务器上发生，所以我可以打电话给直接到数据库。

那么，可以这样做而不是对服务器进行访存调用吗？模式在这里不被破坏吗？这是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函数与客户端代码捆绑在一起，并且可能在浏览器中运行。

从nextjs中的getStaticProps调用数据库

1 个答案:

直接编写服务器端代码