Drizzle vs Prisma: comparativo técnico

O código: abstração vs. intenção

Exemplo: buscando um usuário e seus posts

// prisma-example.ts
const userWithPosts = await prisma.user.findUnique({
  where: { id: 1 },
  include: { posts: true }, 
});

// drizzle-example.ts
const userWithPosts = await db
  .select()
  .from(users)
  .leftJoin(posts, eq(users.id, posts.authorId))
  .where(eq(users.id, 1));

O detalhe técnico: o que acontece por baixo?

• Prisma Engine: Quando você roda a query, o Prisma aciona um binário escrito em Rust. É seguro e robusto, mas em ambientes Serverless ou Edge Functions, esse processo adiciona um cold start maior e um consumo de memória elevado.

• Drizzle Runtime: O Drizzle tem zero engine. Ele é um gerador de strings SQL altamente tipado. A query vai direto para o driver do banco (como Postgres ou LibSQL). Essa leveza o torna imbatível para rodar na Vercel Edge.
• Dica: Entenda mais sobre como essas arquiteturas impactam o carregamento no nosso artigo sobre Cache e Performance no Next.js.

Veja na prática: performance e tipagem com Drizzle

Comparativo direto

O veredito

Bônus prático: Setup Drizzle + Next.js + Tailwind Variants + Phosphor Icons

// src/db/schema.ts
import { pgTable, serial, text, timestamp } from 'drizzle-orm/pg-core';

export const users = pgTable('users', {
  id: serial('id').primaryKey(),
  name: text('name').notNull(),
  role: text('role').notNull().default('user'),
  createdAt: timestamp('created_at').defaultNow().notNull(),
});

// src/app/page.tsx
import { db } from '@/db';
import { users } from '@/db/schema';
import { tv } from 'tailwind-variants';
import { ShieldCheck, User } from '@phosphor-icons/react/dist/ssr';

// Configurando as variantes do card
const userCard = tv({
  base: 'flex flex-col p-5 rounded-xl border bg-white shadow-sm transition-all gap-2',
  variants: {
    role: {
      admin: 'border-purple-500 bg-purple-50',
      user: 'border-gray-200 hover:border-purple-300',
    }
  }
});

const badge = tv({
  base: 'inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-semibold w-max mt-2',
  variants: {
    role: {
      admin: 'bg-purple-100 text-purple-700',
      user: 'bg-gray-100 text-gray-700',
    }
  }
});

export default async function UsersList() {
  // Query ultra rápida do Drizzle (Vai rodar liso no Vercel Edge)
  const allUsers = await db.select().from(users);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-6">
      {allUsers.map((user) => (
        <div key={user.id} className={userCard({ role: user.role as 'admin' | 'user' })}>
          <h3 className="text-lg font-bold text-gray-900">{user.name}</h3>
          
          <span className={badge({ role: user.role as 'admin' | 'user' })}>
            {user.role === 'admin' ? <ShieldCheck weight="fill" /> : <User weight="bold" />}
            {user.role.toUpperCase()}
          </span>
        </div>
      ))}
    </div>
  );
}