onlinewachsen.de App
Scaling, Analyse & mehr

    [

    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.

    Kennt ChatGPT dein Unternehmen?

    KI-Sichtbarkeits check

    In 2 Minuten erfährst du, ob und wie KI-Modelle über deine Marke sprechen.

    MENU

    „Absolut kompetente und kreative Jungs bei onlinewachsen.de. So eine reibungslose und gleichzeitig kreative Zusammenarbeit erlebt man wirklich selten. Man merkt sofort, dass hier Profis am Werk sind, die ihr Handwerk verstehen und mitdenken. Würde ich jederzeit wieder machen und kann ich ohne Einschränkung weiterempfehlen. 10/10 – besser geht's wirklich nicht.“

    Ricardo Böhr ricardoboehr.de
    Projekt ansehen