fullstack.org.ua

Client Components: клієнтські компоненти · fullstack.org.ua

Середній11 хв· Fullstack Team

Client Components: клієнтські компоненти

Додайте Client Components для стану, обробників подій, ефектів та браузерних API.

Коли потрібен Client Component

У Next.js компоненти за замовчуванням є Server Components. Вони підходять для:

отримання даних на сервері;
формування HTML;
роботи з серверними ресурсами;
зменшення кількості JavaScript у браузері.

Client Components потрібні, коли компонент має працювати в браузері та використовувати:

стан через useState;
обробники подій: onClick, onChange, onSubmit;
ефекти через useEffect;
браузерні API: window, document, localStorage, navigator;
інтерактивні React-компоненти, які залежать від цих можливостей.

Щоб позначити компонент як клієнтський, на початку файлу потрібно додати директиву:

tsx

"use client";

tsx

"use client";

import { useEffect, useState } from "react";

const STORAGE_KEY = "lesson-counter";

export default function InteractiveCounter() {
  const [count, setCount] = useState(0);
  const [isOnline, setIsOnline] = useState<boolean | null>(null);

  useEffect(() => {
    const savedCount = window.localStorage.getItem(STORAGE_KEY);

    if (savedCount !== null) {
      const parsedCount = Number(savedCount);

      if (Number.isFinite(parsedCount)) {
        setCount(parsedCount);
      }
    }
  }, []);

  useEffect(() => {
    window.localStorage.setItem(STORAGE_KEY, String(count));
    document.title = `Лічильник: ${count}`;
  }, [count]);

  useEffect(() => {
    const updateOnlineStatus = () => {
      setIsOnline(window.navigator.onLine);
    };

    updateOnlineStatus();

    window.addEventListener("online", updateOnlineStatus);
    window.addEventListener("offline", updateOnlineStatus);

    return () => {
      window.removeEventListener("online", updateOnlineStatus);
      window.removeEventListener("offline", updateOnlineStatus);
    };
  }, []);

  function increase() {
    setCount((currentCount) => currentCount + 1);
  }

  function decrease() {
    setCount((currentCount) => currentCount - 1);
  }

  function reset() {
    setCount(0);
  }

  return (
    <section>
      <h2>Інтерактивний лічильник</h2>

      <p>Поточне значення: {count}</p>

      <div>
        <button type="button" onClick={decrease}>
          −1
        </button>

        <button type="button" onClick={reset}>
          Скинути
        </button>

        <button type="button" onClick={increase}>
          +1
        </button>
      </div>

      <p>
        Статус мережі:{" "}
        {isOnline === null ? "перевіряємо..." : isOnline ? "онлайн" : "офлайн"}
      </p>
    </section>
  );
}

tsx

import InteractiveCounter from "./components/InteractiveCounter";

export default function HomePage() {
  return (
    <main>
      <h1>Сторінка з клієнтською взаємодією</h1>
      <InteractiveCounter />
    </main>
  );
}

tsx

"use client";

import { useState } from "react";

export default function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <button type="button" onClick={() => setLiked((current) => !current)}>
      {liked ? "Подобається" : "Вподобати"}
    </button>
  );
}

tsx

"use client";

import { useState } from "react";

type ProductCounterProps = {
  productName: string;
  initialCount: number;
};

export default function ProductCounter({
  productName,
  initialCount,
}: ProductCounterProps) {
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <h2>{productName}</h2>
      <p>Кількість: {count}</p>

      <button type="button" onClick={() => setCount((value) => value + 1)}>
        Додати
      </button>
    </div>
  );
}