I have a search feature which I would like to have partially load – it works as follows:

• Request comes into the initial page.tsx search server component
  • it fetches the initial search results and passes those search results down to the SearchForm which is a client component
  • The SearchForm is comprised of other interactive client components (input box, filters, and a search results list)
• When the user clicks a filter or inputs something to the input box – a request is made to the server action (hooked up via useFormState) to fetch updated results based on the selected filter state
  • All the input components are client components since they require interactivity

Currently we are using the Next App Router convention of loading.tsx file. On request of the page the server component fetches the results – but it blocks the entire UI (including all the static client component contents.

Question – On initial load, can we load part of the UI (search bar, search filters) without having to wait for the server component to finish its fetch?

• I don’t believe <Suspense> would work here because the fetch is in the server component (I believe to use Suspense we would need to move the fetch to the search results list component – which would not be as efficient since that is a client component and it would require a second round trip to fetch on initial load)