Maîtrise des entretiens Next.js : questions essentielles (partie 8)

Guide d'entretien Next.js : 100 questions et réponses pour réussir (gratuit)

Libérez tout votre potentiel en maîtrisant Next.js avec le guide d'entretien Next.js : 100 questions et réponses pour réussir ?. Que vous débutiez en tant que développeur ou que vous soyez un professionnel expérimenté cherchant à faire passer vos compétences au niveau supérieur, cet e-book complet est conçu pour vous aider à réussir les entretiens Next.js et à devenir un candidat confiant et prêt à travailler. promoteur. Le guide couvre un large éventail de sujets Next.js, garantissant que vous êtes bien préparé pour toute question qui pourrait vous être posée. Cet e-book explore des concepts clés tels que le rendu côté serveur (SSR) ?, la génération de sites statiques (SSG ) ?, Régénération statique incrémentielle (ISR) ⏳, Routeur d'application ?️, Récupération de données ?, et bien plus encore. Chaque sujet est expliqué en détail, offrant des exemples concrets et des réponses détaillées aux questions d'entretien les plus fréquemment posées. En plus de répondre aux questions, le guide met en avant les bonnes pratiques ✅ pour optimiser vos applications Next.js, améliorer les performances ⚡ et assurer l'évolutivité ?. Avec Next.js en constante évolution, nous approfondissons également les fonctionnalités de pointe telles que React 18, Concurrent Rendering et Suspense ?. Cela garantit que vous êtes toujours au courant des dernières avancées et que vous disposez des connaissances recherchées par les enquêteurs. Ce qui distingue ce guide est son approche pratique. Il ne couvre pas seulement la théorie, mais fournit des informations exploitables que vous pouvez appliquer directement à vos projets. La sécurité ?, l'optimisation du référencement ? et les pratiques de déploiement ?️ sont également explorées en détail pour garantir que vous êtes prêt pour le cycle de vie complet du développement. Que vous vous prépariez pour un entretien technique dans une entreprise de haute technologie ou que vous cherchiez à construire plus efficacement, applications évolutives, ce guide vous aidera à perfectionner vos compétences Next.js et à vous démarquer de la concurrence. À la fin de ce livre, vous serez prêt à aborder n'importe quelle question d'entretien Next.js en toute confiance, des concepts fondamentaux aux défis de niveau expert. Équipez-vous des connaissances nécessaires pour exceller en tant que développeur Next.js ? et saisissez en toute confiance votre prochaine opportunité de carrière !

cyroscript.gumroad.com

71. Comment pouvez-vous contrôler les en-têtes de cache dans Next.js ?

Next.js vous permet de contrôler les en-têtes de cache pour les actifs statiques, les routes dynamiques et les routes API via next.config.js et les en-têtes personnalisés dans getServerSideProps ou les routes API.

1. Actifs statiques : Next.js gère automatiquement la mise en cache des actifs statiques dans le dossier public/, mais vous pouvez personnaliser les en-têtes de cache à l'aide de headers() dans next.config.js.
   

   module.exports = {
     async headers() {
       return [
         {
           source: '/(.*)',
           headers: [
             {
               key: 'Cache-Control',
               value: 'public, max-age=31536000, immutable',
             },
           ],
         },
       ];
     },
   };
   
   

2. Pages dynamiques : Pour les pages dynamiques générées lors de l'exécution, vous pouvez définir les en-têtes de cache dans la fonction getServerSideProps.
   

   export async function getServerSideProps() {
     const res = await fetch('<https:>');
     const data = await res.json();
   
     return {
       props: { data },
       headers: {
         'Cache-Control': 'public, max-age=60, stale-while-revalidate=30',
       },
     };
   }
   
   </https:>

3. Routes API : vous pouvez définir des en-têtes de cache dans les routes API pour contrôler la façon dont les réponses sont mises en cache.
   

   export default function handler(req, res) {
     res.setHeader('Cache-Control', 'public, max-age=3600, s-maxage=3600');
     res.json({ data: 'example' });
   }
   
   

72. Comment tester une application Next.js ?

Tester une application Next.js implique d'utiliser des outils tels que Jest, React Testing Library et Cypress pour des tests de bout en bout.

1. Tests unitaires : utilisez Jest et React Testing Library pour tester les composants et les hooks.
   

   npm install --save-dev jest @testing-library/react @testing-library/jest-dom
   
   

2. Test de route API : pour tester les routes API, vous pouvez utiliser supertest.
   

   npm install --save-dev supertest
   
   

   Exemple :
   

   import request from 'supertest';
   import app from './pages/api/hello';
   
   describe('GET /api/hello', () => {
     it('should return a 200 status code', async () => {
       const response = await request(app).get('/api/hello');
       expect(response.status).toBe(200);
     });
   });
   
   

3. Tests de bout en bout : utilisez Cypress pour tester les interactions complètes des utilisateurs.
   

   npm install --save-dev cypress
   
   

   Exemple :
   

   describe('Home Page', () => {
     it('should load correctly', () => {
       cy.visit('/');
       cy.contains('Welcome');
     });
   });
   
   

73. Quelle est la différence entre une application à page unique (SPA) et une application Next.js ?

• SPA (Single Page Application) : dans les SPA, l'ensemble de l'application se charge comme une seule page HTML et JavaScript gère le routage et le rendu. La page ne se recharge pas lors de la navigation entre les itinéraires, ce qui rend l'expérience utilisateur plus rapide mais plus lente à charger initialement.
• Application Next.js : Next.js combine les avantages de la SSR et de la RSE. Il permet un rendu hybride, dans lequel les pages peuvent être générées statiquement (SSG), rendues côté serveur (SSR) ou rendues côté client (CSR) en fonction du cas d'utilisation. Cela signifie que les applications Next.js peuvent offrir des chargements de page initiaux plus rapides que les SPA.

74. Pourquoi Next.js a-t-il introduit l'App Router ?

Le App Router a été introduit pour améliorer la flexibilité et simplifier le routage. Avec App Router, Next.js permet une meilleure structure et personnalisation dans les applications à grande échelle. Le App Router offre une meilleure prise en charge des fonctionnalités de routage avancées telles que les mises en page, le routage imbriqué, etc.

75. Comment fonctionne le routage dans le routeur d'applications par rapport au routeur de pages ?

• App Router : L'App Router introduit une nouvelle approche dans laquelle vous définissez le routage dans le répertoire app/, permettant un routage dynamique et imbriqué avec des mises en page et des routes API basées sur des fichiers. Cette approche simplifie la gestion des itinéraires à différents niveaux de votre application, y compris les itinéraires imbriqués et parallèles.
• Pages Router : Le Pages Router utilise le répertoire pages/ où chaque fichier correspond à une route. Il suit une structure plate et ne prend pas en charge autant de flexibilité de routage que l'App Router.

76. Qu'est-ce que le nouveau répertoire d'applications et en quoi est-il différent du répertoire de pages ?

Le répertoire app/ est utilisé avec le App Router dans Next.js 13 et versions ultérieures. Il permet un routage plus flexible, notamment la prise en charge des mises en page, du routage imbriqué et des itinéraires parallèles. Le répertoire pages/ est utilisé pour l'ancien Pages Router, où les routes sont définies directement par la structure de fichiers.

77. Comment le routage basé sur les fichiers dans App Router améliore-t-il les fonctionnalités de Next.js ?

Le routage basé sur les fichiers dans App Router permet :

1. Routage dynamique : en utilisant des dossiers et des fichiers pour les définitions d'itinéraires, Next.js peut gérer automatiquement les itinéraires dynamiques en fonction de la structure des répertoires.
2. Routes imbriquées : les fichiers et dossiers imbriqués dans le répertoire app/ permettent des modèles de routage avancés tels que des mises en page imbriquées et des sous-itinéraires.
3. Mises en page : vous pouvez créer des mises en page partagées pour des sections spécifiques de votre application, améliorant ainsi la réutilisabilité et la modularité.

78. Quand choisiriez-vous d'utiliser un composant serveur plutôt qu'un composant client, et vice versa ?

Dans Next.js, les Composants serveur et les Composants client servent à des fins différentes, et le choix entre eux dépend du cas d'utilisation :

• Utiliser les composants du serveur lorsque :
  1. Rendu statique : Vous souhaitez effectuer un rendu côté serveur (SSR) pour le composant, lui permettant d'être rendu sur le serveur et envoyé au client au format HTML. Cela peut être bénéfique pour le référencement et des temps de chargement initiaux plus rapides.
  2. Logique lourde : le composant nécessite d'accéder à des bases de données, d'effectuer des appels d'API ou d'effectuer d'autres opérations gourmandes en ressources qui doivent être effectuées sur le serveur pour éviter de surcharger le client.
  3. Performances : vous pouvez décharger le rendu et la récupération des données sur le serveur, réduisant ainsi la taille du bundle JavaScript envoyé au client, améliorant ainsi les performances.
• Utiliser les composants clients lorsque :
  1. Interactivité : le composant nécessite une interactivité, comme la gestion des entrées de l'utilisateur, la gestion de l'état ou le déclenchement d'effets secondaires (comme des animations ou des écouteurs d'événements) qui doivent s'exécuter dans le navigateur.
  2. API spécifiques au navigateur : vous devez utiliser des API spécifiques au navigateur (par exemple, window, localStorage, document), qui ne sont pas disponibles dans un environnement de serveur.
  3. Mises à jour dynamiques : le composant doit réagir aux changements d'état ou aux accessoires qui changent dynamiquement, comme dans les formulaires interactifs ou les visualisations de données.

79. Comment déclarer un composant en tant que composant client dans Next.js ?

Dans le App Router de Next.js, un composant peut être déclaré comme un Composant client en utilisant la directive 'use client'. Cette directive doit être placée en haut du fichier, avant toute importation ou code, pour indiquer que le composant doit être traité comme un composant client.

Exemple :

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

80. Quels sont les avantages de l'utilisation des composants serveur en termes de performances et d'évolutivité ?

Les

Composants serveur offrent plusieurs avantages liés aux performances et à l'évolutivité :

1. Taille du bundle JavaScript réduite : étant donné que les composants serveur sont rendus sur le serveur, ils ne nécessitent pas que JavaScript soit envoyé au client pour le rendu. Cela réduit la taille du bundle JavaScript et conduit à des chargements de pages plus rapides.
2. Chargements initiaux plus rapides de la page : en déchargeant le rendu sur le serveur, le HTML est envoyé directement au client, ce qui entraîne un délai d'accès au premier octet (TTFB) plus rapide et un rendu initial plus rapide, en particulier sur les réseaux ou les réseaux plus lents. appareils.
3. Référencement amélioré : les composants du serveur sont rendus côté serveur, afin que les moteurs de recherche puissent explorer le HTML entièrement rendu, améliorant ainsi le référencement par rapport au contenu rendu côté client.
4. Déchargement du travail du client : les calculs complexes, les appels d'API ou les requêtes de base de données sont traités sur le serveur, réduisant ainsi la charge de travail du client et la consommation de ressources, en particulier pour les appareils aux ressources limitées comme les téléphones mobiles.
5. Évolutivité : étant donné que le serveur gère le rendu, les applications comptant de nombreux utilisateurs peuvent mieux évoluer en optimisant les ressources côté serveur plutôt que le traitement côté client. Le rendu côté serveur permet de maintenir des temps de chargement rapides même lorsque le trafic utilisateur augmente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!