onlinewachsen.de

Vercel

Code schreiben ist eine Sache – ihn live ins Netz zu bringen eine andere. Vercel macht aus dem zweiten Schritt eine Nebensache: Git pushen, fertig.

Definition
Vercel ist eine Cloud-Plattform für das Hosting und Deployment von Frontend-Anwendungen und serverlosen Funktionen. Das Unternehmen wurde 2015 gegründet und entwickelt parallel das React-Framework Next.js. Vercel automatisiert den gesamten Deployment-Prozess: Jeder Push in ein Git-Repository löst automatisch einen Build aus – inklusive Preview-URL, globaler CDN-Verteilung und HTTPS ohne Konfiguration.

Wie Vercel funktioniert

Das Grundprinzip von Vercel ist radikal einfach: Repository verbinden, Vercel erledigt den Rest. Kein Server konfigurieren, kein Deployment-Skript schreiben, keine SSL-Zertifikate beantragen.

01
Repository verbinden
GitHub-, GitLab- oder Bitbucket-Repository mit Vercel verknüpfen. Einmalige Einrichtung – danach überwacht Vercel das Repository automatisch auf neue Commits.
02
Automatischer Build
Bei jedem Push startet Vercel automatisch den Build-Prozess. Framework wird erkannt, Build-Befehl und Output-Verzeichnis werden ohne Konfiguration ermittelt – für Next.js, React, Vue, Astro und viele weitere.
03
Preview Deployments
Jeder Branch und jeder Pull Request erhält automatisch eine eigene Preview-URL. Änderungen können live begutachtet und mit Kunden oder Kollegen geteilt werden – vor dem Merge in den Hauptbranch.
04
Globales CDN
Statische Assets werden automatisch auf Vercels Edge Network verteilt – einem globalen CDN mit Standorten weltweit. Inhalte werden vom nächstgelegenen Server ausgeliefert, Ladezeiten sinken messbar.
Edge
Edge Functions & Serverless
Serverlose Funktionen laufen ohne eigenen Server auf Abruf – abgerechnet nach tatsächlicher Nutzung. Edge Functions laufen geografisch nah am Nutzer für minimale Latenz.

Kernfunktionen im Überblick

Deployment
Instant Rollback

Jedes Deployment wird als unveränderlicher Snapshot gespeichert. Bei Problemen ist der Wechsel zu einer früheren Version ein einziger Klick – ohne Datenverlust.

Domains
Custom Domains & HTTPS

Eigene Domains per DNS-Eintrag verknüpfen. SSL-Zertifikate werden automatisch ausgestellt und erneuert – kein manuelles Zertifikatsmanagement.

Config
Umgebungsvariablen

API-Keys und sensible Konfigurationswerte sicher in Vercels Dashboard hinterlegen – getrennt nach Production, Preview und Development. Nie im Code-Repository.

Analytics
Web Analytics & Speed Insights

Seitenaufrufe, einzigartige Besucher und Core Web Vitals direkt im Vercel-Dashboard – ohne externe Tracking-Skripte und datenschutzkonform.

Vercel und Next.js

Vercel entwickelt Next.js und optimiert die Plattform direkt darauf. ISR, React Server Components, Edge Middleware und App-Router-Features laufen auf Vercel ohne jede Konfiguration. Auf anderen Plattformen sind teils manuelle Anpassungen nötig oder einzelne Features werden nicht vollständig unterstützt.

Pläne und Preisstruktur

Vercel bietet ein Free Tier, das für persönliche Projekte und kleinere Websites vollständig ausreicht. Für kommerzielle Projekte und Teams ist der Pro-Plan notwendig:

PlanPreisGeeignet fürLimits
HobbyKostenlosPersönliche Projekte, Open-Source, ExperimenteKein kommerzieller Einsatz erlaubt, begrenzte Builds
Proab 20 $ / MonatKommerzielle Projekte, Agenturen, kleine TeamsGroßzügige Limits, kommerzieller Einsatz erlaubt
EnterpriseAuf AnfrageGroße Teams, strenge Compliance-AnforderungenKeine Limits, SLA, SSO, dedizierte Unterstützung
Wichtig für Agenturen

Das Hobby-Tier verbietet explizit die kommerzielle Nutzung. Wer Kundenprojekte auf Vercel hostet, benötigt mindestens den Pro-Plan. Für Agenturen mit mehreren Kundenprojekten lohnt sich der Vergleich mit Alternativen wie Netlify oder einem eigenen VPS – abhängig vom Traffic und den Anforderungen der Projekte.

Vercel im Vergleich zu Alternativen

Stärken von Vercel
  • Beste Next.js-Integration – alle Features ohne Konfiguration
  • Preview Deployments für jeden Branch automatisch
  • Extrem schnelles globales CDN und Edge Network
  • Developer Experience kaum zu übertreffen
  • Analytics und Speed Insights direkt eingebaut
Schwächen von Vercel
  • Kein kommerzieller Einsatz im kostenlosen Plan
  • Bei hohem Traffic können Kosten schnell steigen
  • Vendor Lock-in – einige Features nur auf Vercel optimal
  • Kein klassisches Server-Hosting – nur Serverless und Edge
PlattformStärkeSchwächeIdeal für
VercelNext.js, DX, Preview URLsKosten bei Scale, kein Free-Tier für KundenNext.js-Projekte, Agenturen (Pro-Plan)
NetlifyFormulare, CMS-IntegrationenLangsamere Builds, schwächere Next.js-UnterstützungStatische Sites, Jamstack ohne Next.js
Hetzner VPSGünstig, volle KontrolleEigene Server-Administration nötigKostenbewusste Teams mit DevOps-Kenntnissen
RailwayDatenbanken, Backend-ServicesSchwächeres CDN als VercelFull-Stack-Apps mit Datenbank

Häufige Fragen zu Vercel

Kann ich mit Vercel auch PHP oder WordPress hosten?
+

Nein. Vercel ist auf JavaScript-basierte Frontend-Frameworks und serverlose Node.js-Funktionen ausgelegt. PHP, WordPress, Ruby on Rails oder klassische Backend-Anwendungen lassen sich auf Vercel nicht betreiben. Für WordPress empfehlen sich Managed-WordPress-Anbieter oder ein klassischer VPS. Vercel ist die richtige Wahl, wenn das Frontend in Next.js, React, Vue, Nuxt, Svelte oder einem ähnlichen Framework gebaut wird.

Was sind Preview Deployments und wozu sind sie nützlich?
+

Jeder Branch und jeder Pull Request erhält auf Vercel automatisch eine eigene, öffentlich zugängliche Preview-URL. Das ermöglicht es, Änderungen live zu testen und Kunden zur Freigabe zu schicken, bevor der Code in den Hauptbranch gemergt und produktiv gesetzt wird. Für Agenturen ist das ein erheblicher Vorteil im Kundenfeedback-Prozess – kein Staging-Server nötig, kein manuelles Deployment.

Was ist der Unterschied zwischen Serverless Functions und Edge Functions?
+

Serverless Functions laufen in einer bestimmten Region auf einem Node.js-Server – sie haben Zugriff auf das vollständige Node.js-Ökosystem, starten aber mit einer leichten Verzögerung, wenn sie nach längerer Inaktivität kalt gestartet werden. Edge Functions laufen auf Vercels Edge Network geografisch nah am Nutzer, starten nahezu ohne Verzögerung und sind deutlich schneller – haben aber eingeschränkten API-Zugriff und können kein vollständiges Node.js verwenden. Edge Functions eignen sich für Authentifizierung, Weiterleitungen und Personalisierung; Serverless Functions für komplexere Backend-Logik.

Wie sicher sind Umgebungsvariablen auf Vercel?
+

Umgebungsvariablen werden auf Vercel verschlüsselt gespeichert und sind im Dashboard nicht mehr im Klartext einsehbar, sobald sie gesetzt wurden. Sie lassen sich getrennt für Production, Preview und Development-Umgebungen hinterlegen. Variablen, die mit NEXT_PUBLIC_ beginnen, werden in den Browser-Bundle eingebettet und sind öffentlich sichtbar – alle anderen bleiben serverseitig und sind für den Browser nicht zugänglich.

Lohnt sich Vercel für eine Agentur mit mehreren Kundenprojekten?
+

Das kommt auf den Stack an. Wer Kundenprojekte in Next.js baut, profitiert erheblich von Vercels nativer Next.js-Unterstützung, automatischen Previews und der schnellen Deployment-Pipeline. Der Pro-Plan ab 20 Dollar monatlich ist für professionelle Kundenprojekte Pflicht – das Hobby-Tier verbietet kommerziellen Einsatz. Wer viele kleine Projekte betreut oder ein knappes Budget hat, kann mit einem Hetzner-VPS und einem selbst betriebenen Deployment-Setup (etwa Coolify) die Kosten erheblich senken, nimmt aber mehr Verwaltungsaufwand in Kauf.

Abschnitte

onlinewachsen.de