The 'Static Replica' Engine (K8s Cost Optimization)

The "3-Minute" Bounce Rate

DataCabinet provided "Computer Labs on the Cloud"—ephemeral environments for running Jupyter Notebooks.

• The Legacy bottleneck: The platform relied on AngularJS and required a full Kubernetes pod to boot for every visitor.
• The Latency Crisis: Booting a containerized lab took over 3 minutes due to image pulls and volume mounting. This made the platform unusable for casual readers or students just reviewing code.
• The "Zombie" Cost: 90% of traffic was passive (read-only), yet we paid for full compute resources.
• Legacy frontend tech: Since the AngularJS implementation didn't provide even basic SEO for even non-interactive home pages, we were relying on expensive services like prerender.io just to be visible to search engines.

The Solution: "Static-First" Hybrid Architecture

I re-architected the delivery layer using Next.js Static Site Generation (SSG), effectively creating a "Hollow Mirror" of the infrastructure.

sequenceDiagram
    participant U as Visitor (User)
    participant N as Next.js (SSG/CDN)
    participant S as K8s Storage (PV)
    participant API as Orchestration API
    participant K as K8s Cluster (Pods)

    Note over U, N: Phase 1: Passive Consumption (90% Traffic)
    U->>N: Request Project URL
    N->>S: (Build Time) Fetch Raw Notebook JSON
    S-->>N: Return Data
    N-->>U: Serve Static HTML (react-markdown)
    Note right of U: Load Time: <1s (Zero Compute Cost)

    Note over U, K: Phase 2: Active Intent (10% Traffic)
    U->>API: Click "Edit / Run"
    API->>K: Trigger Pod Provisioning
    Note right of K: Booting Container (3 mins)...
    K-->>U: WebSocket Connection Ready
    U->>K: Live Code Execution

1. The Storage-to-Static Pipeline

Instead of spinning up a pod to read a file, I built a pipeline to access the data directly from the Kubernetes Attached Storage (Persistent Volumes).

• The "Hack": We utilized react-markdown combined with custom parsing scripts to ingest the raw Notebook JSON directly from the storage layer during the build time.
• Visual Fidelity: This generated static HTML that visually mimicked the Jupyter UI. To the user, it looked like a live lab, but it was just highly optimized HTML served from a CDN.
• Revalidation: utilized On-Demand Revalidation (via API triggers) to update the static pages only when a user actually modified a project, keeping the "cache" fresh without constant rebuilding.

2. The Lazy Provisioning Pattern (Scale-to-Zero)

We shifted the "Heavy Lift" strictly to user intent.

• Passive State (Default): Visitor hits the URL -> Next.js serves the SSG page. Zero K8s activity. Load time: <1s.
• Active State (Intent): Only when the user clicks "Edit" or "Run":
  1. The frontend calls the Orchestration API.
  2. The K8s cluster spins up the pod (3 min background process).
  3. Frontend establishes WebSocket connection once ready.

3. Impact & ROI

• Infrastructure Salvation: By filtering out passive traffic, we stopped provisioning heavy compute for 90% of hits. This slashed cloud bills by an order of magnitude (approx 3x/60% net savings).
• User Experience: Time-to-Interactive dropped from 3+ minutes to milliseconds, fundamentally changing the product from "clunky tool" to "instant resource."
• Native SEO: Removed prerender.io entirely. The static pages were natively indexable, unlocking organic traffic channels previously closed to us.