What this article is trying to solve
When a Next.js app starts to feel slow, the problem is usually not one big bug. It is often a mix of small choices that add up:
- too many client components
- large JavaScript bundles
- unoptimized images
- blocking data fetches
- rendering work that could have stayed static
- repeated calls to the same function
The good news is that most performance fixes are simple once you know where to look.
1. Use React Server Components by default
A lot of beginners add <code>use client</code> at the top of every file because it feels convenient. That works, but it also sends more JavaScript to the browser than necessary. In Next.js, prefer React Server Components unless you truly need browser-only features like state, effects, or click handlers.
// app/page.tsx
// Server Component by default
import { ProductList } from "@/components/product-list";
export default async function Page() {
const products = await fetch("https://example.com/api/products").then((res) =>
res.json(),
);
return <ProductList products={products} />;
}Why this helps:
- less client-side JavaScript
- faster initial page load
- simpler components when you only need to render data
Only add <code>use client</code> when the component needs interactivity.
2. Optimize images with Next.js Image
The standard <code><img></code> tag works, but it does not give you automatic resizing, lazy loading, or built-in optimization. Use the Next.js <code>Image</code> component instead.
import Image from "next/image";
export function ProfileCard() {
return (
<div>
<Image
src="/avatar.jpg"
alt="Profile photo"
width={160}
height={160}
priority={false}
/>
<p>Jay Chothiyawala</p>
</div>
);
}Why this helps:
- images can be served in better sizes
- modern formats may be used automatically
- the browser loads them more efficiently
If you only remember one rule, remember this: do not use <code><img></code> when the app already gives you a better image tool.
3. Reduce bundle size with native APIs
Many apps pull in heavy libraries for tasks that the browser can already do. For example, instead of adding a utility library for simple array or URL work, use built-in JavaScript APIs first.
const params = new URLSearchParams(window.location.search);
const page = Number(params.get("page") ?? 1);
const sortedNames = names.toSorted();
const uniqueTags = [...new Set(tags)];This does not mean "never use libraries." It means:
- use native APIs for simple jobs
- keep dependencies only when they add real value
- avoid bringing in a large package for one or two small helpers
A smaller bundle usually means faster downloads and less work for the browser.
4. Stream with Suspense instead of blocking the page
If one slow data request holds the whole page hostage, users wait longer than they need to. With <code>Suspense</code>, you can show part of the page immediately and let slower sections load afterward.
import { Suspense } from "react";
export default function DashboardPage() {
return (
<main>
<h1>Dashboard</h1>
<Suspense fallback={<p>Loading recent activity...</p>}>
<RecentActivity />
</Suspense>
</main>
);
}
async function RecentActivity() {
const activity = await fetch("https://example.com/api/activity").then((res) =>
res.json(),
);
return <pre>{JSON.stringify(activity, null, 2)}</pre>;
}Why this helps:
- the user sees content earlier
- the page feels faster
- slow sections do not freeze everything else
Think of Suspense as a way to say: "show what you can now, and fill in the rest when it is ready."
5. Keep layouts static and fetch sessions in a smaller client component
If a layout fetches user session data on the server, the entire layout can become dynamic. That can reduce caching and make static rendering harder. A better beginner pattern is to keep the layout static and put session-aware UI in a small client component.
// app/layout.tsx
import { SessionBadge } from "@/components/session-badge";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<header>
<SessionBadge />
</header>
{children}
</body>
</html>
);
}// components/session-badge.tsx
"use client";
import { useEffect, useState } from "react";
export function SessionBadge() {
const [name, setName] = useState<string | null>(null);
useEffect(() => {
fetch("/api/session")
.then((res) => res.json())
.then((data) => setName(data.user?.name ?? null));
}, []);
return <span>{name ? `Welcome, ${name}` : "Guest"}</span>;
}Why this helps:
- the layout can stay static
- only the small interactive part becomes client-side
- you avoid turning the whole page dynamic just for a session check
6. Use middleware for authentication
Authentication checks often belong at the edge, not inside every layout. Middleware can block or redirect requests before the app does more rendering work.
// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function middleware(request: NextRequest) {
const isLoggedIn = request.cookies.get("session")?.value;
if (!isLoggedIn && request.nextUrl.pathname.startsWith("/dashboard")) {
return NextResponse.redirect(new URL("/login", request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ["/dashboard/:path*"],
};Why this helps:
- auth happens earlier
- protected routes are easier to guard
- layouts stay focused on rendering, not request blocking
A useful rule: middleware is for access control, not for business logic.
7. Cache repeated function calls
Sometimes a page calls the same data fetch more than once. That can happen when different server components need the same data. React provides a <code>cache</code> function that helps reuse the result of repeated calls.
import { cache } from "react";
const getUser = cache(async (userId: string) => {
const response = await fetch(`https://example.com/api/users/${userId}`);
return response.json();
});
export default async function ProfilePage() {
const user = await getUser("123");
const userAgain = await getUser("123");
return (
<div>
<p>{user.name}</p>
<p>Cached call: {userAgain.name}</p>
</div>
);
}Why this helps:
- avoids duplicate work
- reduces repeated fetches in the same render path
- keeps server components efficient
This is especially useful when multiple components depend on the same data.
A simple beginner mental model
If you want an easy way to remember these techniques, use this checklist:
- keep as much as possible on the server
- send less JavaScript to the browser
- optimize big assets like images
- render slow parts later with Suspense
- keep layouts static when you can
- move auth checks to middleware
- reuse repeated data work with caching
Final takeaway
Performance in Next.js is usually about reducing unnecessary work. That means less client-side code, smaller assets, fewer blocking requests, and better reuse of data. If you start with those basics, most optimization decisions become much easier.