Skip to main content

Creating a Cache

You may want to create a Cache if you want to store transformed images on the server in a way that is not currently supported by this library. An example could be storing images in a Cloud storage provider such as AWS S3 or Google Cloud Storage.


To make your own, just make a class that follows the Cache format:

export interface CacheConfig {
* Time To Live: how long a key should remain in the cache
ttl: number;
* Time Before Deletion: how long a key should remain in the cache after expired (ttl)
tbd: number;

export enum CacheStatus {
* The cache contains the key and it has not yet expired
HIT = "hit",
* The cache contains the key but it has expired
STALE = "stale",
* The cache does not contain the key
MISS = "miss",

export abstract class Cache {
abstract config: CacheConfig;

abstract has(key: string): Promise<boolean>;

abstract status(key: string): Promise<CacheStatus>;

abstract get(key: string): Promise<Uint8Array | null>;

abstract set(key: string, resultImg: Uint8Array): Promise<void>;

abstract clear(): Promise<void>;

You will then provide an instance of this class to the cache field of the ‘loader’ config

import type { LoaderFunction } from "remix";
import { imageLoader } from "remix-image/server";
import MyCache from "...";

const config = {
selfUrl: "http://localhost:3000",
whitelistedDomains: [""],
cache: new MyCache(),

export const loader: LoaderFunction = ({ request }) => {
return imageLoader(config, request);


Show Off

Create something cool that you think others would use? Upload it to GitHub and show it off on the Remix-Image repo!