get params and searchParams on server side

🎯 Введение: От клиента к серверу

На клиентской стороне в Next.js для получения параметров из URL мы привыкли использовать хуки, такие как useParams и useSearchParams. Но что делать, если мы работаем с серверным компонентом, где хуки недоступны? Как получить те же самые данные, но уже на сервере?

Можно провести простую аналогию: если клиентская страница — это интерактивная анкета, которую пользователь заполняет сам в браузере, то серверная страница — это документ, который уже подготовлен для него на сервере на основе его первоначального запроса.

Цель — пошагово разобраться, как серверные компоненты Next.js получают доступ к динамическим параметрам и параметрам запроса из URL, чтобы заранее подготовить нужный контент.

1. 🧩 Два типа параметров в URL: params и searchParams

Серверный компонент страницы в Next.js получает всю необходимую информацию из URL через входящие свойства — props. Среди них есть два ключевых объекта, которые нас интересуют: params и searchParams.

Проще говоря, params — это часть основного "адреса" страницы, а searchParams — это "дополнительные инструкции" или фильтры, уточняющие запрос к этому адресу.

Теперь, когда мы понимаем, что мы ищем, давайте разберемся, как это получить в коде.

2. 🧑‍💻 Пошаговое руководство: Получаем параметры в серверном компоненте

Следуйте этим шагам, чтобы получить доступ к параметрам URL в вашем серверном компоненте.

Шаг 1: Создание динамического маршрута📂

Чтобы Next.js понимал, какая часть URL является динамическим параметром, необходимо создать папку с названием в квадратных скобках.

• Пример: Структура папок app/books/[id]/page.tsx создаст динамический маршрут, где [id] будет захватывать любую строку после /books/. Например, /books/12, /books/react-for-beginners и т.д.

Шаг 2: Доступ к параметрам через props 📥

Серверный компонент страницы автоматически получает params и searchParams в качестве props. Это обычные JavaScript-объекты, доступные сразу. Вам нужно лишь объявить их в сигнатуре функции компонента.

Шаг 3: Главный секрет — асинхронный компонент ⚡

Это "особые" props, которые Next.js автоматически передает на страницу, анализируя URL запроса.

Вот ключевой момент, который открывает все возможности серверных компонентов. Сама функция компонента страницы может быть объявлена как async. Это позволяет использовать await внутри компонента, но не для получения props — они доступны сразу.

🔧 Асинхронность нужна для того, чтобы выполнять серверные операции, такие как:

• Запросы к базе данных 🗄️
• Обращение к внешним API 🌐
• Чтение файлов 📁

...и дожидаться их завершения перед рендерингом страницы.

Шаг 4: Извлечение и отображение данных 🖥️

Теперь соберем все вместе. Мы можем сделать компонент асинхронным, чтобы в будущем добавить загрузку данных, и получить доступ к параметрам напрямую.

import styles from '../../page.module.css';
 
type Props = {
    params: Promise<{id: string}>
    searchParams: Promise<{[key: string]: string}>
}
 
export default async function Home(props: Props) {
    const params = await props.params
    const searchParams = await props.searchParams
 
    const data = await fetch(`https://jsonplaceholder.typicode.com/todos/${params.id}`)
    const todoList = await data.json()
 
    return (
        <div className={styles.page}>
            <main className={styles.main}>
                Books
                <div>{params.id}</div>
                <div>title: {searchParams.title}</div>
                <div>descrition: {searchParams.descrition}</div>
                <div>{todoList?.title}</div>
            </main>
        </div>
    );
}

🎯 Ключевая идея

Мы используем id из URL, чтобы запросить на сервере данные именно для этого идентификатора. В результате:

• ✅ Пользователь сразу получает полностью готовую страницу с нужным контентом (например, книгу с ID=12)
• ❌ Не получает пустую страницу, которая будет загружать данные на клиенте

Этот подход превращает статические маршруты в динамические страницы с предзагруженными данными!

📝 Итоги и закрепление знаний

1. 🔧 Доступ через props

Серверные страницы получают параметры URL не через хуки, а через обычные объекты:

• params — для динамических сегментов пути
• searchParams — для параметров запроса (query string)

2. ⏳ Асинхронные компоненты для данных

• Компонент страницы должен быть async
• Это позволяет использовать await для загрузки данных (например, через fetch)
• Загрузка происходит на основе полученных params и searchParams

3. 🚀 Динамический рендеринг

Главное преимущество — возможность:

• 📥 Запрашивать данные на сервере
• ✨ Подставлять их в разметку до отправки клиенту
• ⚡ Делать страницы по-настоящему динамическими и быстрыми

🎓 Что мы получили в итоге?

Суть: Серверные компоненты + параметры URL = 💫 Мощный инструмент для создания быстрых, динамичных приложений!