Pattern di autenticazione per Next.js

Blog

Scopri come aggiungere l'autenticazione con Next.js. La guida copre i React Hook personalizzati, la protezione dei percorsi e il reindirizzamento sul server e include una varietà di esempi.



L'autenticazione verifica l'identità di un utente, mentre l'autorizzazione controlla ciò a cui un utente può accedere. Next.js supporta più modelli per l'autenticazione, ciascuno progettato per diversi casi d'uso. Questa guida ti permetterà di scegliere la tua avventura in base ai tuoi vincoli.

Modelli di autenticazione

Il primo passo per identificare quale modello di autenticazione è necessario è comprendere la strategia di recupero dei dati desiderata. Possiamo quindi determinare quali provider di autenticazione supportano questa strategia. Ci sono due strategie principali:



  • Usa la generazione statica per eseguire il rendering sul server di uno stato di caricamento, seguito dal recupero dei dati utente lato client.
  • Recupera i dati utente lato server per eliminare un flash di contenuto non autenticato.

Generazione statica

Next.js determina automaticamente che una pagina è statica se non ci sono requisiti di blocco dei dati. Ciò significa l'assenza di |_+_| e |_+_| nella pagina. Invece, la tua pagina può eseguire il rendering di uno stato di caricamento dal server, seguito dal recupero dell'utente lato client.

Un vantaggio di questo modello è che consente alle pagine di essere servite da un CDN globale e precaricato usando |_+_|. A seconda delle dimensioni della tua applicazione, Reagire all'idratazione potrebbe volerci del tempo. Se servi una shell di caricamento dal server, questo consente a React di idratarsi mentre stai recuperando i dati dell'utente. In pratica, questo si traduce in un TTI più veloce ( È ora di essere interattivo ).



Diamo un'occhiata a un esempio per una pagina del profilo. Questo renderà inizialmente uno scheletro di caricamento. Una volta che la richiesta per un utente è terminata, mostrerà il nome dell'utente.

getServerSideProps

#next #react #security #javascript #web-development

readob.io

Pattern di autenticazione per Next.js

Modelli di autenticazione per Next.js. Scopri come aggiungere l'autenticazione con Next.js. La guida copre i React Hook personalizzati, la protezione dei percorsi e il reindirizzamento sul server e include una varietà di esempi.