Минимизация клиентских частей

Часть раздела Основы Next.js путешествия по React на Coddy — урок 20 из 47.

Когда странице нужна одна интерактивная кнопка, есть заманчивое простое решение: добавить 'use client' в самый верх страницы и пойти дальше. Это работает. Но это также самый распространенный способ выбросить всё, что вам только что дал Next.js.

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

Привычка, которая это исправляет, проста и механична:

Перенесите 'use client' вниз к листьям.

Вынесите интерактивную часть в отдельный небольшой файл, пометьте этот файл и оставьте страницу на сервере:

// app/page.jsx - всё ещё серверный компонент
import LikeButton from '../components/LikeButton';

export default function Home() {
    return (
        <main>
            <h1>Coddy Eats</h1>
            <LikeButton />
        </main>
    );
}

Два важных момента. Во-первых, серверный компонент может рендерить клиентский компонент: такое направление абсолютно нормально. Во-вторых, структура страницы не изменилась; переместился только один небольшой фрагмент.

Есть вторая ошибка, которая подталкивает к той же привычке. Поместите onClick прямо на button в server component, и среда выполнения остановит вас: Event handlers cannot be passed to Client Component props. Обработчик — это function: он не сможет пережить отправку в браузер, если только не находится в файле client.

Задание

Легко

На этой странице используется onClick на кнопке внутри серверного компонента, поэтому приложение вообще не отрендерится.

Исправьте это без маркировки страницы как клиентского компонента:

В components/LikeButton.jsx напишите клиентский компонент ('use client' в строке 1), который хранит количество лайков в состоянии и рендерит кнопку с id="like". Текст кнопки должен быть Likes: с последующим количеством.
В app/page.jsx удалите неработающую кнопку и отрендерите <LikeButton /> вместо нее. Импортируйте его из '../components/LikeButton'.
Оставьте заголовок и tagline точно в таком виде, в каком они есть: страница должна оставаться серверным компонентом.

Попробуйте сами

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}