Riepilogo: Server e Client
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 22 di 47.
Sfida
MedioRiepilogo del capitolo: stabilisci tu il confine tra server e client.
La pagina elenca i piatti sul server, ma inserisce anche un onClick direttamente in un pulsante, quindi l'app non verrà renderizzata. Risolvi il problema senza contrassegnare la pagina come componente client:
- In
components/OpenHours.jsx, crea un componente client ('use client'alla riga 1) che memorizzi in uno stato un booleanoopene visualizzi un pulsante conid="toggle". Il testo deve essereShow hoursquando è chiuso eHide hoursquando è aperto. - Quando è aperto, visualizza anche un
<p>conid="hours"e il testoOpen 9am-5pm. Quando è chiuso, quel paragrafo non deve esistere. - In
app/page.jsx, sostituisci il pulsante non funzionante e il paragrafo sempre visibile con<OpenHours />, importato da'../components/OpenHours'. L'intestazione e l'elenco dei piatti devono rimanere esattamente come sono: la pagina resta un componente server.
Provalo tu
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Tutte le lezioni di Nozioni essenziali di Next.js
4Server e Client
Due tipi di componentiLeggere l'erroreLa riga 'use client'Mantieni piccole le parti ClientServer dentro ClientRiepilogo: Server e Client7Navigazione lato client
Il link attivoRouting programmaticoFiltrare con l'URLGestori delle routeRiepilogo: navigazione2Routing e collegamenti
Le cartelle sono routeRoute annidateCollegare le pagineRoute dinamichePagine non trovateRiepilogo: routing5Dati sul server
Componenti asincroniIn attesa dei parametri della routeDue fetch contemporaneiStati di caricamentoGestione degli erroriRiepilogo: recupero dei dati8Progetto: Coddy Eats
Passaggio 1: La struttura
Passaggio 2: La griglia del menuPassaggio 3: Le pagine dei piattiPassaggio 4: Stato di caricamentoPassaggio 5: Titoli delle paginePassaggio 6: Aggiungi al carrelloPassaggio 7: Filtro per categoriaPassaggio 8: Lascia una recensionePassaggio 9: Ricerca in tempo reale