Cache loader data and Make your SSR app more stable and smooth: Add error retries and data caching to your server loaders.

[suhaotian]

When building SSR applications where the backend API is separate from the frontend, we need to fetch data inside React Router's loader functions for Pre-rendering.

We are not talking about data fetch in client side with SWR or React Query

Sometimes, fetching data fails due to network issues or high traffic when many users visit the same page at once. This can lead to multiple redundant requests on the server, especially when the data is large, causing performance issues.

To improve this, we can:

• Retry failed requests a few times.
• Deduplicate identical requests.
• Cache large, non-essential, or infrequently updated data, like i18n JSON files or site configurations.

These enhancements make SSR applications more stable and efficient.

Instead of patching fetch, we can use a fetch wrapper with plugin support.

In Next.js, the fetch function is patched to support built-in caching.

Here, we use xior.js, which I built for this purpose:

import axios from 'xior';
import retryPlugin from 'xior/plugins/error-retry';
import cachePlugin from 'xior/plugins/cache';
import dedupeRequestPlugin from 'xior/plugins/dedupe';
import errorCachePlugin from 'xior/plugins/error-cache';

export const http = xior.create({
  baseURL: '...',
});

http.plugins.use(dedupeRequestPlugin());
http.plugins.use(
  retryPlugin({
    onRetry(config, error, count) {
      console.log(`${config?.method} ${config?.url} retry ${count}`);
    },
  })
);
http.plugins.use(
  cachePlugin({
    cacheItems: 100,
    cacheTime: 1e3 * 60 * 5, // 5 minutes
  })
);
// http.plugins.use(errorCachePlugin()); // If a request fails and cached data exists, use the cache.

This makes data fetching more reliable and efficient in SSR applications.

Hope these tips help! If you have any questions or issues, please leave a comment. More information check https://github.com/suhaotian/xior