Linking and Navigating in Next.js – Server Rendering, Prefetching, Streaming, and Fast Transitions

| Next.js navigation |

| prefetching |

| streaming |

| loading.tsx |

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.tsx is 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.