I have a search feature which I would like to have certain components load more quickly – it works as follows:

• Request initially comes into the search server component page(page.tsx)
  • it fetches the initial search results from the API and passes those results down to the SearchForm child component – 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 since the SearchForm is in fact a form) to fetch updated results based on the selected filter state
  • All the input components are client components since they require interactivity. For example, filters are checkboxes that users can click.

Currently we are using the Next App Router convention of a loading.tsx file. On initial request of the page the server component fetches the results and shows the loader from loading.tsx – but the loader blocks the entire UI (including all the input component contents that we would like to show more instantaneously).

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? So the user inputs load quickly, while the search results list is the only thing that shows a loader.

• To use <Suspense>, I believe we would need to move the fetch to the search results list component, which is a client component. This would necessitate a second round trip to fetch the results on initial load, which is less efficient.
• I also believe the search bar, filters client component need to be client side because they need to be user interactive and use client side hooks useEffect/useState