Estudo de caso · Stack

Como o Dub entrega redirects rápidos e análise de cliques numa stack serverless

O Dub é uma plataforma open source de links curtos e atribuição, usada por times como Twilio, Vercel e Raycast. A stack é quase toda feita de serviços gerenciados: Next.js na Vercel para o app e os redirects, Redis como cache dos links, MySQL na PlanetScale para os dados principais e Tinybird para a análise de cliques.
Copiar stackdub.co Gestão e atribuição de links open source · Estados Unidos · fundada em 2022

A stack da Dub

Abrir no montador

Linguagem

  • TypeScriptgithub.com

    Linguagem principal de todo o monorepo.

Framework full-stack

  • Next.jsdub.co

    Roda o painel, as rotas de API e os redirects dos links pelo Middleware.

Hospedagem

  • Verceltinybird.co

    Hospeda e publica o app, com a lógica dos redirects rodando no edge.

    Por quê: As Edge Functions fazem o redirect bem perto do usuário, e por isso um encurtador encaixou tão bem.

Banco de dados

  • PlanetScaledub.co

    Banco MySQL que guarda os usuários e os dados dos links.

Login

  • NextAuth.jsgithub.com

    Cuida do login dos usuários, com adaptador para o Prisma.

  • BoxyHQ SAML Jacksongithub.com

    Oferece login único via SAML para clientes enterprise.

Pagamentos

E-mail

Estilo e kit de interface

ORM

  • Prismagithub.com

    ORM do banco MySQL, com o adaptador da PlanetScale.

Busca de dados

  • Upstash Redisupstash.com

    Guarda os dados de cada link em cache para o redirect não consultar o MySQL.

    Por quê: Steven Tey diz que o SDK em JS ficou pronto em minutos e atribui a ele os redirects abaixo de 200 ms.

  • Upstash QStashdub.co

    Roda tarefas em segundo plano como importações, exportações, webhooks, pagamentos e crons.

Testes

  • Vitestgithub.com

    Testes unitários e de integração, junto com o Playwright.

Modelo de IA

  • Vercel AI SDKgithub.com

    Recursos de IA do app, com a Anthropic como provedora de modelos.

Análise de uso

  • Tinybirdtinybird.co

    Guarda os eventos de clique e entrega as consultas de análise como endpoints de API.

    Por quê: Queriam o desempenho do ClickHouse sem manter um cluster, depois que os Sorted Sets do Redis ficaram lentos demais.

Erros

Como montaram

Nasceu como demo de edge

O fundador Steven Tey contou que um dos motivos para criar o Dub foi mostrar o que as Edge Functions fazem: elas rodam lógica de servidor, como um redirect, bem perto do usuário, e um encurtador de links é o caso de uso ideal.

O código é público no GitHub, num modelo open core. A maior parte é open source e uma parte menor, na pasta /ee, tem licença comercial.

Fontes:tinybird.co github.com

Redirects que não passam pelo banco

Os redirects rodam no Middleware do Next.js. Para aguentar muito tráfego, o Dub guarda os dados de cada link no Redis assim que o link é criado, e o redirect nunca precisa consultar o MySQL.

O MySQL, hospedado na PlanetScale, guarda os usuários e os dados dos links. Steven Tey atribui ao Upstash Redis os redirects abaixo de 200 ms.

Fontes:dub.co upstash.com

Do Redis para o Tinybird na análise

No começo, os cliques ficavam em Sorted Sets do Redis. Filtrar por local ou origem era difícil, e algumas consultas passavam de 5 segundos quando os links dos clientes chegaram a centenas de milhares de cliques.

O time gostava da velocidade do ClickHouse, mas não queria manter um cluster, então foi para o Tinybird, um ClickHouse gerenciado. O app manda cada clique para a Events API do Tinybird e lê consultas SQL publicadas como endpoints. Segundo Steven Tey, a análise ficou cerca de 100 vezes mais rápida, e os mesmos dados de clique alimentam a cobrança por uso.

Fontes:tinybird.co tinybird.co

Tarefas em segundo plano e IA

Trabalhos mais longos, como importações, exportações, webhooks e pagamentos a parceiros, passam pelo Upstash QStash, que chama as rotas de cron do próprio Dub.

O package.json do app web também traz o Vercel AI SDK com o provedor da Anthropic, o Axiom para logs e o Vitest e o Playwright para testes.

Fontes:dub.co github.com

Também detectado no site

Achado na página inicial com as regras abertas do Wappalyzer (HTML, scripts e cabeçalhos). Mostra o que roda no navegador, não o backend inteiro.

  • HSTS
  • React
  • Webpack