Technical deep dive
Every component, every technology choice, and the reasoning behind each decision.
A request from a user's browser flows through three layers before returning HTML: Cloudflare's edge network, the Next.js server (running in a Worker), and Supabase for auth and data.
React client components
CDN + Workers runtime · global PoPs
Server components · middleware · API routes
Auth · PostgreSQL · RLS
Client-side SVG charts
Request flow — loading /saved
Browser requests /saved. Request hits the nearest Cloudflare PoP.
Cloudflare routes the request to the FinWiser Worker.
Next.js middleware reads the session cookie and calls supabase.auth.getUser() to verify it.
The /saved page (server component) awaits createClient(), then queries saved_calculations filtered by user_id via RLS.
Next.js renders the full HTML server-side and streams it back through Cloudflare to the browser.
React hydrates the page. The delete buttons become interactive client-side without a full page reload.
Deploy flow
Developer pushes to the main branch on GitHub.
Cloudflare Git integration detects the push and starts a build.
Build runs: npm ci → opennextjs-cloudflare build (which runs next build internally) → opennextjs-cloudflare deploy.
The .open-next/worker.js bundle and .open-next/assets are uploaded to Cloudflare's global network.
New Worker version is deployed with zero downtime. Old version handles requests until the new one is live.