DEV Community

Sachin Maurya
Sachin Maurya

Posted on

The 10-Line Architecture That Scaled to 50+ Pages

#typescript #nextjs #performance #architecture

"The best architecture is invisible to the developer using it" - This principle led us to create something that fundamentally changed how we build web applications.

Six months ago, our Next.js application at Kreate Technologies was drowning in technical debt. 50+ pages, 300+ components, and a team struggling to maintain consistency. Every new page took 2 hours to build. Every bug fix risked breaking three other features.

Today, creating a new page takes 18 minutes. Our bundle size dropped 65%. Performance scores hit 95+. Developer productivity increased 300%.

The secret? We treat pages as data structures, not code.

Table of Contents

The Problem: Component Soup {#the-problem}

Picture this typical Next.js page:

// homepage.tsx - The old way (200+ lines) import HeroSection from '@/components/sections/HeroSection'; import ServicesSection from '@/components/sections/ServicesSection'; import TestimonialsSection from '@/components/sections/TestimonialsSection'; import ClientsSection from '@/components/sections/ClientsSection'; import FAQSection from '@/components/sections/FAQSection'; import CTASection from '@/components/sections/CTASection'; // ... 20 more imports export default function HomePage() { const [heroData, setHeroData] = useState(null); const [servicesData, setServicesData] = useState(null); // ... 10 more state variables useEffect(() => { fetchHeroData().then(setHeroData); fetchServicesData().then(setServicesData); // ... 10 more API calls }, []); if (!heroData || !servicesData /* ... */) { return <PageLoader />; } return ( <> <HeroSection title={heroData.title} subtitle={heroData.subtitle} image={heroData.image} ctaText={heroData.ctaText} ctaLink={heroData.ctaLink} />  <ServicesSection services={servicesData} layout="grid" columns={3} />  {/* ... 15 more sections */} </>  ); }
Enter fullscreen mode Exit fullscreen mode

Problems everywhere:

  • 🔴 Code duplication across 50+ pages
  • 🔴 No lazy loading (450KB initial bundle)
  • 🔴 Prop drilling nightmare
  • 🔴 Error cascading (one failure = page crash)
  • 🔴 Inconsistent patterns
  • 🔴 2+ weeks for new developer onboarding

The Breakthrough Moment {#the-breakthrough}

During a code review, I noticed something shocking: 80% of our pages were just different arrangements of the same 30 components.

What if we could define pages as configurations instead of code?

// The same page - revolutionary approach (10 lines) import { PageRenderer } from '@/components/common/PageRenderer'; import { HOMEPAGE_SECTIONS } from '@/config/sectionsConfig'; export default function HomePage() { return <PageRenderer sections={HOMEPAGE_SECTIONS} pagelink="home" />; }
Enter fullscreen mode Exit fullscreen mode 
// sectionsConfig.ts - The magic happens here export const HOMEPAGE_SECTIONS: Section[] = [ createSection('hero', () => import('./HeroSection'), { type: 'banner' }), createSection('services', () => import('./ServicesSection'), { type: 'grid', cols: 3 }), createSection('testimonials', () => import('./TestimonialsSection'), { type: 'carousel' }), createSection('clients', () => import('./ClientsSection'), { type: 'logos' }), createSection('faq', () => import('./FAQSection'), { type: 'accordion' }), ];
Enter fullscreen mode Exit fullscreen mode

This simple shift unleashed a cascade of innovations.

The Architecture Deep Dive {#the-architecture}

The Section Factory Pattern 

interface Section { id: string; Component: React.LazyExoticComponent<React.ComponentType<any>>; skeleton: SkeletonConfig; defaultProps?: Record<string, unknown>; } interface SkeletonConfig { type: 'banner' | 'grid' | 'carousel' | 'list' | 'card'; cols?: number; rows?: number; animated?: boolean; } const createSection = ( id: string, importer: () => Promise<{ default: React.ComponentType<any> }>, skeleton: SkeletonConfig, defaultProps?: Record<string, unknown> ): Section => { return { id, Component: React.lazy(importer), skeleton, defaultProps }; };
Enter fullscreen mode Exit fullscreen mode

The Orchestrator: PageRenderer

The magic happens in our PageRenderer component:

export const PageRenderer: React.FC<PageRendererProps> = ({ sections, globalProps = {}, sectionProps = {}, pagelink }) => { const renderSection = useCallback((section: Section, index: number) => { const mergedProps = { ...globalProps, ...section.defaultProps, ...sectionProps[section.id], pagelink }; return ( <SectionErrorBoundary key={section.id} sectionName={section.id}> <LazySection Component={() => <section.Component {...mergedProps} />}  skeleton={section.skeleton} sectionName={section.id} />  </SectionErrorBoundary>  ); }, [globalProps, sectionProps, pagelink]); return ( <div className="page-container"> {sections.map(renderSection)} </div>  ); };
Enter fullscreen mode Exit fullscreen mode

Intelligent Lazy Loading

Our LazySection component uses Intersection Observer for viewport-aware loading:

const LazySection: React.FC<LazySectionProps> = ({ Component, skeleton, sectionName }) => { const [shouldRender, setShouldRender] = useState(false); const targetRef = useRef<HTMLDivElement>(null); useEffect(() => { if (!targetRef.current) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setShouldRender(true); performance.mark(`section-${sectionName}-start`); } }, { threshold: 0.1, rootMargin: '50px' // Start loading 50px before visible } ); observer.observe(targetRef.current); return () => observer.disconnect(); }, [sectionName]); return ( <div ref={targetRef} data-section={sectionName}> {shouldRender ? ( <Suspense fallback={<SectionSkeleton config={skeleton} />}>  <Component /> </Suspense>  ) : ( <SectionSkeleton config={skeleton} />  )} </div>  ); };
Enter fullscreen mode Exit fullscreen mode

Content-Aware Skeleton System

Each section defines its own loading state:

const SectionSkeleton: React.FC<{ config: SkeletonConfig }> = ({ config }) => { switch (config.type) { case 'grid': const items = (config.cols || 3) * (config.rows || 2); return ( <div className={`grid grid-cols-${config.cols} gap-4`}> {Array.from({ length: items }).map((_, i) => ( <Skeleton key={i} className="h-32" delay={i * 50} />  ))} </div>  ); case 'carousel': return ( <div className="flex gap-4 overflow-hidden"> {Array.from({ length: 3 }).map((_, i) => ( <Skeleton key={i} className="flex-shrink-0 w-80 h-48" /> ))} </div>  ); // ... more skeleton types } };
Enter fullscreen mode Exit fullscreen mode

Real Implementation Examples {#implementation}

Our GenAI Document Analyzer Page 

export const GENAI_SECTIONS: Section[] = [ createSection( 'hero', () => import('@/components/sections/genai/HeroSection'), { type: 'banner', height: '600px' } ), createSection( 'processing-modes', () => import('@/components/sections/genai/AIProcessingModes'), { type: 'grid', cols: 2, rows: 4 } ), createSection( 'industry-solutions', () => import('@/components/sections/genai/IndustrySolutions'), { type: 'carousel', items: 4 } ), createSection( 'testimonials', () => import('@/components/sections/common/ClientTestimonials'), { type: 'carousel', autoPlay: true } ) ]; // The entire page export default function GenAIPage() { return ( <PageRenderer sections={GENAI_SECTIONS} pagelink="genai" globalProps={{ theme: 'dark' }} />  ); }
Enter fullscreen mode Exit fullscreen mode

Dynamic Configuration with Feature Flags 

const getPageSections = (page: string, user?: User): Section[] => { const baseSections = PAGE_CONFIGS[page] || []; // A/B testing through configuration if (user?.experimentGroup === 'B') { return [ baseSections[1], // Move features first for group B baseSections[0], ...baseSections.slice(2) ]; } // Feature flags if (featureFlags.newTestimonials) { const newSections = [...baseSections]; const testimonialIndex = newSections.findIndex(s => s.id === 'testimonials'); if (testimonialIndex !== -1) { newSections[testimonialIndex] = createSection( 'testimonials-v2', () => import('./TestimonialsV2'), { type: 'masonry', cols: 3 } ); } } return baseSections; };
Enter fullscreen mode Exit fullscreen mode

Performance Impact {#performance}

The results speak for themselves:

Metric Before After Improvement
Bundle Size 450KB 157KB -65%
Time to Interactive 3.8s 2.3s -40%
First Contentful Paint 1.6s 0.8s -50%
Lighthouse Score 68 95+ +40%
Page Creation Time 2 hours 18 min -85%

Bundle Analysis Deep Dive 

# Before - One massive chunk main.js 450KB vendors.js 1.2MB Total Initial: 1.65MB # After - Intelligent splitting  main.js 157KB framework.js 45KB commons.js 89KB sections/hero.js 23KB (loaded on demand) sections/services.js 34KB (loaded on demand) Total Initial: 291KB
Enter fullscreen mode Exit fullscreen mode

Real User Metrics

  • Bounce Rate: Decreased from 34% to 21%
  • Session Duration: Increased from 2.3min to 3.8min
  • Conversion Rate: Improved by 45%
  • Time to Interactive: 40% faster across all devices

Developer Experience Revolution {#dx-revolution}

Before vs After: New Developer Onboarding

Before (2 weeks):

  • Day 1-3: Understanding component architecture
  • Day 4-7: Learning data fetching patterns
  • Day 8-10: Understanding error handling
  • Day 11-14: First page creation

After (3 days):

  • Day 1: Configuration pattern explanation (2 hours)
  • Day 2: Practice with existing sections
  • Day 3: Create first page independently

Code Review Time Reduction 

// Old way - 200+ line page file // - Check imports // - Verify data fetching // - Validate error handling  // - Review prop passing // Average review time: 45 minutes // New way - 10 line configuration const SECTIONS = [ createSection('hero', heroImport, heroSkeleton), createSection('features', featuresImport, featuresSkeleton) ]; // Average review time: 5 minutes
Enter fullscreen mode Exit fullscreen mode

Developer Happiness Metrics

We surveyed our development team:

  • "I enjoy working on pages": 23% → 89%
  • "I understand the codebase": 45% → 91%
  • "I can work independently": 34% → 87%
  • "Code reviews are helpful": 56% → 94%

Lessons Learned {#lessons}

1. Configuration > Code for Repetitive Patterns

When you find yourself copying code, ask: "Can this be configuration?"

2. Performance Should Be Automatic

Developers shouldn't think about:

  • Lazy loading (automatic with sections)
  • Code splitting (handled by dynamic imports)
  • Loading states (defined in skeleton config)

3. Error Boundaries at Every Level 

// Section-level errors don't crash pages <SectionErrorBoundary sectionName="testimonials"> <TestimonialsSection /> </SectionErrorBoundary>
Enter fullscreen mode Exit fullscreen mode

4. Developer Experience Drives Product Quality

Happy developers → Better code → Better user experience

5. Migration Strategy: One Page at a Time

We migrated our entire application over 3 months:

  • Week 1-4: Build PageRenderer system
  • Week 5-8: Convert homepage + 2 key pages
  • Week 9-12: Migrate remaining pages
  • Zero downtime, minimal risk

Advanced Patterns

Context-Aware Data Fetching 

// Components automatically get the right data const TestimonialsSection = ({ pagelink }) => { // Automatically selects correct API based on pagelink const { data } = useTestimonials(pagelink); return <TestimonialCarousel data={data} />; }; // Hook mapping const useTestimonials = createHookMap({ 'genai': useGenAiTestimonials, 'mobile-app': useMobileAppTestimonials, 'default': useGeneralTestimonials }, 'default');
Enter fullscreen mode Exit fullscreen mode

Multi-Level Error Recovery 

// Automatic retry for transient errors const SectionErrorBoundary = ({ children, sectionName }) => { const [retryCount, setRetryCount] = useState(0); const handleError = (error) => { const errorType = classifyError(error); if (errorType.autoRetry && retryCount < 3) { setTimeout(() => { setRetryCount(prev => prev + 1); // Component automatically retries }, errorType.retryDelay); } }; return ( <ErrorBoundary onError={handleError}> {children} </ErrorBoundary>  ); };
Enter fullscreen mode Exit fullscreen mode

Future Innovations

AI-Powered Page Optimization

We're exploring ML models that optimize page configurations based on user behavior:

// Future: AI suggests optimal section arrangements const optimizedSections = await optimizePageLayout({ baseSections: HOMEPAGE_SECTIONS, userSegment: currentUser.segment, conversionGoal: 'signup', timeOfDay: new Date().getHours() });
Enter fullscreen mode Exit fullscreen mode

Real-Time Configuration Updates 

// Deploy new page layouts without code changes const sections = await fetchSectionsFromCMS(pageName); return <PageRenderer sections={sections} />;
Enter fullscreen mode Exit fullscreen mode

Conclusion

Configuration-driven architecture isn't just a pattern—it's a paradigm shift. By treating pages as data structures, we unlocked:

  • Unprecedented flexibility (A/B testing through config)
  • Automatic performance (lazy loading built-in)
  • Developer happiness (simple mental model)
  • Business agility (rapid iteration)

The best part? You can start small. Convert one page to this pattern, measure the impact, then expand.

Remember: The goal isn't to build software. It's to solve problems efficiently.

Resources

Connect with me:

What patterns have transformed your development experience? Share in the comments below!

Top comments (0)