Frontend Architect Curriculum

Next.js Engineering

Scale applications leveraging App Router routing layout hierarchies, Server Components, server actions, and HTML streams.

Syllabus Modules

Module 5.1: SSR, SSG & Server Components (RSC)Module

Build fast loading server rendered views incorporating React Suspense HTML streams.

Detailed Topics & Submodules

Next.js App Router & Server Rendering

Leverage SSR, SSG, ISR, React Server Components (RSC), and edge hydration streams.

Why It Matters: Server rendering reduces initial bundle sizes and boosts First Contentful Paint metrics.

Skills:Server components boundariesStreaming HTML hydrationEdge cache pipelines

Related System Design Case Studies

Design Amazon Search & Product Listing PageCase Study

Designing an SEO-optimized product catalog dashboard with complex sidebar filter grids, autocomplete queries search, and zero layout shift configurations.

intermediate10 min Readcritical Relevance

SEO CrawlabilityURL Filter SynchronizationLayout Shift Avoidance (CLS)

Category: E-CommerceRead Full Case Study

Planned Practice Projects

Projects mapping coming soon.

Track Details

Difficulty:advanced

Estimated Time:50 Hours

Interview Weight:high

Prerequisites

React Engineering

Learning Outcomes

Build server-side rendering pipelines near the user edge
Design Next.js app routes utilizing nested layout definitions
Evaluate hydration latency values on complex component trees