Introduction
Next.js 14 introduced powerful new features with the App Router. Let's explore how to use server components and streaming to build faster applications.
Server Components
Server Components run on the server, reducing JavaScript sent to the client:
Server Component Example
1// app/products/page.tsx
2async function getProducts() {
3const res = await fetch('https://api.example.com/products');
4return res.json();
5}
6
7export default async function ProductsPage() {
8const products = await getProducts();
9
10return (
11 <div>
12 <h1>Products</h1>
13 {products.map((product) => (
14 <ProductCard key={product.id} product={product} />
15 ))}
16 </div>
17);
18}Streaming with Suspense
Use Suspense boundaries for progressive loading:
Streaming with Suspense
1import { Suspense } from 'react';
2
3export default function Page() {
4return (
5 <div>
6 <Suspense fallback={<Loading />}>
7 <ProductList />
8 </Suspense>
9 <Suspense fallback={<Loading />}>
10 <ReviewsList />
11 </Suspense>
12 </div>
13);
14}Conclusion
Next.js 14's App Router provides powerful tools for building modern web applications with better performance and developer experience.