🚀 Shallow Routing in Next.js

Shallow Routing in Next.js allows updating the URL without re-running data fetching methods like getServerSideProps or getStaticProps. This is useful for UI updates without triggering a full page refresh.

📌 1. Why Use Shallow Routing?

✔️ Prevents unnecessary re-fetching of data
✔️ Improves performance by avoiding full re-renders
✔️ Ideal for filtering, pagination, and UI state updates

📌 2. How Shallow Routing Works

In Next.js, you can use router.push() or router.replace() with the shallow: true option.

javascript
<div>      <h1>Dashboard</h1>      {/* Navigation Tabs */}      <nav>        <button onClick={() => router.push("?tab=home", undefined, { shallow: true })}>Home</button>        <button onClick={() => router.push("?tab=profile", undefined, { shallow: true })}>Profile</button>      </nav>      {/* Tab Content */}      {tab === "home" && <p>Welcome to the Home tab!</p>}      {tab === "profile" && <p>Viewing Profile section.</p>}    </div>  );}

✅ Switching tabs updates the URL (?tab=profile) without fetching new data

📌 4. Shallow Routing with replace()

Use replace() instead of push() if you don’t want the update to be stored in browser history.

javascript
router.replace("?tab=profile", undefined, { shallow: true });

✅ This updates the URL but doesn’t add a new entry in the history stack

📌 5. When to Use Shallow Routing?

✅ For UI state updates (e.g., switching tabs, filters)
✅ For search or filter parameters in the URL
✅ For updating query strings without a full re-fetch

❌ Avoid shallow routing if you need to trigger getServerSideProps() or getStaticProps()

📌 6. Shallow Routing vs. Normal Routing