'How does getStaticProps() render fetched data in the initial HTML file?

According to the Next.js official site, pre-rendered pages first display the pre-rendered HTML and then hydrate it by initializing the React components and making it interactive (adding the event listeners). If this is the case, how is it that the props passed to the component via getStaticProps() (see generic example below) manipulate the initial HTML render? Isn't the React code just running server-side to inject the desired data into the pre-rendered HTML, then running again later to hydrate it?

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

reactjs next.js

Solution 1:^[1]

getStaticProps() works even when there is no "server-side", i.e. when you've next exported your site to just static files. Hence it's not "React code just running server-side".

If you look at a next exported page, you'll see it's something like

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <script src="/_next/client-side-script-stuff-here.js"></script>
</head>
<body>
  <div id="__next" data-reactroot="">
    <h1>Bare rendered HTML here, no scripts...</h1>
  </div>
  <script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"somePageProp":...}}, "__N_SSG":true},"page":"/","query":{},"buildId":"..."}</script>
</body>
</html>

and it's the client-side-script-stuff-here.js in conjunction with the injected __NEXT_DATA__ that has React and Next's machinery hydrate the page.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	AKX

'How does getStaticProps() render fetched data in the initial HTML file?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]