generate Cache Control Headerutility
This utility function accepts a object and returns a string with the corresponding
cache-control
header.
Learn more about data fetching in Hydrogen.
- Anchor to cacheOptionscacheOptionsrequired
Anchor to generateCacheControlHeader-returnsReturnsstring
GenerateCacheControlHeaderGeneratedType
- cacheOptions
AllCacheOptions
string
export function generateCacheControlHeader(
cacheOptions: CachingStrategy,
): string {
const cacheControl: string[] = [];
Object.keys(cacheOptions).forEach((key: string) => {
if (key === 'mode') {
cacheControl.push(cacheOptions[key] as string);
} else if (optionMapping[key]) {
cacheControl.push(
`${optionMapping[key]}=${cacheOptions[key as keyof CachingStrategy]}`,
);
}
});
return cacheControl.join(', ');
}
AllCacheOptions
Override options for a cache strategy.
- mode
The caching mode, generally `public`, `private`, or `no-store`.
string
- maxAge
The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage).
number
- staleWhileRevalidate
Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate).
number
- sMaxAge
Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage).
number
- staleIfError
Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error).
number
export interface AllCacheOptions {
/**
* The caching mode, generally `public`, `private`, or `no-store`.
*/
mode?: string;
/**
* The maximum amount of time in seconds that a resource will be considered fresh. See `max-age` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#:~:text=Response%20Directives-,max%2Dage,-The%20max%2Dage).
*/
maxAge?: number;
/**
* Indicate that the cache should serve the stale response in the background while revalidating the cache. See `stale-while-revalidate` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate).
*/
staleWhileRevalidate?: number;
/**
* Similar to `maxAge` but specific to shared caches. See `s-maxage` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#s-maxage).
*/
sMaxAge?: number;
/**
* Indicate that the cache should serve the stale response if an error occurs while revalidating the cache. See `stale-if-error` in the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#stale-if-error).
*/
staleIfError?: number;
}
Example code
examples
Example code
description
I am the default example
JavaScript
import {json} from '@shopify/remix-oxygen'; import {generateCacheControlHeader, CacheShort} from '@shopify/hydrogen'; export async function loader() { return json( {some: 'data'}, { headers: { 'cache-control': generateCacheControlHeader(CacheShort()), }, }, ); }
TypeScript
import {json} from '@shopify/remix-oxygen'; import {generateCacheControlHeader, CacheShort} from '@shopify/hydrogen'; export async function loader() { return json( {some: 'data'}, { headers: { 'cache-control': generateCacheControlHeader(CacheShort()), }, }, ); }