Next.js 16 vs Remix
Next.js 16 (Turbopack par défaut, Partial Prerendering) contre Remix (Shopify, standards web) — comparatif des méta-frameworks React en 2026.
Plateforme gérée qui automatise tout après un git push
Serveur à prix mensuel fixe, contrôle total, responsabilité totale
Il n'y a pas de gagnant absolu, ce sont deux modèles de responsabilité différents. Si ton trafic est en pics et que tu n'as pas de capacité DevOps, la mise à l'échelle automatique de Vercel justifie son prix. Si ton trafic moyen est prévisible et que tu as déjà une discipline systemd/nginx/Cloudflare, Hetzner + Cloudflare fixe la facture et offre un avantage en matière de résidence des données. Le point de bascule : le volume de bande passante et d'écritures ISR — mesure pendant un mois, puis décide.
| Catégorie | Vercel | Hetzner VPS (self-host) |
|---|---|---|
| Performance | 8/10 | 7/10 |
| Facilité d'apprentissage | 9/10 | 5/10 |
| Écosystème | 9/10 | 7/10 |
| Communauté | 8/10 | 7/10 |
| Marché de l'emploi | 7/10 | 7/10 |
| Pérennité | 8/10 | 8/10 |
# Vercel — exemple de déploiement Next.js sans configuration + variable d'environnement + Edge Config
# 1) À la racine du projet, région de fonction et tâche cron via vercel.json
{
"regions": ["fra1"],
"crons": [
{ "path": "/api/cron/revalidate", "schedule": "0 */6 * * *" }
]
}
# 2) Déploiement via CLI (build+TLS+CDN automatiques)
npx vercel --prod
# 3) Pour réduire le coût de l'unité d'écriture ISR (1 unité = 8 Ko, pas de quota inclus),
# ajuste la durée de revalidate selon le trafic
export const revalidate = 3600; // régénère toutes les heures
# 4) Pour réduire le Fast Origin Transfer, force
# la sortie de la fonction en cache statique
export async function GET() {
return Response.json(
{ data: "ok" },
{ headers: { "Cache-Control": "public, s-maxage=600" } }
);
}# Hetzner VPS — self-host Next.js standalone + systemd + nginx
# 1) next.config.js — mode de sortie standalone (guide officiel de self-hosting)
module.exports = {
output: "standalone",
};
# 2) Build + copie standalone
npm run build
cp -r .next/static .next/standalone/.next/static
cp -r public .next/standalone/public
# 3) unité systemd — gestion des processus (exemple portfolio-ssr.service)
[Unit]
Description=Next.js standalone server
After=network.target
[Service]
Type=simple
User=portfolio
WorkingDirectory=/var/www/app/.next/standalone
ExecStart=/usr/bin/node server.js
Restart=on-failure
Environment=PORT=4000
NoNewPrivileges=true
ProtectHome=true
[Install]
WantedBy=multi-user.target
# 4) reverse proxy nginx (recommandation officielle de Next.js)
server {
listen 443 ssl;
server_name example.com;
location / {
proxy_pass http://127.0.0.1:4000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
# 5) installation de sharp — obligatoire pour Image Optimization
npm install sharpIl n'y a pas de gagnant absolu, ce sont deux modèles de responsabilité différents. Si ton trafic est en pics et que tu n'as pas de capacité DevOps, la mise à l'échelle automatique de Vercel justifie son prix. Si ton trafic moyen est prévisible et que tu as déjà une discipline systemd/nginx/Cloudflare, Hetzner + Cloudflare fixe la facture et offre un avantage en matière de résidence des données. Le point de bascule : le volume de bande passante et d'écritures ISR — mesure pendant un mois, puis décide.
Obtenir une consultation gratuiteLe ratio exact dépend du trafic et du volume d'écritures ISR, mais la différence structurelle est claire : Vercel Pro facture un socle de 20 $/mois plus des frais supplémentaires à l'usage (Fast Data Transfer à partir de 0,15 $/Go, Edge Request 2 $/1M, ISR Write 4 $/1M unités d'écriture), tandis qu'un VPS Hetzner facture un loyer mensuel fixe et n'ajoute aucun frais tant que tu restes dans le quota de trafic inclus. Si ton volume de bande passante/écritures ISR est faible, la différence peut rester négligeable ; à mesure qu'il augmente, la facture de Vercel croît de façon exponentielle alors que celle de Hetzner reste stable. Prends aussi en compte les hausses de prix de Hetzner en 2026 (notamment sur les lignes CCX/CPX) et calcule les deux côtés avec ton propre trafic.