🔗 Linking & Navigating

Next.js provides fast navigation using server rendering + client-side transitions

⚙️ How Navigation Works

Next.js uses:

• Server Rendering

• Prefetching

• Streaming

• Client-side transitions

🖥️ Server Rendering

👉 Pages are rendered on the server

Types:

• Prerendering → build time (fast)

• Dynamic Rendering → request time

✔ Server sends data → client shows UI

⚡ Prefetching

👉 Loads pages in background before user clicks

plaintext

import Link from 'next/link';

<Link href="/blog">Blog</Link>

✔ Automatic with <Link>
✔ Makes navigation instant

📊 Prefetch Behavior

• Static routes → fully prefetched

• Dynamic routes → partially or skipped

🌊 Streaming

Loads page in parts (faster UI)

plaintext

app/dashboard/loading.tsx

plaintext

export default function Loading() {
  return <p>Loading...</p>;
}

✔ Shows loading UI first

✔ Then loads real content

🔄 Client-Side Navigation

👉 No full page reload

✔ Keeps layout
✔ Updates only page content

🚀 Benefits

• Faster navigation

• Better user experience

• No page refresh

• Smooth transitions

⚠️ Why Navigation Can Be Slow

1. Dynamic routes without loading.tsx

Fix: add loading UI

2. Missing generateStaticParams

Fix: enable static generation

3. Slow network

Use loading indicators

🛑 Disable Prefetch (Optional)

plaintextCopy

<Link href="/blog" prefetch={false}>Blog</Link>

✔ Use when many links (performance optimization)

🧠 Advanced Navigation

🔹 pushState

plaintext

window.history.pushState(null, '', '?sort=asc');

✔ Adds new history entry

🔹 replaceState

plaintext

window.history.replaceState(null, '', '/en/about');

✔ Replaces current history