Comparing Heroku, Netlify, Vercel, and GitHub Pages for Node.js Projects

Running popular web-based CD tools against each other
Geology: comparative shapes and heights of mountains. Coloured aquatint by A. Tardieu after L. Brugiere
Geology: comparative shapes and heights of mountains. Coloured aquatint by A. Tardieu after L. Brugiere. Bruguiere, Louis. Wellcome Collection. Public Domain Mark. Source: Wellcome Collection.

I've used Netlify on several projects. Now Vercel is coming up, so I decided to do a head-to-head comparison. It’s years since I touched Heroku, so I added it to the ring. I made a sample project, hosting the code on GitHub, so figured why not see how GitHub Pages measure up too.

Read More

Getting GitHub Pages working was an adventure in itself. Read about it in my article Using GitHub Pages to Build, Deploy, and Host Next.js.

The demo project I used is the Next.js blog tutorial. The code is here: github.com/olets/nextjs-on-all-the-hosts

Sites

Contents

Deployment

GitHub Pages

  • Real time timer shows how long a deployment has been running
  • Production deploys can be triggered from the web UI
  • The build command(s) can be configured in the configuration file

Heroku

  • Duration of ongoing deploys is not surfaced
  • Production deploys can be triggered from the web UI
  • The build command can be configured in the configuration file

Netlify

  • Duration of ongoing deploys is not surfaced
  • The Next.js tutorial (https://nextjs.org/learn) deploy in approximately 1 minute
  • Production deploys can be triggered from the web UI
  • The build command can be configured in the web UI or the configuration file

Vercel

  • Real time timer shows how long a deployment has been running
  • The Next.js tutorial (https://nextjs.org/learn) deploy in approximately 20–40 seconds
  • Production deploys cannot be triggered from the web UI
  • The build command can be configured in the web UI

Branch deploys

GitHub Pages

  • Branch deploys are not supported

Heroku

  • Branch deploys are not supported

Netlify

  • By default, only the trunk branch is deployed
  • Supports deploying all branches
  • Supports deploying select branches
  • Branch domains are <7 digit commit SHA>--<production domain>.netlfiy.app by default
  • Custom branch domains are supported for Netlify DNS users
  • Branch deploys can be triggered from web UI

Vercel

  • All branches are deployed
  • Branch domains are <repo name>-<9 character commit SHA>-<user>.vercel.app by default
  • Branches can be given custom vercel.app domains for free
  • Branch deploys can be triggered from web UI

Analytics

GitHub Pages

  • Analytics are not supported

Heroku

  • Analytics are supported for paid accounts
  • Metrics:
    • Response time
    • Throughput (number of requests)
    • Memory usage
    • Load
    • Events (e.g. errors, status changes, restarts, etc.)

Netlify

  • Analytics are supported for paid accounts
  • Metrics:
    • Pageviews
    • Unique visitors
    • Top locations
    • Top pages
    • Top resources not found
    • Top sources
    • Bandwidth used

Vercel

  • Analytics are supported for Next.js, Nuxt.js, and Gatsby
  • Free accounts can use analytics on a single project
  • Metrics:
    • "Real Experience Score" (proprietary)
    • First contentful paint
    • Largest contentful paint
    • Cumulative layout shift
    • First input delay

GitHub Integration

Netlify

  • Can comment on pull requests with
    • diff link (duplicates GitHub pull request UI functionality)
    • deploy log link
    • branch deploy URL

Vercel

  • Can comment on pull requests with
    • deploy log link
    • branch deploy URL

Keep Reading

See All Articles