Does Qwik automatically invalidate cached server component HTML when props change?

Yes, Qwik automatically invalidates cached server component HTML when a prop changes, provided that prop is part of the component's cache key.

In Qwik v1.x, server-side caching is managed through cache keys derived from the input signatures of functions. When a server component is wrapped in a caching mechanism, Qwik generates a hash based on the arguments (props). If a prop value changes between requests, the resulting hash changes, causing a cache miss and forcing the server to re-execute the component to generate fresh HTML.

How Invalidation Works

The mechanism relies on the deterministic nature of the inputs. Here is the breakdown of the behavior:

• Cache Key Generation: Qwik serializes the props passed to the server component. This serialized string forms the cache key.
• Cache Miss: If a request arrives with a different prop value, the generated hash will not match the existing entry in the store. Qwik executes the component logic.
• Cache Hit: If the props are identical, Qwik returns the previously rendered HTML from the cache store without executing the component body.

Limitations and External Data

While prop changes trigger invalidation, Qwik does not "watch" external data sources like databases or APIs automatically.

• External Data Updates: If your component fetches data internally based on an ID, and that ID remains the same, Qwik will serve the stale cached HTML because the cache key hasn't changed.
• Non-deterministic Props: Using values like `Math.random() or `new Date()` as props will result in a cache miss every single time, effectively disabling the benefits of caching.

Manual Invalidation Strategy

To ensure your HTML stays fresh when external data changes, you must include a version token or a timestamp in your props:

// Example: Using a version prop to force cache invalidation
const MyComponent = component$$(({ id, version }: Props) => {
  const data = await fetchData(id);
  return <div>{data}<;
});

By passing a version prop that updates when your database changes, you ensure the Qwik cache key changes, effectively "invalidating" the old HTML.