Dynamic Data Fetching

Fetching Route Params & Query Params in modern Next.js (App Router) + use() hook.

1. Big Picture

In modern Next.js (App Router), URL data is accessed in two primary ways: Route Params (dynamic segments like /user/123) and Query Params (search strings like ?page=2).

🔵 1. Route Params

Dynamic segments in the URL path.

/profile/shivam

👉 shivam = route param

🟢 2. Query Params

Search strings following the ? symbol.

/products?category=electronics

👉 category = query param

2. Types & Folder Structure

3. Folder Structure (App Router)

📁 app/

└── 📁 profile/

└── 📁 [username]/

└── page.js

👉 [username] → dynamic segment

Feature	params	searchParams
Source	URL path	Query string
Example	/user/123	?page=2
Async	Yes	Yes

4. Server Component Access

⚠️ NEW (Important Change)

In newer Next.js versions, params can behave like a Promise. You must await them or unwrap them.

Async Version (Recommended)

javascript

export default async function Page({ params }) {
  const { username } = await params;

  return <div>{username}</div>;
}

5. Accessing Query Params

SearchParams follow the same async pattern in Server Components.

Async searchParams

javascript

export default async function Page({ searchParams }) {
  const { category } = await searchParams;

  return <div>Category: {category}</div>;
}

6. The use() Hook (VERY IMPORTANT)

Definition

use() is a React hook that unwraps Promises directly inside components.

📊 Concept

PROMISE

use()

RESOLVED VALUE

⚠️ Rules of use()

Works in Server Components
Works with Suspense
❌ Avoid in Client Components
❌ Not for event handlers

Example with Params

javascript

import { use } from "react";

export default function Page({ params }) {
  // Directly unwrap params promise
  const { username } = use(params);

  return <div>{username}</div>;
}

Example with Fetch

javascript

import { use } from "react";

function getData() {
  return fetch("https://api").then(res => res.json());
}

export default function Page() {
  const data = use(getData());

  return <div>{data.name}</div>;
}

8. Client-Side Param Access

Route Params

javascript

"use client";
import { useParams } from "next/navigation";

export default function Page() {
  const params = useParams();
  return <div>{params.username}</div>;
}

Query Params

javascript

"use client";
import { useSearchParams } from "next/navigation";

export default function Page() {
  const searchParams = useSearchParams();
  return <div>{searchParams.get("category")}</div>;
}

Feature	Server	Client
Route params	params	useParams()
Query params	searchParams	useSearchParams()
Async support	Yes	No
Performance	Better	Moderate

10. Why Async Params? (Interview Gold)

Enabling Modern Framework Features

By making params async, Next.js can begin rendering parts of your page before the URL segments are even fully processed.

StreamingConcurrent RenderingNon-blocking UI

Performance Insight

Server

RESOLVE → HTML

✔ Faster + SEO

Client

JS LOAD → RESOLVE

❌ Slower initial

12. Common Mistakes

❌ Mismatched Context

Using useParams() in Server Components (it's a hook!).

❌ Missing Await

Not awaiting params in Next.js 15+ Server Components.

❌ use() Overuse

Using use() when a simple await is cleaner.

❌ Encoding Issues

Forgetting to handle URL decoding (decodeURIComponent).

13. Interview Questions

Next.js URLs are the single source of truth for both resource identity and view state.

Identity + State + Performance

Previous: Data Fetching Next: Auth & Security