@flight-framework/cache-components

Component-level caching with streaming SSR for Flight Framework.

Enables Partial Pre-Rendering (PPR) patterns - mix static, cached, and dynamic content in a single route.

Installation

pnpm add @flight-framework/cache-components

Usage

Basic Setup

import { createCache, memory } from '@flight-framework/core';
import { CacheProvider, CachedContent, Dynamic } from '@flight-framework/cache-components/react';

const cache = createCache({ adapter: memory({ maxSize: 1000 }) });

function App() {
    return (
        <CacheProvider cache={cache} defaultTTL={3600}>
            <Header />  {/* Static */}
            
            <Suspense fallback={<ReviewsSkeleton />}>
                <CachedContent cacheKey="reviews:123" ttl={3600} tags={['reviews']}>
                    <ProductReviews productId="123" />
                </CachedContent>
            </Suspense>
            
            <Dynamic>
                <ShoppingCart />  {/* Always fresh */}
            </Dynamic>
        </CacheProvider>
    );
}

Cached Data Functions

import { cachedFn, setGlobalCache } from '@flight-framework/cache-components';

// Set up global cache
setGlobalCache(cache);

// Create cached data fetcher
const getReviews = cachedFn('reviews', async (productId: string) => {
    const res = await fetch(`/api/reviews/${productId}`);
    return res.json();
}, { ttl: 3600, tags: ['reviews'] });

// Usage
const reviews = await getReviews('product-123');

Client-Side Hook

import { useCachedData } from '@flight-framework/cache-components/react';

function Price({ productId }) {
    const { data, isLoading, error } = useCachedData(
        `price:${productId}`,
        () => fetch(`/api/price/${productId}`).then(r => r.json()),
        { ttl: 60 }
    );
    
    if (isLoading) return <Skeleton />;
    return <span>${data.price}</span>;
}

API

Components

| Component | Description | |-----------|-------------| | CacheProvider | Provides cache context to tree | | CachedContent | Marks content as cached | | Dynamic | Marks content as never cached |

Functions

| Function | Description | |----------|-------------| | cachedComponent | Create cached component renderer | | cachedFn | Wrap function with caching | | setGlobalCache | Set global cache instance |

Hooks

| Hook | Description | |------|-------------| | useCache | Access cache from context | | useCachedData | Client-side data caching |

Features

• SSR streaming integration
• Automatic cache key generation
• Tag-based invalidation
• DevTools instrumentation hooks
• Works with any cache adapter