Next.js App Router in Production
The Next.js App Router has matured significantly. Here’s how we use it at Ruzora to build the Developer Portal — a full-stack application serving placed engineers across Latin America.
Server Components by Default
With the App Router, components are server components by default. This means less JavaScript shipped to the client and faster initial page loads. Our blog pages are fully server-rendered with force-static for SSG.
Client Components When Needed
Add the "use client" directive only when you need interactivity, browser APIs, or React hooks like useState and useEffect. All our portal dashboard pages are client components since they use React Query for live data fetching.
Data Fetching Patterns
Server components can fetch data directly at the component level. Client components work great with @tanstack/react-query for cached, reactive data fetching with automatic revalidation.
We use route groups (portal) and (public) to separate authenticated and public pages, with Next.js middleware handling the auth redirect logic.
Key Vocabulary
/ Vocabulario ClaveStatic Site Generation — pages built at build time
“Blog pages use SSG for fast loading.”
A React component that renders on the server
“Server components reduce JavaScript bundle size.”
The process of making server-rendered HTML interactive
“Client components need hydration to become interactive.”
Code that runs between request and response
“Next.js middleware handles authentication redirects.”
A way to organize routes without affecting the URL
“We use (portal) and (public) route groups.”
Comprehension Check
/ Verificación de Comprensión1. What does SSG stand for?
2. When should you use 'use client' in Next.js?
3. What is 'hydration' in React?
4. What is the benefit of server components?
