Comment récupérer efficacement les données de l'API interne dans Next.js à l'aide de getServerSideProps() ?

Récupération de données API internes dans Next.js : bonnes pratiques avec getServerSideProps()

Introduction

Dans Next.js, gestion des données entre les pages et composants est crucial. Lorsque vous utilisez getServerSideProps() pour récupérer des données API internes, il est essentiel de suivre les meilleures pratiques pour améliorer le référencement et maintenir l'efficacité du code. Cet article explore l'approche alternative recommandée dans la documentation Next.js, en fournissant une compréhension approfondie et des exemples pratiques.

Évitez de récupérer les API internes dans getServerSideProps()

Malgré la commodité de la récupération des API internes Les API utilisant fetch() dans getServerSideProps() sont déconseillées par Next.js. Au lieu de cela, il est recommandé d'utiliser directement la logique de routage API dans getServerSideProps() pour les raisons suivantes :

• Exécution côté serveur : getServerSideProps() et les routes API s'exécutent toutes deux sur le serveur. Par conséquent, effectuer un appel API depuis getServerSideProps() entraînerait des requêtes supplémentaires inutiles et une surcharge de performances.
• Duplication de code : L'utilisation de fetch() dans getServerSideProps() duplique le code présent dans le Route API, entraînant des problèmes de maintenance.

Approche alternative

Pour surmonter ces défis, extrayez la logique de récupération des données de votre route API dans une fonction distincte. Cette fonction peut ensuite être importée et utilisée à la fois dans votre route API et dans getServerSideProps(), garantissant l'efficacité du code et éliminant le besoin d'appels API externes.

Exemple :

// pages/api/user.js

// Data fetching function
export async function getData() {
    const response = await fetch(/* external API endpoint */);
    const jsonData = await response.json();
    return jsonData;
}

// API route handler
export default async function handler(req, res) {
    const jsonData = await getData();
    res.status(200).json(jsonData);
}

// pages/home.js

// Import the data fetching function
import { getData } from './api/user';

// getServerSideProps
export async function getServerSideProps(context) {
    const jsonData = await getData();
    // ... other logic
}

En suivant cette approche, vous pouvez utiliser les données requises à la fois dans votre route API et dans getServerSideProps() de manière efficace et avec une maintenabilité améliorée du code. Le référencement n'est pas compromis car le contenu de la page est toujours rendu côté serveur avec les données nécessaires.

Considérations sur la mise en cache

En termes de mise en cache, une approche simple consiste à utiliser la bibliothèque SWr dans un composant côté client. Cependant, pour la mise en cache côté serveur des données récupérées dans getServerSideProps(), des considérations supplémentaires sont nécessaires.

Une approche consiste à implémenter votre propre mécanisme de mise en cache à l'aide d'une base de données ou d'un cache en mémoire dans getServerSideProps(). Vous pouvez également explorer des solutions de mise en cache tierces dédiées conçues pour être utilisées avec Next.js. Il est important d'évaluer votre cas d'utilisation et vos exigences spécifiques pour déterminer la stratégie de mise en cache la plus appropriée.

En adoptant les meilleures pratiques et en mettant en œuvre des mécanismes de mise en cache appropriés, vous pouvez optimiser les capacités de récupération et de mise en cache des données de votre application Next.js, en garantissant des performances efficaces et une expérience utilisateur transparente.

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!