Серверний і клієнтський бандли · fullstack.org.ua

fullstack.org.ua

Серверний і клієнтський бандли · fullstack.org.ua

// app/products/page.tsx
import { getProducts } from "@/lib/products";

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <main>
      <h1>Товари</h1>

      <ul>
        {products.map((product) => (
          <li key={product.id}>
            {product.name}: {product.price} грн
          </li>
        ))}
      </ul>
    </main>
  );
}

tsx

// components/counter.tsx
"use client";

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Натиснуто: {count}
    </button>
  );
}

tsx

// components/product-filter.tsx
"use client";

import { formatPrice } from "@/lib/format-price";
import { expensiveServerUtility } from "@/lib/expensive-server-utility";

export function ProductFilter() {
  // ...
}

typescript

// lib/products.ts
import "server-only";

type Product = {
  id: string;
  name: string;
  price: number;
};

export async function getProducts(): Promise<Product[]> {
  const response = await fetch("https://api.example.com/products", {
    headers: {
      Authorization: `Bearer ${process.env.PRODUCTS_API_TOKEN}`,
    },
    next: {
      revalidate: 60,
    },
  });

  if (!response.ok) {
    throw new Error("Не вдалося отримати товари");
  }

  return response.json();
}

tsx

// app/products/page.tsx
import { getProducts } from "@/lib/products";
import { ProductList } from "@/components/product-list";

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <main>
      <h1>Товари</h1>
      <ProductList products={products} />
    </main>
  );
}

tsx

// components/product-list.tsx
"use client";

type Product = {
  id: string;
  name: string;
  price: number;
};

type ProductListProps = {
  products: Product[];
};

export function ProductList({ products }: ProductListProps) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <button type="button" onClick={() => alert(product.name)}>
            {product.name} — {product.price} грн
          </button>
        </li>
      ))}
    </ul>
  );
}

tsx

// components/dashboard.tsx
"use client";

import { getDashboardData } from "@/lib/dashboard";
import { formatCurrency } from "@/lib/format-currency";

export function Dashboard() {
  // Клієнтський компонент не повинен сам отримувати серверні дані
  // через серверну функцію з приватними залежностями.
  const data = getDashboardData();

  return <div>{formatCurrency(data.total)}</div>;
}

tsx

// app/dashboard/page.tsx
import { getDashboardData } from "@/lib/dashboard";
import { DashboardControls } from "@/components/dashboard-controls";

export default async function DashboardPage() {
  const data = await getDashboardData();

  return (
    <main>
      <h1>Панель керування</h1>
      <p>Загальна сума: {data.total} грн</p>
      <p>Кількість записів: {data.items}</p>

      <DashboardControls />
    </main>
  );
}

tsx

// components/dashboard-controls.tsx
"use client";

import { useState } from "react";

export function DashboardControls() {
  const [isDetailsVisible, setDetailsVisible] = useState(false);

  return (
    <section>
      <button
        type="button"
        onClick={() => setDetailsVisible((visible) => !visible)}
      >
        {isDetailsVisible ? "Сховати деталі" : "Показати деталі"}
      </button>

      {isDetailsVisible && <p>Додаткові деталі панелі</p>}
    </section>
  );
}

tsx

// app/page.tsx
"use client";

import { Header } from "@/components/header";
import { ProductList } from "@/components/product-list";
import { Footer } from "@/components/footer";

export default function HomePage() {
  return (
    <>
      <Header />
      <ProductList />
      <Footer />
    </>
  );
}

tsx

// app/page.tsx
import { Header } from "@/components/header";
import { ProductList } from "@/components/product-list";
import { Footer } from "@/components/footer";

export default function HomePage() {
  return (
    <>
      <Header />
      <ProductList />
      <Footer />
    </>
  );
}

tsx

// components/product-list.tsx
"use client";

export function ProductList() {
  return (
    <button type="button" onClick={() => console.log("Фільтр змінено")}>
      Змінити фільтр
    </button>
  );
}

tsx

// components/report-preview.tsx
"use client";

import dynamic from "next/dynamic";

const ReportChart = dynamic(() => import("./report-chart"), {
  loading: () => <p>Завантаження графіка...</p>,
});

export function ReportPreview() {
  return (
    <section>
      <h2>Звіт</h2>
      <ReportChart />
    </section>
  );
}