Le "Partial Pre-rendering" maintenant disponible avec Next.js 14

Hello c’est Benoit 👋,

Bienvenue dans notre édition hebdomadaire où nous explorons les dernières actualités dans l'univers du développement web avec un focus sur la Jamstack, les architectures composables et les solutions headless.

Cette semaine, nous allons nous intéresser à une nouveauté annoncée lors de la Next.js Conf le mois dernier : le "Partial Pre-rendering" maintenant disponible avec Next.js 14. Cet outil représente une évolution significative dans la manière de construire des applications web.

Qu'est-ce que le Partial Pre-rendering ? Le Partial Pre-rendering est une technique qui permet de combiner les avantages du Server-Side Rendering (SSR) et du Static Site Generation (SSG). En gros, cela signifie que vous pouvez pré-rendre une partie de votre page au moment du build (comme avec le SSG) et d'autres parties à la demande (comme avec le SSR).

Exemple de code : Imaginons une page de blog. Avec le Partial Pre-rendering, le texte du blog peut être généré statiquement au moment du build, tandis que les commentaires récents peuvent être rendus côté serveur à chaque demande.

// components/Comments.ts
import React, { useEffect, useState } from 'react';

const Comments = ({ postId }) => {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    const fetchComments = async () => {
      const response = await fetch(`/api/comments/${postId}`);
      const data = await response.json();
      setComments(data);
    };

    fetchComments();
  }, [postId]);

  return (
    <div>
      {comments.map(comment => (
        <p key={comment.id}>{comment.text}</p>
      ))}
    </div>
  );
};

// pages/blog/[id].ts
import React, { Suspense } from 'react';
import BlogContent from '../components/BlogContent';
import Comments from '../components/Comments';

const BlogPost = ({ postId }) => {
  return (
    <div>
      <BlogContent postId={postId} />
      <Suspense fallback={<div>Chargement des commentaires...</div>}>
        <Comments postId={postId} />
      </Suspense>
    </div>
  );
};

export default BlogPost;

Différences avec le SSR et le SSG :

SSR (Server-Side Rendering) : Chaque demande de page est traitée par le serveur en temps réel. C'est puissant mais peut être lent si le serveur est sollicité.
SSG (Static Site Generation) : Les pages sont générées au moment du build et servies comme des fichiers statiques. C'est rapide, mais pas flexible pour les contenus dynamiques.

Le Partial Pre-rendering offre donc le meilleur des deux mondes : la rapidité du SSG pour les contenus qui changent peu, et la flexibilité du SSR pour les données dynamiques.

En somme, Next.js 14 ouvre de nouvelles portes pour les développeurs souhaitant optimiser leurs applications web, offrant ainsi une expérience utilisateur améliorée et une meilleure performance globale.

C'est tout pour cette semaine. N'hésitez pas à expérimenter avec cette nouvelle fonctionnalité et à partager vos retours !

En attendant comme d’habitude je vous laisse avec quelques JamStacks pour la route :

Hello c’est Benoit 👋,

Cette semaine, nous allons nous intéresser à une nouveauté annoncée lors de la Next.js Conf le mois dernier : le "Partial Pre-rendering" maintenant disponible avec Next.js 14. Cet nouveauté représente une évolution significative dans la manière de construire les applications web avec Next.JS.

// components/Comments.ts
import React, { useEffect, useState } from 'react';

const Comments = ({ postId }) => {
  const [comments, setComments] = useState([]);

  useEffect(() => {
    const fetchComments = async () => {
      const response = await fetch(`/api/comments/${postId}`);
      const data = await response.json();
      setComments(data);
    };

    fetchComments();
  }, [postId]);

  return (
    <div>
      {comments.map(comment => (
        <p key={comment.id}>{comment.text}</p>
      ))}
    </div>
  );
};

// pages/blog/[id].ts
import React, { Suspense } from 'react';
import BlogContent from '../components/BlogContent';
import Comments from '../components/Comments';

const BlogPost = ({ postId }) => {
  return (
    <div>
      <BlogContent postId={postId} />
      <Suspense fallback={<div>Chargement des commentaires...</div>}>
        <Comments postId={postId} />
      </Suspense>
    </div>
  );
};

export default BlogPost;

Dans cet exemple, nous utilisons useState et useEffect pour charger les commentaires de manière asynchrone dans le composant Comments. Lorsque la page BlogPost est rendue, Suspense permet de suspendre l'affichage des commentaires jusqu'à ce qu'ils soient chargés, affichant le fallback en attendant.

Différences avec le SSR et le SSG :

SSR (Server-Side Rendering) : Chaque demande de page est traitée par le serveur en temps réel. C'est puissant mais peut être lent si le serveur est sollicité.
SSG (Static Site Generation) : Les pages sont générées au moment du build et servies comme des fichiers statiques. C'est rapide, mais pas flexible pour les contenus dynamiques.

Le Partial Pre-rendering offre donc le meilleur des deux mondes : la rapidité du SSG pour les contenus qui changent peu, et la flexibilité du SSR pour les données dynamiques.

C'est tout pour cette semaine. N'hésitez pas à expérimenter avec cette nouvelle fonctionnalité et à partager vos retours !

En attendant comme d’habitude je vous laisse avec quelques JamStacks pour la route :

🥪 JamSnack

Construire un composant de pagination dynamique avec Next.js et Strapi de Bejamas
La Keynote de la Netlify Compose Conference de Matt Biilman, le CEO de Netlify : From Jamming to Composing
HTML First qui est un ensemble de principes visant à rendre la création de logiciels Web plus facile, plus rapide, plus inclusive et plus maintenable.
Les 15 meilleures bibliothèques React de composants UI de 2023 par Prismic
Améliorez votre expérience frontend avec les types Strapi et TypeScript par Strapi
Astro 3.5 est disponible aujourd'hui et propose un nouveau routage i18n, une optimisation du prefetch et d’autres featyres. Il s’agit peut-être de l’une des plus grosses versions mineures de l’histoire d’Astro.

Et voilà, c’est déjà tout pour cette semaine !

J’espère de tout cœur que cette édition vous à plu, si c’est le cas :

👉 Pensez à la partager à vos amis 💌

👉 Si vous avez des idées pour améliorer la newsletter, n'hésitez pas à nous en faire part !