我可以在 getStaticProps 中使用 UseEffect 挂钩吗？

Posted 2023-02-22

【中文标题】我可以在 getStaticProps 中使用 UseEffect 挂钩吗？

【英文标题】：Can I use the UseEffect hook inside getStaticProps?

【发布时间】：2021-05-31 12:07:50

【问题描述】：

我有一个疑问..我可以在 getStaticProps 中使用 useEffect 吗？

我正在尝试在 getStaticProps 中运行一个函数……它可以工作……但我不知道这是否是推荐的做法。

  useEffect(() => 
    remarkBody()
  , [body, blogPostCollection])

如果不是...运行它的最佳方法是什么？

【参考方案1】：

useEffect 用于在客户端挂载组件时以及特定变量发生变化时执行代码。

getStaticProps 在服务器端和构建时只运行一次。您可以将代码直接放在函数体中。

无论如何，如果你这样做，你会遇到这个错误：

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。

【参考方案2】：

在 next.js 中，数据是在服务器上获取的。这是服务器端渲染的关键方面。服务器端渲染的主要目的是发送填充页面，以便浏览器爬虫可以分析响应页面，这有助于更好地为您的页面进行 seo。当客户端发出请求时，在发送响应之前，next.js 会运行 getStaticProps 或 getServerSideProps。

但是useEffect 在客户端运行。 useEffect 的目的是在组件挂载之前获取数据，以便您可以在组件内部使用该数据。