Can I use the UseEffect hook inside getStaticProps?

Question

I have a doubt.. can I use a useEffect inside getStaticProps?

I'm trying to run a function inside getStaticProps... it works.. but I don't know if it is the recommended thing to do.

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

If not ... what is the best way to run it?

Answer 1

useEffect is used to execute code when component is mounted on client side, and when specific variables change.

getStaticProps is run only once on server side and at build time. You can put your code in the body of the function directly.

And anyway if you do it you will have this error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Answer 2

in next.js data is fetched on the server. This is the key aspect of server side rendering. The main purpose of server-side rendering, is sending populated page, so browser crawlers can analyze the response page and this help better seo for your page. When client makes a request, before sending the response, next.js runs getStaticProps or getServerSideProps.

However useEffect runs on the client-side. The purpose of useEffect, to get data before components mount, so you can use that data inside the component.