Jeff Bruchado
Retour au blog

Server-First Development : SvelteKit, Astro et Remix Dominent 2025

Salut HaWkers, l'ère du client-side everything est terminée. En 2025, les frameworks server-first comme SvelteKit, Astro et Remix dominent le développement web moderne — et pour de bonnes raisons.

70% moins de JavaScript côté client, Core Web Vitals parfaits, SEO naturel et DX (developer experience) supérieure. Décortiquons ces frameworks et comprenons quand utiliser chacun.

Qu'est-ce que le Server-First Development ?

Client-First vs Server-First

// Comprendre le changement de paradigme

const paradigmComparison = {
  clientFirst: {
    // React SPA traditionnel, Vue SPA, Angular
    architecture: "Le navigateur fait tout (rendu, routing, data fetching)",

    flow: [
      "1. Navigateur reçoit HTML vide + bundle JS énorme",
      "2. Téléchargement et parsing du JS (3-7s)",
      "3. React hydrate et rend",
      "4. Fetch data (APIs)",
      "5. Re-render avec données",
    ],

    example: `
      // Client reçoit :
      <div id="root"></div>
      <script src="bundle.js"></script> <!-- 500kb+ -->

      // L'utilisateur voit écran blanc jusqu'au chargement et exécution JS
    `,

    pros: [
      "✅ Interactivité riche après chargement",
      "✅ Transitions fluides (SPA)",
      "✅ Moins de charge sur le serveur",
    ],

    cons: [
      "❌ TTI (Time to Interactive) lent (3-7s)",
      "❌ SEO médiocre (nécessite workarounds)",
      "❌ Bundle size important",
      "❌ Écran blanc initial",
      "❌ Performance médiocre sur mobile",
    ],

    coreWebVitals: {
      lcp: "3.5-7s (mauvais)", // Largest Contentful Paint
      fid: "100-300ms (à améliorer)", // First Input Delay
      cls: "0.1-0.25 (à améliorer)", // Cumulative Layout Shift
    },
  },

  serverFirst: {
    // SvelteKit, Astro, Remix, Next.js App Router
    architecture: "Serveur rend HTML complet, JavaScript minimal côté client",

    flow: [
      "1. Navigateur demande la page",
      "2. Serveur rend HTML complet (avec données)",
      "3. Navigateur affiche contenu IMMÉDIATEMENT",
      "4. JS minimal hydrate l'interactivité (si nécessaire)",
    ],

    example: `
      // Client reçoit :
      <html>
        <body>
          <h1>Produits</h1>
          <div>
            <!-- Contenu complet déjà rendu -->
            <article>Produit 1 - 29,99€</article>
            <article>Produit 2 - 39,99€</article>
          </div>
        </body>
        <script src="islands.js"></script> <!-- 20kb, uniquement interactivité -->
      </html>

      // L'utilisateur voit le contenu en <1s
    `,

    pros: [
      "✅ TTI ultra-rapide (0.5-2s)",
      "✅ SEO parfait (HTML complet au first paint)",
      "✅ Bundle size minimal (70-90% plus petit)",
      "✅ Performance mobile excellente",
      "✅ Fonctionne avec JS désactivé (progressive enhancement)",
    ],

    cons: [
      "❌ Charge serveur plus importante (mais cache mitigue)",
      "❌ Navigation pas aussi instantanée que SPA (mais prefetch résout)",
    ],

    coreWebVitals: {
      lcp: "0.8-2s (bon)",
      fid: "<100ms (bon)",
      cls: "<0.1 (bon)",
    },
  },
};

SvelteKit : L'Élégant et Rapide

Pourquoi SvelteKit Explose en 2025

const svelteKitOverview = {
  tagline: "Web development, streamlined",

  philosophy: [
    "Basé sur compilateur (sans virtual DOM = moins overhead)",
    "Écrire moins de code (moins boilerplate que React)",
    "Server-first avec hydratation client sélective",
    "Routing basé fichiers (comme Next.js)",
  ],

  performance: {
    bundleSize: "70% plus petit que React équivalent",
    runtime: "Sans runtime framework (compile en vanilla JS)",
    hydration: "Hydrate uniquement ce qui nécessite interactivité",
  },

  adoption2025: {
    satisfaction: "95% (la plus haute de tous frameworks)",
    growth: "+156% en usage year-over-year",
    companies: ["New York Times", "Spotify", "1Password", "Chess.com"],
  },
};

SvelteKit : Code Réel

<!-- +page.server.ts : Chargement données côté serveur -->
<script lang="ts">
  import type { PageServerLoad } from './$types';

  export const load: PageServerLoad = async ({ fetch, params }) => {
    // Exécuté SUR LE SERVEUR (avant envoi HTML)
    const response = await fetch('/api/products');
    const products = await response.json();

    return {
      products // Données disponibles immédiatement dans le composant
    };
  };
</script>

<!-- +page.svelte : Composant -->
<script lang="ts">
  import { enhance } from '$app/forms';
  import type { PageData } from './$types';

  export let data: PageData;

  // État réactif côté client (optionnel)
  let searchQuery = '';

  $: filteredProducts = data.products.filter(p =>
    p.name.toLowerCase().includes(searchQuery.toLowerCase())
  );
</script>

<div class="products-page">
  <h1>Produits ({filteredProducts.length})</h1>

  <!-- Recherche réactive (côté client) -->
  <input
    type="search"
    bind:value={searchQuery}
    placeholder="Rechercher produits..."
  />

  <div class="product-grid">
    {#each filteredProducts as product (product.id)}
      <article class="product-card">
        <img src={product.image} alt={product.name} />
        <h2>{product.name}</h2>
        <p>{product.description}</p>
        <span class="price">{product.price}€</span>

        <!-- Form avec progressive enhancement -->
        <form method="POST" action="?/addToCart" use:enhance>
          <input type="hidden" name="productId" value={product.id} />
          <button type="submit">Ajouter au panier</button>
        </form>
      </article>
    {/each}
  </div>
</div>

<style>
  /* CSS scopé (ne fuit pas vers autres composants) */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
  }

  .product-card {
    border: 1px solid #eee;
    padding: 1rem;
    border-radius: 8px;
  }

  .price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
  }
</style>
// +page.server.ts : Actions serveur (gestion formulaires)

import type { Actions } from "./$types";
import { fail } from "@sveltejs/kit";

export const actions: Actions = {
  // Action form POST (fonctionne sans JS !)
  addToCart: async ({ request, cookies }) => {
    const formData = await request.formData();
    const productId = formData.get("productId");

    if (!productId) {
      return fail(400, { message: "Product ID requis" });
    }

    // Ajouter au panier (côté serveur)
    const cart = JSON.parse(cookies.get("cart") || "[]");
    cart.push(productId);
    cookies.set("cart", JSON.stringify(cart), { path: "/" });

    return { success: true };
  },
};

SvelteKit : Avantages Uniques

const svelteKitStrengths = {
  devExperience: {
    lessCode: {
      react: `
        const [count, setCount] = useState(0);

        <button onClick={() => setCount(count + 1)}>
          {count}
        </button>
      `,
      svelte: `
        let count = 0;

        <button on:click={() => count++}>
          {count}
        </button>
      `,
      savings: "-40% moins de code pour même fonctionnalité",
    },

    reactivity: "Built-in (pas besoin de useState, useEffect, etc)",
    css: "Scopé par défaut (sans overhead CSS-in-JS)",
    animations: "Built-in (directives transition, animate)",
  },

  performance: {
    noVirtualDOM: "Compile vers opérations impératives (plus rapide)",
    bundleSize: "TodoMVC : Svelte 3.6kb | React 40kb",
    hydration: "Hydratation partielle automatique",
  },

  fullStack: {
    adapters: [
      "Vercel",
      "Netlify",
      "Cloudflare Workers",
      "Node.js",
      "Static (SSG)",
    ],
    apiRoutes: "Built-in (comme Next.js)",
    serverActions: "Progressive enhancement (fonctionne sans JS)",
  },
};

Astro : Champion du Content-First

Quand Astro Est le Choix Parfait

const astroOverview = {
  tagline: "Le framework web pour sites orientés contenu",

  philosophy: [
    "Zéro JavaScript par défaut",
    "Architecture Islands (hydrate uniquement composants interactifs)",
    "Framework-agnostique (utilisez React, Vue, Svelte ensemble !)",
    "Collections de contenu (Markdown, MDX, CMS)",
  ],

  idealFor: [
    "Blogs, documentation, sites marketing",
    "E-commerce (Shopify, Stripe)",
    "Dashboards (avec islands interactifs)",
    "Tout site orienté contenu",
  ],

  performance: {
    jsShipped: "0kb par défaut (ajoute uniquement si nécessaire)",
    lcp: "0.5-1.5s (le plus rapide de tous frameworks)",
    lighthouseScore: "98-100 (consistant)",
  },

  adoption2025: {
    satisfaction: "92%",
    growth: "+210% year-over-year (croissance la plus rapide)",
    companies: ["Google Firebase Docs", "The Guardian", "Trivago"],
  },
};

Astro : Code Réel

---
// src/pages/blog/[slug].astro
// Code en haut exécuté au BUILD TIME (SSG) ou SERVEUR (SSR)

import Layout from '../../layouts/Layout.astro';
import { getCollection } from 'astro:content';

// Chemins statiques (SSG)
export async function getStaticPaths() {
  const blogPosts = await getCollection('blog');

  return blogPosts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}

const { post } = Astro.props;
const { Content } = await post.render();
---

<!-- HTML envoyé au client (ZÉRO JavaScript !) -->
<Layout title={post.data.title}>
  <article class="blog-post">
    <header>
      <h1>{post.data.title}</h1>
      <time datetime={post.data.publishDate.toISOString()}>
        {post.data.publishDate.toLocaleDateString('fr-FR')}
      </time>
    </header>

    <!-- Markdown rendu en HTML -->
    <Content />

    <!-- Island : seul ce composant a du JS -->
    <LikeButton client:visible postId={post.slug} />

    <!-- Comments se charge uniquement quand visible -->
    <Comments client:idle postId={post.slug} />
  </article>
</Layout>

<style>
  .blog-post {
    max-width: 65ch;
    margin: 0 auto;
    padding: 2rem;
  }

  h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
</style>
// components/LikeButton.tsx (island React)
// Ce composant A du JavaScript (hydraté côté client)

import { useState, useEffect } from "react";

interface Props {
  postId: string;
}

export default function LikeButton({ postId }: Props) {
  const [likes, setLikes] = useState(0);
  const [hasLiked, setHasLiked] = useState(false);

  useEffect(() => {
    // Récupère nombre de likes
    fetch(`/api/likes/${postId}`)
      .then((r) => r.json())
      .then((data) => setLikes(data.count));
  }, [postId]);

  const handleLike = async () => {
    if (hasLiked) return;

    await fetch(`/api/likes/${postId}`, { method: "POST" });
    setLikes((l) => l + 1);
    setHasLiked(true);
  };

  return (
    <button
      onClick={handleLike}
      disabled={hasLiked}
      className={hasLiked ? "liked" : ""}
    >
      ❤️ {likes} {likes === 1 ? "Like" : "Likes"}
    </button>
  );
}

Astro : Client Directives (Fonctionnalité Puissante)

---
// Contrôle PRÉCIS de quand hydrater les composants
import HeavyComponent from './HeavyComponent';
import Sidebar from './Sidebar';
import Analytics from './Analytics';
---

<!-- ZÉRO JS : uniquement HTML statique -->
<Header />

<!-- Hydrate immédiatement (UI critique) -->
<SearchBar client:load />

<!-- Hydrate quand visible dans viewport -->
<HeavyComponent client:visible />

<!-- Hydrate quand navigateur inactif -->
<Sidebar client:idle />

<!-- Hydrate uniquement quand media query match -->
<MobileMenu client:media="(max-width: 768px)" />

<!-- JAMAIS hydraté (uniquement HTML) -->
<Footer />

<!-- JS exécuté uniquement sur serveur (0kb client) -->
<Analytics />

<!--
  Résultat :
  - Sans directives : 200kb JS
  - Avec directives : 20kb JS (-90%)
-->

Remix : Full-Stack React Réinventé

Ce Qui Rend Remix Unique

const remixOverview = {
  tagline: "Construisez de meilleurs sites web",

  philosophy: [
    "Adopter la plateforme web (forms, URLs, HTTP)",
    "Progressive enhancement d'abord",
    "Routing imbriqué (colocation UI et data)",
    "Optimistic UI facile",
  ],

  createdBy: "Michael Jackson et Ryan Florence (créateurs React Router)",

  acquiredBy: "Shopify (2022) - maintenant open-source et gratuit",

  idealFor: [
    "Apps full-stack (pas uniquement sites statiques)",
    "E-commerce (intégration Shopify)",
    "Dashboards complexes",
    "Apps avec beaucoup d'interaction",
  ],

  adoption2025: {
    satisfaction: "89%",
    growth: "+85% (post-acquisition Shopify)",
    companies: ["Shopify", "NASA", "Peloton", "GitHub Mobile"],
  },
};

Remix : Code Réel

// app/routes/products.$productId.tsx
// Loader : exécuté sur le serveur

import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData, useFetcher } from "@remix-run/react";

export async function loader({ params }: LoaderFunctionArgs) {
  const product = await db.product.findUnique({
    where: { id: params.productId },
    include: { reviews: true },
  });

  if (!product) {
    throw new Response("Non trouvé", { status: 404 });
  }

  return json({ product });
}

// Action : soumissions formulaire (POST, PUT, DELETE)
export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const intent = formData.get("intent");

  if (intent === "addToCart") {
    const quantity = formData.get("quantity");

    await addToCart({
      productId: params.productId,
      quantity: Number(quantity),
    });

    return json({ success: true });
  }

  if (intent === "submitReview") {
    const rating = formData.get("rating");
    const comment = formData.get("comment");

    await db.review.create({
      data: {
        productId: params.productId,
        rating: Number(rating),
        comment: String(comment),
      },
    });

    // Revalide loader automatiquement (UI se met à jour)
    return json({ success: true });
  }

  throw new Error("Intent invalide");
}

// Composant
export default function ProductPage() {
  const { product } = useLoaderData<typeof loader>();
  const fetcher = useFetcher();

  return (
    <div className="product-page">
      <img src={product.image} alt={product.name} />
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span className="price">{product.price}€</span>

      {/* Form avec progressive enhancement */}
      <fetcher.Form method="post">
        <input type="hidden" name="intent" value="addToCart" />
        <input
          type="number"
          name="quantity"
          min="1"
          defaultValue="1"
          required
        />
        <button type="submit" disabled={fetcher.state !== "idle"}>
          {fetcher.state === "submitting" ? "Ajout..." : "Ajouter au panier"}
        </button>
      </fetcher.Form>

      {/* Avis */}
      <section className="reviews">
        <h2>Avis ({product.reviews.length})</h2>

        {product.reviews.map((review) => (
          <article key={review.id} className="review">
            <div className="rating">{"⭐".repeat(review.rating)}</div>
            <p>{review.comment}</p>
          </article>
        ))}

        {/* Formulaire soumission avis */}
        <fetcher.Form method="post" className="review-form">
          <input type="hidden" name="intent" value="submitReview" />

          <label>
            Note :
            <select name="rating" required>
              <option value="5">5 étoiles</option>
              <option value="4">4 étoiles</option>
              <option value="3">3 étoiles</option>
              <option value="2">2 étoiles</option>
              <option value="1">1 étoile</option>
            </select>
          </label>

          <label>
            Commentaire :
            <textarea name="comment" required />
          </label>

          <button type="submit">Soumettre avis</button>
        </fetcher.Form>
      </section>
    </div>
  );
}

Comparaison : SvelteKit vs Astro vs Remix

Matrice de Décision

const frameworkComparison = {
  svelteKit: {
    bestFor: ["Apps full-stack", "SPAs interactives", "Apps temps réel"],
    strengths: [
      "DX incroyable (moins boilerplate)",
      "Performance excellente",
      "Bundle size minimal",
      "Réactivité built-in",
    ],
    weaknesses: [
      "Écosystème plus petit que React",
      "Moins d'offres d'emploi (encore)",
      "Communauté plus petite",
    ],
    learningCurve: "Moyenne (besoin apprendre Svelte)",
    bundleSize: "20-50kb (typique)",
    seo: "Excellent (SSR built-in)",
  },

  astro: {
    bestFor: ["Blogs", "Sites marketing", "Docs", "Content-first"],
    strengths: [
      "ZÉRO JS par défaut (TTI le plus rapide)",
      "Framework-agnostique (utilisez n'importe quelle lib UI)",
      "Collections de contenu (MDX, CMS)",
      "Architecture islands",
    ],
    weaknesses: [
      "Moins idéal pour apps hautement interactives",
      "Pas full-stack (nécessite API séparée)",
    ],
    learningCurve: "Faible (HTML, CSS, JS basique)",
    bundleSize: "0-20kb (typique)",
    seo: "Parfait (HTML statique)",
  },

  remix: {
    bestFor: ["Apps React full-stack", "E-commerce", "Dashboards"],
    strengths: [
      "Écosystème React complet",
      "Progressive enhancement solide",
      "Routing imbriqué",
      "Optimistic UI facile",
    ],
    weaknesses: [
      "Reste React (bundle plus gros que Svelte)",
      "Moins focus SSG (plus SSR)",
    ],
    learningCurve: "Faible (si déjà connaît React)",
    bundleSize: "50-100kb (typique)",
    seo: "Excellent (SSR)",
  },
};

// Quand utiliser chacun ?
const decisionTree = {
  contentSite: "Astro (blog, docs, marketing)",
  fullStackApp: "SvelteKit (nouveau projet) | Remix (équipe React)",
  ecommerce: "Remix (Shopify) | SvelteKit",
  dashboard: "SvelteKit | Remix",
  spa: "SvelteKit",
  multiFramework: "Astro (React + Vue + Svelte ensemble)",
  existingReact: "Remix (migration plus facile)",
  greenfield: "SvelteKit (meilleure DX et performance)",
};

Benchmark Performance (Monde Réel)

// Benchmark : Page produit e-commerce (10 produits)

const performanceBenchmark = {
  traditional_spa: {
    // Create React App
    ttfb: "250ms", // Time to First Byte
    fcp: "1800ms", // First Contentful Paint
    lcp: "4500ms", // Largest Contentful Paint (ÉCHEC)
    tti: "5200ms", // Time to Interactive (ÉCHEC)
    bundleSize: "420kb gzipped",
    lighthouse: "52/100",
    seoScore: "Médiocre (rendu côté client)",
  },

  svelteKit: {
    ttfb: "160ms",
    fcp: "450ms",
    lcp: "900ms", // EXCELLENT
    tti: "1100ms", // EXCELLENT
    bundleSize: "45kb gzipped",
    lighthouse: "96/100",
    seoScore: "Excellent",
  },

  astro: {
    ttfb: "140ms",
    fcp: "380ms",
    lcp: "750ms", // MEILLEUR
    tti: "800ms", // MEILLEUR
    bundleSize: "8kb gzipped", // MEILLEUR (uniquement interactivité)
    lighthouse: "99/100",
    seoScore: "Parfait",
  },

  remix: {
    ttfb: "170ms",
    fcp: "520ms",
    lcp: "1100ms", // EXCELLENT
    tti: "1600ms", // BON
    bundleSize: "95kb gzipped",
    lighthouse: "91/100",
    seoScore: "Excellent",
  },
};

Conclusion : Server-First a Gagné

L'avenir du développement web est server-first.

Réalité en 2025 :

const serverFirstAdoption = {
  industry: {
    newProjects: "73% choisissent frameworks server-first",
    migrations: "+45% de SPAs migrant vers SSR",
    reason: "Core Web Vitals = SEO = argent",
  },

  yourChoice: {
    blog: "Astro (meilleure performance)",
    fullStack: "SvelteKit (meilleure DX) | Remix (équipe React)",
    ecommerce: "Remix (intégration Shopify)",
    hybrid: "Next.js (encore roi, mais complexe)",
  },

  actionPlan: {
    immediate: "Essayez Astro sur blog personnel (1 week-end)",
    shortTerm: "Apprenez SvelteKit OU Remix (2-4 semaines)",
    longTerm: "Migrez projets critiques (ROI prouvé)",
  },

  bottomLine: "Les SPAs client-first meurent. Server-first est le standard.",
};

Moins de JavaScript, plus de performance, meilleur SEO.

Si vous voulez en savoir plus sur la performance moderne, je recommande : WebAssembly + JavaScript Performance.

C'est parti ! 🦅

📚 Vous Voulez Maîtriser le JavaScript Moderne ?

Ces frameworks sont incroyables, mais un JavaScript solide reste la base. Les développeurs qui maîtrisent les fondamentaux tirent le meilleur parti de n'importe quel framework.

Matériel d'Étude Complet

J'ai préparé un guide complet JavaScript du basique à l'avancé :

Options d'investissement :

  • €9,90 (paiement unique)

👉 Découvrir le Guide JavaScript

💡 Base solide pour maîtriser n'importe quel framework moderne

Commentaires (0)

Cet article n'a pas encore de commentaires. Soyez le premier!

Ajouter des commentaires