Get data by api after DOMContentLoaded

[kei4i]

I use Remix.run with cloudflare pages with functions.
I get some data from airtable.com used cloudflare functions.
my code here https://github.com/kei4i/cl-test-site
LoaderFunction await promise from airtable before DOMContentLoaded that busy server answer on 500ms from 200ms to 700-800ms. It's critical for me.
example:

#../app/routes/index.tsx
...
#import component
import VacanciesList from "~/components/vacancies";
...
export const loader: LoaderFunction = async (context) => {
  const baseUrl = new URL(context.request.url);
  return await fetch(`${baseUrl.origin}/api/airtable/getTable`, {
    method: "GET"
  });
}

export default function Index() {
  const vacanciesList = JSON.parse(useLoaderData()).records;
  return (
      <div>
         ...base structure...
         {vacanciesList ? <VacanciesList data={vacanciesList} /> : ''}
      </div>
}

How to get data for components props after DOMContentLoaded?

[shamsup]

create a separate resource route for the airtable data so it isn't used in server rendering, then use useFetcher().load(airtableRoute) inside a useEffect hook in your component to load the data after the document hydrates.

// app/routes/index.tsx
export default function Index() {
  let fetcher = useFetcher();
  useEffect(() => {
    fetcher.load('/airtable/getTable');
  }, [])
  return (
    <div>
      {fetcher.data ? <VacanciesList data={fetcher.data.records} /> : null}
    </div>
  )
}

// app/routes/airtable.getTable.ts
export const loader = ({request}) => {
  const baseUrl = new URL(context.request.url);
  return await fetch(`${baseUrl.origin}/api/airtable/getTable`, {
    method: "GET"
  });
}

[shamsup]

This would be my quick solution from #1849 (reply in thread)

My quick solution would be to split it into a resource route and load it from the client side, but my "investment" solution would be to speed up that API request by either improving the API response time if I own the API, or through server-side caching if I don't own the API.

[kei4i]

Thanks for the solution and fast answer. It's really works.

[ccssmnn]

Your users will see the data faster this way, even though the initial render takes longer. When fetching data on the client, you have to wait until the JS is parsed until the request to Airtable can start. This is a "network waterfall".

If it is critical to have a fast initial response with no data, then @shamsup has the answer.

[shamsup]

My quick solution would be to split it into a resource route and load it from the client side, but my "investment" solution would be to speed up that API request by either improving the API response time if I own the API, or through server-side caching if I don't own the API.

[ccssmnn]

Exactly

In general, we should measure the time, until a user sees an interface with populated data. Fetching data on the client won't be faster here. What is it worth to have a fast response with basically no data?