Due tipi di componenti

Ogni componente che hai scritto finora in questa sezione è stato eseguito in un punto che forse non hai notato: sul server. Non è una modalità speciale che hai attivato: è quella predefinita, ed è l’idea più importante di Next.js.

Esistono esattamente due tipi di componenti, e ciascuno ti offre qualcosa che l’altro non può offrirti.

Componenti server: l'impostazione predefinita

• Vengono eseguiti una sola volta, sul server, prima che la pagina venga inviata
• Possono essere async, quindi possono usare await sui dati direttamente all'interno del componente
• Non inviano JavaScript al browser: l'utente scarica il risultato, non il codice

Il problema: quando la pagina arriva al browser, un componente lato server è terminato. È un'istantanea. Non può ricordare nulla, reagire a un clic o cambiare.

Componenti client: attivazione esplicita

Quando hai bisogno che la pagina risponda, abiliti un file nel browser con una sola riga all’inizio:

'use client';

Questo contrassegna il file come componente client, e solo i componenti client possono usare:

• Hook: useState, useEffect e simili
• Gestori di eventi: onClick, onChange, …
• API del browser: window, localStorage

Nota il compromesso. Un componente server è veloce e silenzioso, ma statico. Un componente client è interattivo, ma il suo codice deve essere scaricato ed eseguito nel browser.

Quindi, d'ora in poi, la domanda da porsi per ogni componente non è "quale mi piace?", ma "questo componente specifico deve rispondere all'utente?" Se la risposta è no (e di solito lo è), lascialo sul server.