title: How do we make Next.js Static Generation getStaticProps() to work on a component level?
body: <p>The following code can do Static Generation of Next.js at build time, when it is fetching data at the Home component level:</p>
  <pre class="lang-js prettyprint-override"><code>export async function getStaticProps() {
    const dataAtBuild = await fetch(
      &quot;https://api.weather.gov/gridpoints/MTR/84,105/forecast&quot;
    ).then((res) =&gt; res.json());
  
    return {
      props: {
        dataAtBuild
      }
    };
  }
  </code></pre>
  <p>Demo: <a href="https://codesandbox.io/s/quirky-zhukovsky-l7wb9?file=/pages/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/quirky-zhukovsky-l7wb9?file=/pages/index.js</a></p>
  <p>and curling its output using</p>
  <pre><code>curl https://l7wb9.sse.codesandbox.io/ | grep -o -E '.{30}Time of.{60}'
  </code></pre>
  <p>can show</p>
  <pre><code>&lt;p&gt;Time of forecast: &lt;!-- --&gt;3/12/2021, 6:00:00 AM
  </code></pre>
  <p>which is generated at build time.</p>
  <p>However, if the code <code>getStaticProps()</code> is moved to the component <code>Weather</code>, then it cannot have the build time data, as in</p>
  <p>Demo: <a href="https://codesandbox.io/s/cool-night-08cz7?file=/pages/Weather.js" rel="nofollow noreferrer">https://codesandbox.io/s/cool-night-08cz7?file=/pages/Weather.js</a></p>
  <p>And curling it:</p>
  <pre><code>curl https://08cz7.sse.codesandbox.io/ | grep -o -E '.{30}Time of.{60}'
  </code></pre>
  <p>can no longer get the static generated content at build time.</p>
  <p>How to make it work at the component level?</p>