This may be a super-basic question, but I can’t find the answer here or in the Next.js docs.

I have a server-side page component that looks like this:

const Home: React.FC = async () => {
  const searchData = await getSearchData();
  // getSearchData() will eventually fetch(), but for the moment it's just returning
  // some static data to simulate the fetch.

  return (
    <main>
      <SearchForm {...searchData} />
    </main>
  );
};

export default Home;

What I want to happen is for the server to send the Home component down to the client after getSearchData() returns (which will be nearly instantaneous). Instead, I get an empty SearchForm rendered, then searchData gets populated, then SearchForm is re-rendered. So somehow it seems like Next is executing my return statement and sending the component down to the client before getSearchData() returns. What’s going on here, and what are my options to adjust the behavior?

Thanks!