loader() or clientLoader()?

[Gn3po4g]

I'm totally confused by loader() and clientLoader() and don't know when to use loader() and when to use clientLoader().

This is my requirement: i want to get an object with id 123 via /api/123 (it may take time, so fallback is needed). If it returns null, display a 404 page, otherwise use another api (like /api/123/info, etc.) to get data and render the rest of the page. I tried HydrateFallback() and <Await/>, but the results were not satisfactory.

What should I do?

[Gn3po4g]

Here's my code:

export async function loader({
  params,
}: LoaderFunctionArgs) {
  const id = params.id
  const info = fetch(`https://example.com/info/${id}`)
    .then(r => r.json() as string)
  return defer({ info: info })
}

export async function clientLoader({
  serverLoader,
}: ClientLoaderFunctionArgs) {
  const { info } = await serverLoader<typeof loader>()
  //other fetch()s
  return info;
}

clientLoader.hydrate = true

export function HydrateFallback() {
  return <div>Loading...</div>
}

Is there a better way?

[spacepolice10]

In your case it is probably not necessary to use clientLoader at all. You should just use defer

Like this

export async function loader({
  params,
}: LoaderFunctionArgs) {
  const id = params.id
  const info = fetch(`https://example.com/info/${id}`)
    .then(r => r.json() as string)
  return defer({ info: info })
}

export default Route() {
 // here is the promise from `defer`
  const loaderData = useLoaderData
  return (
  <Suspense fallback={<div>Loading...</div>}>
    <Await resolve={loaderData.info} errorElement={<div>Error</div>}>
       {/* here is the resolved data */}
       {(info) => <p>{info}</p>}
     <Await>
  </Suspense>
 )
}
 

For reference — Await

[Gn3po4g]

yes, but what if what if there are following requests?

[spacepolice10]

Do you want to show some kind of spinner while request to server is pending & redirect if this request is failed?

[Gn3po4g]

yes because further requests rely on info, it is necessary to make sure it is valid.

[sergiodxa]

Use loader when you want to load data server-side, use clientLoader when you want to load data client-side.

I think most of the time you should go for loader and load data server-side, you won't have to think about CORS, server-to-server requests are typically faster and with more predictable latency, you could use a server-side cache either per user or shared across users, or use an http cache to cache the whole response to one or all users.

The clientLoader is great for things that are only available client-side (e.g. call navigator.getCurrentLocation or localStorage.getItem).

In your case, for the requirement to show a fallback while the fetch to the API is in progress, you can use defer to start sending the response immediately while you still load data, then use Remix's Await and React's Suspense to show the fallback.

You can combine this with more fetches if you need, which could also be deferred or not.

function fetchInfo(id: string) {
  return fetch(`https://example.com/info/${id}`).then(r => r.json() as Info)
}

export async function loader({
  params,
}: LoaderFunctionArgs) {
  const info = fetchInfo(params.id)

  // here you can start loading more data
  const data = await getMoreData()

  return defer({ info, data })
}

Because you await the getMoreData promise, this will not be deferred, so your loader will wait for getMoreData promise to resolve before sending the response, because you started the fetchInfo promise before it may happens that the info is already fetched, or not.

The benefit of this is that you kickstart the fetchInfo as early as possible and then do any blocking data loading, ideally by the time getMoreData is done you have the info but if it's not you will render the fallback.

And if you want, you can remove the await before getMoreData and now that will be deferred too and not block the request at all.

[Gn3po4g]

That's one way. But sometimes getMoreData() needs the data returned by fetchInfo() if the database tables are related. What should we do then?

[sergiodxa]

You can combine them and defer both together:

async function fetchInfoAndGetMoreData(id: string) {
  let info = await fetchInfo(id)
  let moreData = await getMoreData(info)
  return { info, moreData }
}

export async function loader({ params }: LoaderFunctionArgs) {
  const infoAndMoreData = fetchInfoAndGetMoreData(params.id)

  return defer({ infoAndMoreData })
}

Or await the fetchInfo and don't defer that.