01 — Overview
Built custom server-side rendering architecture instead of Next.js to optimize performance for Morocco's inconsistent connectivity. Achieved 47% improvement in time to first contentful paint through strategic architectural decisions.
02 — The Challenge
Building a B2B/B2C marketplace for Morocco's restaurant supply industry required solving unique infrastructure challenges. Most restaurant owners operate in areas with unreliable internet connectivity, making traditional Next.js SSR approaches impractical.
The platform needed to serve thousands of products across multiple vendors while maintaining fast load times even on 3G networks—a requirement that led to abandoning Next.js 15 in favor of a custom SSR solution.
03 — Technical Solution
I built a custom server-side rendering system using Express.js that pre-renders React components on the server. This approach gave us complete control over the rendering pipeline and allowed aggressive optimization for low-bandwidth scenarios.
By extracting and inlining critical CSS for above-the-fold content, we achieved a 47% improvement in First Contentful Paint compared to the initial Next.js implementation—critical for user retention in low-connectivity environments.
04 — Performance Metrics
The custom SSR solution outperformed Next.js in our specific use case by giving us fine-grained control over HTML streaming, CSS delivery, and JavaScript hydration timing. This architecture became the foundation for all subsequent performance optimizations.
05 — Key Learnings
Context-Driven Technology Choices
Next.js is an excellent framework, but not every project needs it. Understanding your infrastructure constraints (network reliability, user device capabilities) should drive architectural decisions—not framework popularity.
Performance as a Feature
In emerging markets, performance isn't just about user experience—it's a core product requirement. A 2-second delay can be the difference between a sale and an abandoned cart.
Building vs. Configuring
While frameworks provide conveniences, building custom solutions when needed teaches you the fundamentals. This project deepened my understanding of SSR, hydration, and critical rendering paths in ways a framework would have abstracted away.