Podsumowanie: serwer i klient
Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 22 z 47.
Wyzwanie
ŚredniPodsumowanie rozdziału: samodzielnie wyznacz granicę między serwerem a klientem.
Strona wyświetla dania na serwerze, ale umieszcza też onClick bezpośrednio na przycisku, więc aplikacja w ogóle się nie renderuje. Napraw to, nie oznaczając strony jako komponentu klienckiego:
- W
components/OpenHours.jsxutwórz komponent kliencki ('use client'w linii 1), który przechowuje w stanie wartość logicznąopeni renderuje przycisk zid="toggle". Gdy jest zamknięty, jego tekst musi brzmiećShow hours, a gdy jest otwarty —Hide hours. - Gdy jest otwarty, renderuje również element
<p>zid="hours"i tekstemOpen 9am-5pm. Gdy jest zamknięty, ten akapit nie może istnieć. - W
app/page.jsxzastąp niedziałający przycisk i zawsze widoczny akapit elementem<OpenHours />, zaimportowanym z'../components/OpenHours'. Nagłówek i lista dań pozostają dokładnie takie same: strona nadal jest komponentem serwerowym.
Spróbuj swoich sił
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Wszystkie lekcje w sekcji Podstawy Next.js
4Serwer i klient
Dwa rodzaje komponentówOdczytywanie błęduLinia „use client”Ograniczaj części klienckieSerwer wewnątrz klientaPodsumowanie: serwer i klient7Nawigacja po stronie klienta
Aktywny linkRouting programowyFiltrowanie za pomocą URLObsługa trasPodsumowanie: nawigacja