HTML Cache with Puppeteer

July 2025. SSR pages load slowly. 800ms for homepage. Unacceptable.

Vue SSR renders on every request. Database, templates, components - everything from scratch.

Idea

Render once, save HTML. Next request - serve ready file.

Implementation

Puppeteer. Opens page in headless Chrome, waits for load, saves HTML.

Works. Vue hydrates cached page. Fast.

Architecture

Request → Check cache
  → Cache hit: return HTML
  → Cache miss: Puppeteer renders, saves, returns

Separate container html-cache-generator. Heavy - Chrome weighs a lot. But works.

What it can do

  • Generate HTML for any page
  • Invalidate when content changes
  • SEO - search engines see ready content
  • Vue hydration picks up state

Result

Went from 800ms to 80ms for cached pages.

First version works. Some quirks with hydration - sometimes flickers when switching theme. Will figure it out.

← Back to blog