App Router & Server Components Training
This 3-day deep-dive takes participants beyond Next.js fundamentals into the advanced architecture of the App Router and React Server Components. Participants will master the RSC mental model, streaming and Suspense patterns, parallel and intercepting routes, route handlers, and Server Actions. By the end, participants will be able to architect complex Next.js applications that leverage the full power of the App Router.
Take your Next.js skills to the next level with this intensive 3-day training focused on the App Router and React Server Components. Master advanced routing patterns, streaming, Suspense, parallel routes, and the data fetching strategies that power high-performance applications.
Training Details
| Duration | 3 days (24 hours) |
| Level | Intermediate |
| Delivery | In-person, Live online, Hybrid |
| Certification | N/A |
Who Is This For?
- Next.js developers upgrading from Pages Router to App Router
- React developers building complex application architectures
- Frontend engineers working on data-heavy applications
- Teams adopting React Server Components in production
Learning Outcomes
After completing this training, participants will be able to:
- Architect applications using the App Router's full feature set
- Implement advanced routing patterns including parallel and intercepting routes
- Design optimal server/client component boundaries
- Build streaming UIs with Suspense and progressive rendering
- Implement caching, revalidation, and Incremental Static Regeneration
- Handle complex data fetching scenarios with composition patterns
Detailed Agenda
Day 1: Advanced Routing
Module 1: App Router Deep Dive
- Route segments and conventions
- Dynamic segments, catch-all, and optional catch-all routes
- Route groups for organizational flexibility
- Hands-on: Build a multi-section application with route groups
Module 2: Parallel and Intercepting Routes
- Parallel routes with slots
- Conditional rendering with parallel routes
- Intercepting routes for modals
- Hands-on: Build a photo gallery with modal intercepts
Module 3: Navigation and Linking
- Link component and programmatic navigation
- Active link detection
- Scroll restoration and shallow routing
- Hands-on: Implement complex navigation with breadcrumbs
Day 2: Server Components Mastery
Module 4: Server Component Architecture
- React Server Components model
- Server vs client component rendering
- Serialization boundaries and constraints
- Hands-on: Architect a component tree with optimal boundaries
Module 5: Data Fetching Patterns
- Async Server Components for data fetching
- Request memoization and deduplication
- Parallel vs sequential data fetching
- Hands-on: Implement a dashboard with parallel data loading
Module 6: Streaming and Suspense
- Streaming Server Rendering
- Suspense boundaries for progressive loading
- Loading UI with loading.js conventions
- Hands-on: Build a streaming dashboard with skeleton loaders
Day 3: Caching and Advanced Patterns
Module 7: Caching Strategies
- Full Route Cache and Data Cache
- Cache invalidation with revalidatePath and revalidateTag
- Time-based and on-demand revalidation
- Hands-on: Implement multi-layer caching for a content site
Module 8: Incremental Static Regeneration
- Static and dynamic rendering modes
- ISR configuration and patterns
- generateStaticParams for static generation
- Hands-on: Build an ISR-powered blog with on-demand revalidation
Module 9: Error Handling and Edge Cases
- Error boundaries with error.js
- Not-found handling with not-found.js
- Global error handling patterns
- Hands-on: Implement comprehensive error handling across routes
Prerequisites
- Next.js Fundamentals or equivalent experience
- Strong React knowledge (hooks, context, component patterns)
- Understanding of server-side rendering concepts
- Familiarity with async/await and Promises
Delivery Formats
| Format | Description |
|---|---|
| In-Person | On-site at your company's location, hands-on with direct interaction |
| Live Online | Interactive virtual sessions with screen sharing and real-time labs |
| Hybrid | Combination of on-site and remote sessions, flexible scheduling |
All formats include hands-on labs, course materials, architecture diagrams, and post-training support.
Ready to get started?
Request a training quote for your team — in-person, live-online, or hybrid.