Custom React SPA vs. WooCommerce: A Detailed Technical Postmortem and Rewrite Guide for a Modern E-Commerce Store

3. Custom SPA vs. WooCommerce: A Head-to-Head Comparison

It's a common misconception that a 'custom' build is inherently superior. The truth is far more nuanced. Here's a direct comparison:

The Verdict for SEO: Google's official stance is that it does not penalize a site based on its rendering method, but it must be able to see and index the content. A pure CSR SPA that shows a blank screen without JavaScript is a significant risk. The recommended long-term solutions are Server-Side Rendering (SSR), Static Site Generation (SSG), or a proper hydration strategy, not workarounds like dynamic rendering, which Google itself no longer recommends. ,

4. The Rewrite Blueprint: A Modern, Hybrid Approach

The analysis concludes that the most practical path forward is not switching to WooCommerce but rebuilding the existing custom architecture with a modern, hybrid framework. The goal is to retain the flexibility of the custom build while fixing its core weaknesses.

Recommended Stack:

• Storefront: Next.js (App Router) with React and TypeScript. This provides SSR, SSG, and Incremental Static Regeneration (ISR), giving you fast first loads, great SEO, and a powerful developer experience. Zod would be used for validation at the API boundary.
• Backend: NestJS (with Fastify adapter) and TypeScript. This provides a structured, scalable, and testable API. Paired with PostgreSQL as the source of truth.
• Data Layer: Prisma or Drizzle ORM for type-safe database access and migrations.
• Caching & Queues: Redis for caching, distributed locks, and rate-limiting. BullMQ (or similar) for background jobs like sending emails, processing webhooks, and reconciliation.

Critical Implementation Principles:

1. Rendering Strategy: Use SSG/ISR for product, category, and content pages. Use SSR for pages with user-specific data or real-time requirements. Reserve CSR for highly interactive components (e.g., cart drawer).
2. Data Model: Normalize the database. Have a dedicated Variants table with its own SKU, stock, price, and image relationships. Standardize all option values (e.g., sizes, colors).
3. Checkout Integrity: Never trust client-side data for price calculations. The server must recalculate totals, apply coupons, and validate inventory before creating a PayPal order or capturing payment.
4. Security: Implement strict input validation, rate limiting, and idempotency for all mutation endpoints. Use a queue for background tasks to decouple request handling from external services.

Conclusion: Custom is a Commitment, Not a Magic Bullet

This analysis shows that building a custom e-commerce platform is a significant engineering commitment. The current SPA has smart ideas, like a CMS-controlled homepage builder, but it suffers from foundational issues in SEO, data modeling, and rendering strategy.

For a store with a small catalog (16 products), the custom architecture may be over-engineered if the team is small and needs standard features like order management and tax calculations. In that case, a well-optimized WooCommerce setup is a more pragmatic choice.

However, if the goal is to own the brand experience, build a unique editorial layout, and serve multiple channels, then a custom headless solution is the right path. The key is to choose the right tools for the job. Abandon pure CSR and embrace a hybrid SSR/SSG framework like Next.js. This single decision fixes the most critical drawbacks of the current site while preserving its core strengths.

Sources: General technical analysis of the site's architecture; Google Search Central - JavaScript SEO Basics; Google Webmasters Help Thread on vs. dynamic rendering; Search Engine Land - Google no longer recommends dynamic rendering.