Add a built-in server-side cache to Remix code

[sergiodxa]

Caching, and caching server-side, it's a common suggested way to improve the performance of a Remix application if it's consuming some external service that it's slow and can't be made faster.

The usual answer for this is to either use an in-memory cache with the incredible lru-cache package or use something like Redis or Cloudflare KV if deploying to CF, there are of course more options but those are the usual recommendations.

One thing is that, each of them implement their own interface that will depend on the tool you chose. I propose to add to Remix a standardized cache interface and a way to implement that using any of the other tools.

The interface

The interface can be really simple:

interface Cache> {
  set<Value = unknown>(key: string; value: Value): Promise<void>;
  get<Value = unknown>(key: string): Promise<Value | null>;
  del(key: string): Promise<void>;
  has(key: string): Promise<boolean>;
}

And maybe more things, but I think those are the bare-minumum.

The factory function

As with session storages, Remix could have a generic createCacheStorage and that can be used to implement cache storages specific for different cache sources.

import { createCacheStorage } from "@remix-run/node"; // or cloudflare/deno
import LRU, { type Options } from "lru-cache";

function createMemoryLRUCacheStorage(options: Options<string, string>) {
  // Configure your database client...
  let lru = new LRU<string, string>(options);

  return createCacheStorage({
    async set(key, data) {
      lru.set(key, data);
    },
    async get(key) {
      return lru.get(key);
    },
    async delete(key) {
      lru.delete(key);
    },
    async has(key) {
      return lru.has(key);
    },
  });
}

The built-in cache storages

Remix could also provide some built-in cache storages, I think it should have a simple createMemoryCacheStorage that uses an in-memory object or Map, maybe a createFileCacheStorage, and a createCloudflareKVCacheStorage only exported from @remix-run/cloudflare.

The usage

The usage should be really simple, you create a cache storage instance and then you could use it in any part of the app.

let cache = createMemoryLRUCacheStorage({ max: 1000, ttl: 1000 * 60 });

export async function loader({}: LoadersArgs) {
  let data = await cache.get("data");
  if (!data) {
    let response = await fetch("https://example.com/data");
    data = await response.text() // the cache was configured to expect a string
    await cache.set("data", data);
  }
  return json({ data: JSON.parse(data) });
}

[sergiodxa]

This have been formalized in #4546