Next.js 14 App Router fundamentally changes how React applications render and fetch data. Leveraging Server Components and Parallel Routes allows developers to deliver lightning-fast enterprise web platforms.
1. Server Components vs Client Component Boundaries
A common anti-pattern is placing 'use client' at the root layout or high-level page component. Always push client directives down to the leaves of your component tree (e.g. interactive buttons, dropdowns, forms).
- Keep data fetching strictly inside async Server Components
- Use React Suspense boundaries for progressive streaming UI
- Leverage Route Handlers (/api/...) for secure mutation endpoints
tsx
// App Router Server Component
import { Suspense } from "react";
import ClientWidget from "@/components/ClientWidget";
export default async function Page() {
const data = await fetch("https://api.appduniya.co.in/data", {
next: { revalidate: 3600 } // Edge Cache 1hr
}).then(res => res.json());
return (
<main>
<h1>{data.title}</h1>
<Suspense fallback={<p>Loading interactive widget...</p>}>
<ClientWidget initialData={data.metrics} />
</Suspense>
</main>
);
}Key Technical Takeaways
- 1Isolate 'use client' to small interactive leaf components.
- 2Utilize Next.js Edge Caching and revalidate intervals for fast static delivery.
- 3Use Suspense fallbacks to prevent layout shifts and improve Core Web Vitals.