Comment écrire du code qui n'est exécuté que sur un côté de votre pile: frontend ou backend
Dans les composants de votre page, vous pouvez exécuter du code uniquement côté serveur ou côté client, mais en vérifiant lewindow
biens.
Cette propriété n'existe que dans le navigateur, vous pouvez donc vérifier
if (typeof window === 'undefined') {
}
et ajoutez le code côté serveur dans ce bloc.
De même, vous ne pouvez exécuter du code côté client qu'en cochant
if (typeof window !== 'undefined') {
}
Astuce JS: nous utilisons le
typeof
ici car nous ne pouvons pas détecter une valeur indéfinie d'une autre manière. On ne peut pas faireif (window === undefined)
car nous obtiendrions une erreur d'exécution «la fenêtre n'est pas définie»
Next.js, en tant qu'optimisation au moment de la construction, supprime également le code qui utilise ces vérifications des bundles. Un bundle côté client n'inclura pas le contenu encapsulé dans unif (typeof window === 'undefined') {}
bloquer.
Téléchargez mon gratuitManuel Next.js
Plus de prochains tutoriels:
- Premiers pas avec Next.js
- Next.js vs Gatsby vs create-react-app
- Comment installer Next.js
- Lier deux pages dans Next.js à l'aide de Link
- Contenu dynamique dans Next.js avec le routeur
- Flux de données vers un composant Next.js à l'aide de getInitialProps
- Styliser les composants Next.js à l'aide de CSS
- Pré-extraire du contenu dans Next.js
- Utilisation du routeur pour détecter le lien actif dans Next.js
- Afficher la source pour confirmer que SSR fonctionne dans Next.js
- Next.js: remplissez la balise head avec des balises personnalisées
- Déployer une application Next.js maintenant
- Next.js: exécutez le code uniquement côté serveur ou côté client dans Next.js
- Déployer une application Next.js en production
- Comment analyser les bundles d'applications Next.js
- Modules de chargement paresseux dans Next.js
- Ajout d'un composant wrapper à votre application Next.js
- Les icônes ajoutées par Next.js à votre application
- Les offres groupées d'applications Next.js
- Comment utiliser le routeur Next.js
- Comment utiliser les routes d'API Next.js
- Comment obtenir des cookies côté serveur dans une application Next.js
- Comment changer le port d'une application Next.js