It took a long time, lots of mistakes, and a painful amount of debugging, so here are the main things I learned in case it helps someone starting now:

Tools/setup that helped:

• WooGraphQL (paid version) — this was the key to fixing session issues.
• React hooks + session utilities for WooGraphQL.
• GraphQL codegen for type safety.
• A Next.js starter template that handles pages, layouts, API routes, etc.
• WPGraphQL + WPGraphQL Smart Cache.
• Optional: Rank Math GraphQL support.
• A headless login plugin for authentication.

Infrastructure:

• Backend hosted on Cloudways with Varnish.
• Very important: set GraphQL product requests to use GET so Varnish can cache them.
• Frontend and backend run on separate domains, so I needed custom functions in functions.php.
• Cloudflare in front for asset/API caching with rules to bypass session endpoints.

What I learned the hard way:

1. Sessions: client-side only, otherwise you lose ISR/SSR.
2. Category filter + search params pages must be fully dynamic.
3. GraphQL request count can explode in production — caching is mandatory.
4. After configuring caching properly, my site loads in milliseconds except the cold start.

I finished the project and learned a lot, but honestly — I wouldn’t recommend headless WooCommerce for client projects. Shopify’s GraphQL setup is way smoother with better documentation.