Next : Optimisation des routes dynamiques

Tu utilises le rendu statique (SSG) avec Next.js pour optimiser tes performances ?
C’est un bon début... Mais qu’en est-il de tes routes dynamiques ? Tu les optimises ?

Beaucoup de devs se concentrent sur le SSG et négligent les routes dynamiques. Voici 4 axes pour booster leur performance :

1️⃣ Cache client (Router Cache)
Utilise le cache au niveau du router client grâce au staleTime.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
      static: 180,
    },
  },
}
 
module.exports = nextConfig

👉 Le premier accès est plus long, mais ensuite les pages sont mises en cache côté client, ce qui permet des chargements instantanés.

2️⃣ Cache requêtes (Request Memoization)
Avec React Cache, tu peux mémoriser tes requêtes (Appels persistance ou des appels API/Prisma)

import { cache } from "react";
import { prisma } from "@/lib/prisma";

export const getPosts = cache(async () => {
  const posts = await prisma.post.findMany();
  return posts;
});

👉 Cela garantit qu'une requête n'est exécutée qu'une seule fois, même si elle est appelée plusieurs fois. Fonctionne aussi avec fetch ! (Attention uniquement durant le cycle que vie d'une requête)

3️⃣ Cache serveur (Data Cache)
Next.js étend l’API fetch pour permettre un cache des données côté serveur.\

export async function getData() {
  const res = await fetch("https://api.example.com/data", {
    next: { revalidate: 60 }, // Cache pendant 60 secondes
  });
  return res.json();
}

👉 Les données sont partagées et restent en cache pendant une durée définie, réduisant les temps de réponse.

4️⃣ unstable_cache ou use Cache
Ces APIs te permettent de mettre en cache n’importe quelles données via un système clé-valeur.

import { unstable_cache } from "next/cache";
import { prisma } from "@/lib/prisma"; // Assure-toi que l'instance Prisma est bien importée

export const getPosts = unstable_cache(
  async () => {
    return await prisma.post.findMany();
  },
  ["posts-cache"], // Clé du cache
  { revalidate: 300 } // Cache pendant 5 minutes
);

export default async function Page() {
  const posts = await getPosts();

👉 C’est similaire à ce que tu fais avec TanStack Query, mais intégré à Next.js coté backend pour encore plus de flexibilité.

5️⃣ Choisir correctement la région de sa base de données
La proximité entre ton application et ta base de données est essentielle.
👉 Choisis une région proche de tes utilisateurs pour réduire la latence et améliorer les performances. Par exemple, héberge ta base de données en Europe si la majorité de tes utilisateurs y sont situés.


Comprendre en profondeur le fonctionnement des applications FullStack avec Next.js va te différencier des autres développeurs.

Tout cela, nous le voyons dans Next Mastery. La session 2 ouvre la semaine prochaine ! 🚀

Et toi, quel système de cache utilises-tu ? Dis-le-moi en commentaire !