SPA-like Instant Navigation with Deferred Data Loading

[kkatsi]

Hi,

I'm working on a web app want the initial load to be fully server-side rendered (SSR) but to offer a smoother experience for subsequent navigations using <Link />. My goal is to provide instant route changes and display a loader while data is being fetched, preventing the UI from blocking the navigation until the data resolves.

Here’s a simplified version of my approach:

const TTL_IN_SECONDS = 60;

export async function loader({ params }: LoaderFunctionArgs) {
  const response = await fetchData(params.id);
  return json(response);
}

export async function clientLoader({ request, serverLoader }: ClientLoaderFunctionArgs) {
  const cacheKey = generateCacheKey(request);
  
  const cacheEntry = cache.get(cacheKey);
  if (cacheEntry && !isPast(cacheEntry.expDate)) {
    return cacheEntry.data;
  }

  const expDate = add(new Date(), { seconds: TTL_IN_SECONDS });
  const serverData = serverLoader().then((res) => {
    cache.set(cacheKey, { data: res, expDate });
    return res;
  });

  return defer({ response: serverData });
}

export default function Page() {
  const data = useLoaderData<typeof loader>();

  if (data.response) {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <Await resolve={data.response}>
          {(res) => <Component data={res} />}
        </Await>
      </Suspense>
    );
  }

  return <Component data={data} />;
}

Requirements

Initial Load: SSR (The initial page load should always render from the server)
Subsequent Navigations: Client-Side (After the initial page load, navigation via should feel instant, without waiting for the server to resolve the data. If data is still loading, I want to show a loader in the target route)

Questions

• What are your thoughts on this?
• Does this approach align with Remix’s philosophy for data fetching? Am I missing something?
• Is using defer for client-side loading with cached data the best solution for this case?
• Any suggestions to further optimize this for performance or reduce complexity?

Thanks in advance for your insights!

[rururux]

If you want to distinguish between the initial access and client-side navigation, I think this will be helpful.
sergiodxa/remix-utils#311 (comment)

[kkatsi]

Thank you for the suggestion regarding fetchDest.

However, I believe that Remix now provides a more formal way to distinguish between server-side document loads and client-side navigations. Remix allows for the export of both a loader and a clientLoader function:

The loader is used for server-side data fetching (e.g., on document load).
The clientLoader is invoked for client-side navigations using <Link /> components.

Please feel free to correct me if I'm wrong, but from what I understand, I can use the loader for the initial page load and the clientLoader to handle client-side transitions.