playbooks

home / skills / harborgrid-justin / lexiflow-premium / advanced-ssr-cache-design

advanced-ssr-cache-design skill

/frontend/.github-skills/advanced-ssr-cache-design

This skill engineers SSR caching strategies that preserve correctness under concurrent updates and streaming, optimizing cache hits and invalidation.

npx playbooks add skill harborgrid-justin/lexiflow-premium --skill advanced-ssr-cache-design

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
868 B
---
name: advanced-ssr-cache-design
description: Engineer SSR caching strategies that preserve correctness under concurrent updates and streaming.
---

# Advanced SSR Cache Design (React 18)

## Summary

Engineer SSR caching strategies that preserve correctness under concurrent updates and streaming.

## Key Capabilities

- Design cache keys that include routing and personalization parameters.
- Implement safe cache invalidation with deterministic outcomes.
- Integrate cache policy with streaming SSR.

## PhD-Level Challenges

- Formalize correctness conditions for SSR cache hits.
- Analyze cache coherence across distributed render nodes.
- Derive optimal cache TTL under churn.

## Acceptance Criteria

- Provide cache policy documentation and tests.
- Demonstrate correctness under concurrent personalization.
- Report cache hit ratios before/after tuning.

Overview

This skill engineers server-side rendering (SSR) cache strategies that remain correct during concurrent updates and streaming responses. It focuses on deterministic cache keys, safe invalidation, and policies that integrate with React 18 streaming. The goal is repeatable correctness, measurable hit ratios, and practical guidance for distributed render nodes.

How this skill works

The skill inspects routing, personalization signals, and request metadata to build deterministic cache keys that avoid accidental collisions. It embeds invalidation hooks and versioning to ensure deterministic outcomes when content changes concurrently. It also integrates cache policies with streaming SSR so partial responses and progressive rendering honor cache semantics and safety guarantees.

When to use it

  • High-traffic sites using SSR with personalized or user-specific fragments
  • Applications using React 18 streaming where partial HTML can be cached
  • Distributed rendering setups with multiple nodes serving cached results
  • Systems that must prove correctness under concurrent updates and invalidations

Best practices

  • Include route, critical query params, auth scope, and feature flags in cache keys to prevent incorrect hits
  • Prefer immutable fragment caching plus small mutable placeholders instead of full-page caching for heavy personalization
  • Use explicit versioning or monotonic timestamps for deterministic invalidation rather than time-based TTLs alone
  • Run correctness tests simulating concurrent updates and stream interleaving before enabling cache in production
  • Measure cache hit ratios and origin load before/after tuning; iterate on key shape and TTLs based on real traffic patterns

Example use cases

  • Cache static header and layout markup while streaming user-specific main content as placeholders
  • Cache pre-rendered policy documents in a legal platform with per-tenant routing keys and tenant version tags
  • Implement edge node fragment caches with coherent invalidation via a signed version token distributed through a central store
  • Derive TTLs by modeling churn: simulate update rates and choose TTL that balances staleness risk vs origin load

FAQ

How do I avoid serving stale personalized content?

Build keys that include personalization scope and a version token; cache only fragments safe to reuse while rendering sensitive parts per request.

Can streaming SSR be cached safely?

Yes—cache complete safe fragments and ensure streaming boundaries are deterministic. Use versioning and tests that simulate partial-response interleaving to confirm correctness.