Пошук уроків, статей та іншого контенту
З’ясуєте, як Server Components впливають на метадані, індексацію, доступність контенту та швидкість сторінок.
У Next.js з App Router компоненти є Server Components за замовчуванням. Вони виконуються на сервері, а браузер отримує готовий HTML разом із необхідними даними.
Це важливо для SEO, тому що основний контент сторінки:
присутній у початковій HTML-відповіді;
може бути прочитаний пошуковими роботами без очікування виконання JavaScript;
не потребує завантаження окремого JavaScript-коду для простого відображення;
швидше стає доступним користувачу та допоміжним технологіям.
Server Components не гарантують автоматично високі позиції в пошуку. Вони лише створюють сприятливу основу: контент і метадані формуються на сервері, а клієнту не потрібно збирати сторінку з нуля.
У Next.js метадані задають за допомогою:
статичного об’єкта metadata;
асинхронної функції generateMetadata.
Експортувати їх можна з layout.tsx або page.tsx, які залишаються Server Components.
Статичні метадані підходять для сторінок, де заголовок і опис не залежать від параметрів маршруту.
// app/layout.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'),
title: {
default: 'Каталог товарів',
template: '%s | Каталог товарів',
},
description: 'Переглядайте товари в нашому каталозі.',
openGraph: {
title: 'Каталог товарів',
description: 'Переглядайте товари в нашому каталозі.',
type: 'website',
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="uk">
<body>{children}</body>
</html>
);
}Для окремої сторінки можна задати власний заголовок:
// app/about/page.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Про компанію',
description: 'Інформація про нашу компанію та її послуги.',
};
export default function AboutPage() {
return (
<main>
<h1>Про компанію</h1>
<p>Ми створюємо програмне забезпечення для бізнесу.</p>
</main>
);
}Значення title.template з layout застосовується до дочірньої сторінки. У результаті заголовок сторінки буде таким:
Про компанію | Каталог товарівДля сторінки товару або статті метадані часто залежать від параметра маршруту. У такому випадку використовується generateMetadata.
// app/products/[slug]/page.tsx
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
type Product = {
slug: string;
name: string;
description: string;
};
type ProductPageProps = {
params: Promise<{ slug: string }>;
};
async function getProduct(slug: string): Promise<Product | null> {
const response = await fetch(
`https://api.example.com/products/${encodeURIComponent(slug)}`,
{
cache: 'force-cache',
},
);
if (!response.ok) {
return null;
}
return response.json();
}
export async function generateMetadata({
params,
}: ProductPageProps): Promise<Metadata> {
const { slug } = await params;
const product = await getProduct(slug);
if (!product) {
return {
title: 'Товар не знайдено',
description: 'Запитаний товар відсутній у каталозі.',
};
}
return {
title: product.name,
description: product.description,
openGraph: {
title: product.name,
description: product.description,
type: 'website',
},
};
}
export default async function ProductPage({
params,
}: ProductPageProps) {
const { slug } = await params;
const product = await getProduct(slug);
if (!product) {
notFound();
}
return (
<main>
<h1>{product.name}</h1>
<p>{product.description}</p>
</main>
);
}generateMetadata виконується на сервері. Створені нею елементи title, meta та інші SEO-метадані додаються Next.js до документа сторінки.
Під час розробки важливо перевіряти не тільки DOM після виконання JavaScript, а й початкову HTML-відповідь. Саме вона показує, який контент і метадані сторінка віддає сервером.
Server Components допомагають пошуковим роботам побачити контент одразу. Наприклад, такий заголовок:
<h1>Курси Next.js для розробників</h1>буде частиною HTML, який повертає сервер. Для його появи в браузері не потрібно чекати на завантаження клієнтського компонента.
Це особливо корисно для:
заголовків і описів сторінки;
тексту статей;
назв товарів;
навігаційних посилань;
структурованого основного контенту.
Водночас індексація залежить не лише від Server Components. Потрібно також, щоб:
сторінка була доступною для пошукового робота;
сервер повертав коректний статус відповіді;
важливий контент не був прихований через помилку або неправильну логіку;
сторінка мала зрозумілу структуру заголовків;
внутрішні сторінки були доступні через звичайні посилання.
Server Component із порожнім або неповним HTML не покращує SEO лише через сам факт виконання на сервері.
use clientClient Component потрібен для інтерактивності: обробки подій, стану, ефектів або доступу до API браузера.
// app/components/LikeButton.tsx
'use client';
import { useState } from 'react';
export function LikeButton() {
const [liked, setLiked] = useState(false);
return (
<button type="button" onClick={() => setLiked((value) => !value)}>
{liked ? 'Подобається' : 'Подобається?'}
</button>
);
}Інтерактивну частину можна помістити всередину Server Component:
// app/articles/[slug]/page.tsx
import { LikeButton } from '@/app/components/LikeButton';
export default async function ArticlePage() {
const article = {
title: 'Server Components у Next.js',
text: 'Основний текст статті формується на сервері.',
};
return (
<main>
<h1>{article.title}</h1>
<p>{article.text}</p>
<LikeButton />
</main>
);
}У цьому прикладі:
заголовок і текст статті можуть бути присутніми в початковому HTML;
JavaScript потрібен лише для кнопки;
інтерактивна кнопка не змушує всю сторінку стати Client Component.
Чим більша частина сторінки є Client Component, тим більше клієнтського JavaScript може знадобитися для її роботи. Це впливає на обсяг завантаження, час гідратації та швидкість взаємодії.
Server Components позитивно впливають на доступність не безпосередньо, а завдяки тому, що HTML формується раніше та містить основний контент.
Для доступної сторінки потрібно використовувати правильну HTML-структуру:
export default function CoursePage() {
return (
<main>
<article>
<h1>Основи Next.js</h1>
<p>
Курс пояснює маршрутизацію, Server Components і роботу з даними.
</p>
<h2>Для кого цей курс</h2>
<p>Для розробників, які вже знають JavaScript і React.</p>
<a href="/courses/nextjs/lessons/1">
Перейти до першого уроку
</a>
</article>
</main>
);
}Важливі правила:
використовувати один зрозумілий h1 для головної теми сторінки;
не замінювати посилання на div з обробником кліку;
застосовувати button для дій;
зберігати логічний порядок заголовків;
надавати змістовні назви посиланням;
не приховувати основний текст до завершення роботи JavaScript.
Server Rendering не виправляє неправильну семантику. Сервер може віддати HTML, який однаково буде незручним для користувача, якщо він побудований з несемантичних елементів.
Server Components можуть покращити швидкість, оскільки:
не весь код компонента надсилається до браузера;
основний HTML можна отримати до завершення гідратації;
зменшується обсяг JavaScript для статичного контенту;
контент і метадані генеруються в одному серверному процесі.
Але серверний рендеринг також має вартість. Якщо сторінка очікує повільний запит до API, користувач може довше чекати на відповідь сервера.
Тому важливо:
не виконувати непотрібні запити під час генерації метаданих;
не завантажувати великі дані лише заради title або description;
використовувати кешування там, де воно відповідає вимогам сторінки;
залишати в Client Components тільки інтерактивні частини.
Особливу увагу слід приділити generateMetadata. Якщо для заголовка сторінки виконується повільний запит, він може вплинути на час підготовки метаданих і відповіді.
title і description допомагають описати сторінку, але пошукова оптимізація не обмежується метатегами.
Для сторінки важливо мати:
зрозумілий h1;
корисний текст;
логічну структуру;
доступну навігацію;
коректні URL;
відповідність між заголовком, описом і фактичним вмістом.
Не варто генерувати заголовок із загальним текстом на кшталт Loading..., якщо на сервері вже можна отримати назву ресурсу. Таке значення погано описує сторінку і може з’явитися в метаданих або інтерфейсі під час завантаження.
metadata з Client ComponentУ файлі з 'use client' не можна використовувати серверний експорт metadata або generateMetadata.
Неправильний підхід:
'use client';
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Профіль',
};Метадані слід винести в батьківський layout.tsx або залишити сторінку Server Component, а Client Component використовувати лише для інтерактивної частини.
Не потрібно додавати 'use client' до сторінки лише через одну кнопку або форму. Винесіть інтерактивний елемент в окремий Client Component.
Якщо заголовок, опис або текст з’являються лише в useEffect, початковий HTML не містить цього контенту. Для публічних сторінок основні дані краще завантажувати в Server Component.
Динамічні сторінки каталогу або статей повинні мати власні заголовки й описи. Загальний title з layout може бути запасним значенням, але не повинен приховувати назву конкретного ресурсу.
Якщо компонент лише виводить текст, йому не потрібен 'use client'. Залишайте статичний контент Server Component, а клієнтську поведінку ізолюйте в невеликих компонентах.
Server Components формують HTML на сервері та роблять основний контент доступним без очікування клієнтського JavaScript.
Метадані задаються через metadata або generateMetadata у Server Components.
Для динамічних сторінок метадані можна створювати на основі параметрів маршруту та даних ресурсу.
Client Components потрібно використовувати для інтерактивності, але не для всього статичного контенту.
Server Rendering може покращити швидкість, однак повільні серверні запити все одно впливають на час відповіді.
SEO та доступність потребують семантичного HTML, зрозумілої навігації й корисного контенту — Server Components лише створюють для цього технічну основу.