Introduction
In Next.js, routes are server-rendered by default. This means the client waits for a server response before showing a new route. To improve this experience, Next.js uses prefetching, streaming, and client-side transitions to make navigation fast and smooth.
Server Rendering
Layouts and pages in Next.js are React Server Components by default. There are two types of server rendering:
- Static Rendering: Happens at build time or during revalidation and is cached.
- Dynamic Rendering: Happens at request time when the user navigates.
While server rendering ensures fresh data, it introduces a delay. Next.js solves this with prefetching and client-side transitions.
Prefetching
Prefetching loads a route in the background before the user clicks it. Next.js automatically prefetches routes linked with the <Link> component when they enter the viewport or are hovered:
// app/layout.tsx
import Link from 'next/link';
export default function Layout({ children }) {
return (
<html>
<body>
<nav>
<Link href="/blog">Blog</Link> {/* Prefetched */}
<a href="/contact">Contact</a> {/* Not prefetched */}
</nav>
{children}
</body>
</html>
);
}Prefetching behavior depends on the route type:
- Static Routes: Fully prefetched.
- Dynamic Routes: Skipped or partially prefetched if
loading.tsxis present.
Streaming
Streaming allows the server to send parts of a route as soon as they’re ready. This gives users immediate visual feedback, even if the full page isn’t loaded yet.
To enable streaming, add a loading.tsx file to your route folder:
// app/dashboard/loading.tsx
export default function Loading() {
return <LoadingSkeleton />;
}Next.js automatically wraps page.tsx in a <Suspense> boundary. The fallback UI from loading.tsx is shown first, then replaced with actual content.
Benefits of loading.tsx
- Instant navigation and visual feedback
- Shared layouts remain interactive
- Improved Core Web Vitals: TTFB, FCP, TTI
Conclusion
Next.js combines server rendering, smart prefetching, and streaming to deliver fast and responsive navigation. By using <Link> for transitions and loading.tsx for fallback UI, you can build user-friendly applications that feel instant and fluid.