Any way to dynamically cache routes on server side?

[shahriar-shojib]

I have a route like this /blog/:slug

now on the server entry I naively tried to cache the HTML and then serve the cached response on subsequent requests like so:

import { PassThrough, Readable } from 'node:stream';

import { createReadableStreamFromReadable } from '@react-router/node';
import { isbot } from 'isbot';
import type { RenderToPipeableStreamOptions } from 'react-dom/server';
import { renderToPipeableStream } from 'react-dom/server';
import type { AppLoadContext, EntryContext } from 'react-router';
import { ServerRouter } from 'react-router';

export const streamTimeout = 5_000;

// Cache configuration
const CACHE_MAX_AGE = 60 * 60; // 1 hour in seconds
const cache = new Map<
  string,
  {
    html: string;
    timestamp: number;
  }
>();

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  routerContext: EntryContext,
  loadContext: AppLoadContext
) {
  console.log(Array.from(cache.keys()));

  const isBlog = request.url.includes('/blog/');
  const cachedData = cache.get(request.url);
  const now = Date.now();

  // Serve cached content if available and not expired
  if (
    isBlog &&
    cachedData &&
    now - cachedData.timestamp < CACHE_MAX_AGE * 1000
  ) {
    console.log('Serving cached blog page:', request.url);
    responseHeaders.set('Content-Type', 'text/html');
    responseHeaders.set('Cache-Control', `public, max-age=${CACHE_MAX_AGE}`);
    responseHeaders.set('X-Cache', 'HIT');

    return new Response(cachedData.html, {
      headers: responseHeaders,
      status: responseStatusCode,
    });
  }

  const data = await new Promise<{ res: Response; stream: Readable }>(
    (resolve, reject) => {
      let shellRendered = false;
      let userAgent = request.headers.get('user-agent');

      // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
      // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
      let readyOption: keyof RenderToPipeableStreamOptions =
        (userAgent && isbot(userAgent)) || routerContext.isSpaMode
          ? 'onAllReady'
          : 'onShellReady';

      const { pipe, abort } = renderToPipeableStream(
        <ServerRouter context={routerContext} url={request.url} />,
        {
          [readyOption]() {
            shellRendered = true;

            const body = new PassThrough();

            if (isBlog) {
              // For blog pages, we'll collect the full response
              const chunks: Buffer[] = [];
              body.on('data', (chunk: Buffer) => {
                chunks.push(chunk);
              });
              body.on('end', () => {
                const html = Buffer.concat(chunks).toString('utf-8');
                cache.set(request.url, {
                  html,
                  timestamp: Date.now(),
                });
                console.log('Cached blog page:', request.url);
              });
            }

            const stream = createReadableStreamFromReadable(body);
            responseHeaders.set('Content-Type', 'text/html');

            if (isBlog) {
              responseHeaders.set(
                'Cache-Control',
                `public, max-age=${CACHE_MAX_AGE}`
              );
              responseHeaders.set('X-Cache', 'MISS');
            }

            resolve({
              res: new Response(stream, {
                headers: responseHeaders,
                status: responseStatusCode,
              }),
              stream: body,
            });

            pipe(body);
          },
          onShellError(error: unknown) {
            reject(error);
          },
          onError(error: unknown) {
            responseStatusCode = 500;
            if (shellRendered) {
              console.error(error);
            }
          },
        }
      );

      setTimeout(abort, streamTimeout + 1000);
    }
  );

  return data.res;
}

This still calls the loader of the route before coming to this stage. Is there a way to do what I am trying to do with react-router-7 ?

[sergiodxa]

Generating the HTML is almost always fast, so instead of caching the HTML, you could cache the data inside the loaders, which is typically the slowest part.

If you still want to cache the data, maybe to reduce server loader, you can use the Cache-Control header in the response to instruct the browser and/or CDN to cache it.

Also, the code in the handleRequest of entry.server is not executed until after loaders have run, and since loaders are the slow part you will only be able to send a cached HTML after loaders run, losing any possible benefit.

[shahriar-shojib]

I understand your point and it makes sense to cache the loader data.
I was just wondering if I could render the HTML early and save some processing on the "reactdom/server" operations, I know it's very fast but it still needs a bit of a compute.
Looking at the docs on custom framework, it seems it should be possible to do what I am aiming to do, it's just that I don't know how the custom framework entry point will be handled by Vite.
I was also looking at some examples, specifically the custom node server one, and I wish there were a simpler way to integrate with Vite for this use case.

[kunanyi]

is @sergiodxa's idea of caching at the CDN level not appropriate for your needs?

You're wanting to save the whole HTML early on... but why not just let the CDN cache the entire result?

The CDN cache will expire after x minutes (your choice), or you could manually expire the page yourself