Hono + Drizzle + tRPC: Actually Fast TypeScript Stack That Doesn't Suck

Express is slow as shit. Next.js API routes are overengineered for most use cases. GraphQL is a complexity nightmare that makes simple CRUD operations feel like rocket surgery. If you've ever spent a weekend trying to get PostgreSQL to work reliably in serverless environments, you know the pain.

After using this stack in production for 6 months, here's what actually matters: it's fast and it works. Real performance benchmarks from production systems show sub-10ms response times consistently, memory usage under 30MB, and zero cold start penalties.

What Makes This Different From Everything Else

Here's what I learned building SaaS apps with this over the past 6 months:

Type Safety That Actually Works: Change a database column in Drizzle and TypeScript immediately shits on every broken frontend component. No codegen bullshit that breaks your CI pipeline. No GraphQL schema drift that haunts you at 3am. Just TypeScript inference working as designed, with Drizzle's type-safe schema definitions and tRPC's end-to-end type safety.

Edge Performance That's Not Marketing Bullshit: Hono actually delivers sub-10ms responses on Cloudflare Workers. I'm talking real production metrics, not synthetic benchmarks. Our dashboard loads faster from Tokyo than most apps load from the same continent.

Setup That Doesn't Make You Want To Quit: Three packages. One config file. Deploy anywhere. No webpack hell, no Babel configuration, no "it works on my machine" syndrome. The T3 stack guys figured this out - you should be building features, not configuring build tools for 6 hours.

How This Actually Works in Practice

Forget the architecture theory bullshit. Here's what matters:

Edge Runtime That Doesn't Suck

Express assumes your server runs forever. That's not how Cloudflare Workers or Vercel Edge Runtime work - your code shuts down between requests and spins up in milliseconds. Most frameworks break horribly in this environment because they weren't designed for stateless execution models.

Hono's tiny 7KB bundle boots instantly. Drizzle actually works in edge environments unlike Prisma which requires connection pooling gymnastics. tRPC eliminates REST routing overhead entirely by generating type-safe client code that calls procedures directly. Benchmarks show 40% fewer round trips compared to traditional REST APIs with similar functionality.

One Repo, Zero Bullshit

Microservices fragment your codebase across 47 different repositories. This monorepo approach keeps your API, database, and frontend in one place with shared TypeScript types. No more "the frontend says it's a string but the backend sends a number" bugs.

Check the TER stack repo - one codebase, one deployment, zero schema drift between frontend and backend. It actually works.

Hosting Reality: Vercel's free tier will murder your database connections if you get any traffic. Learned this when our landing page hit HackerNews and we got a $300 Neon bill.

SQL When You Need It, ORM When You Don't

Prisma abstracts SQL until you need complex queries, then you're fucked. Drizzle lets you write raw SQL with full TypeScript types when you need it, and gives you a decent query builder for simple stuff. Performance benchmarks show Drizzle uses 30MB memory vs Prisma's 80MB - that matters in edge environments. Best of both worlds without the vendor lock-in nightmare.

What Breaks (And What Doesn't)

After 6 months in production, here's the real shit:

What Actually Works: Development is fast as hell. Change a database column and every broken frontend component lights up red instantly. Deploy to edge and your users in Singapore get the same 10ms response times as users in Ohio. The feedback loop is addictive.

What Will Piss You Off: TypeScript compilation gets slow as fuck with complex tRPC routers. Edge runtimes have weird memory limits - your 500MB CSV processing job won't work. Mobile apps can't consume tRPC directly, so you're writing REST endpoints anyway.

Migration Reality: We moved from Express + Prisma and the hardest part wasn't the code - it was convincing the team that 'new' doesn't mean 'broken'. Six months later, our API response times are 70% faster and nobody misses Prisma's generated types. But getting the frontend team to switch from REST to tRPC took three weeks of proving it works and one weekend of them fixing merge conflicts with the old API client.

Version Hell Alert: Pin your versions. I'm running Hono 4.6.3, Drizzle 0.44.5, tRPC 11.0.0 as of August 2024. These tools move fast and breaking changes will ruin your week if you let npm auto-update.

When This Stack Makes Sense

Use this for: Internal tools, SaaS dashboards, anything where you control both frontend and backend. Perfect for rapid prototyping that needs to scale.

Don't use this for: Public websites needing SEO, anything requiring server-side rendering, teams that hate TypeScript, or if you need to support every third-party integration under the sun.

OK, enough theory. Here's how to actually build this shit without losing your mind.

Setting up this integration is actually straightforward, unlike most TypeScript stacks. But there are gotchas that will fuck up your day if you don't know about them upfront.

Setup That Actually Works

Start with the right project structure or you'll hate your life later:

npm create hono@latest my-app
cd my-app
## Pin Hono at 4.6.3 - newer versions have breaking changes
## tRPC 11.x is stable, Drizzle updates are usually safe
npm install hono@4.6.3 @trpc/server@11.0.0 drizzle-orm@latest
npm install -D @types/node tsx

Gotcha #1: Don't let npm install the latest versions. These tools move fast and breaking changes happen monthly. Check Hono's release notes, Drizzle's breaking changes, and tRPC's migration guides before upgrading. Use exact versions in package.json, not caret ranges.

Gotcha #2: Install `tsx` for development or your hot reload will be slower than dial-up internet. tsx uses esbuild under the hood for fast TypeScript compilation, unlike ts-node which is notoriously slow.

Database Schema (The Part That Actually Matters)

This is where Drizzle shines - your schema definitions are your data contracts, and TypeScript enforces them everywhere. Unlike Prisma's schema.prisma files that require code generation, Drizzle uses plain TypeScript for immediate type inference:

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

export const users = pgTable('users', {
  id: serial('id').primaryKey(),
  email: text('email').unique().notNull(),
  name: text('name').notNull(),
  isActive: boolean('is_active').default(true),
  createdAt: timestamp('created_at').defaultNow()
});

export const posts = pgTable('posts', {
  id: serial('id').primaryKey(),
  title: text('title').notNull(),
  content: text('content').notNull(),
  authorId: integer('author_id').references(() => users.id), // This breaks if you import it differently
  publishedAt: timestamp('published_at').defaultNow()
});

// Export types for tRPC procedures
export type User = typeof users.$inferSelect;
export type NewUser = typeof users.$inferInsert;
export type Post = typeof posts.$inferSelect;

Gotcha #3: Import integer in the same statement as your other types or the `references()` function will shit itself with cryptic error messages. Drizzle's TypeScript module resolution is sensitive to import statement structure. Check Drizzle's column type docs and foreign key examples for the correct import patterns.

No codegen, no build step, no "the types are out of sync" bullshit. Change a column and every affected component lights up with TypeScript errors immediately.

tRPC Procedures (Keep These Small or TypeScript Dies)

Here's where the magic happens - and where TypeScript compilation goes to die if you're not careful:

// src/trpc/index.ts
import { initTRPC } from '@trpc/server';
import { db } from '../db';
import { users, posts, type User, type NewUser } from '../db/schema';
import { eq, desc } from 'drizzle-orm';
import { z } from 'zod';

const t = initTRPC.create();

// Keep this small - max 10-15 procedures per router or TypeScript compilation gets slow as shit
export const appRouter = t.router({
  users: t.router({
    list: t.procedure
      .query(async (): Promise<User[]> => {
        // Always add limits unless you want to DOS your database
        return await db.select().from(users).limit(100);
      }),
    
    create: t.procedure
      .input(z.object({
        email: z.string().email(),
        name: z.string().min(1),
      }))
      .mutation(async ({ input }): Promise<User> => {
        const [newUser] = await db
          .insert(users)
          .values(input)
          .returning(); // PostgreSQL-specific - breaks on MySQL
        return newUser;
      }),
    
    posts: t.procedure
      .input(z.object({ userId: z.number() }))
      .query(async ({ input }) => {
        return await db
          .select()
          .from(posts)
          .where(eq(posts.authorId, input.userId))
          .orderBy(desc(posts.publishedAt));
      })
  })
});

export type AppRouter = typeof appRouter;

Gotcha #4: Keep your routers small (10-15 procedures max) or TypeScript will take 30 seconds to compile. Split large routers into separate modules.

Gotcha #5: .returning() is PostgreSQL-specific. If you're using MySQL or SQLite, you'll need to fetch the inserted record separately.

Hono Server Integration

Hono provides the HTTP layer that makes tRPC procedures accessible:

// src/index.ts
import { Hono } from 'hono';
import { trpcServer } from '@trpc/server/adapters/fetch';
import { appRouter } from './trpc';
import { cors } from 'hono/cors';

const app = new Hono();

// CORS will fuck you if you get this wrong
app.use('*', cors({
  origin: process.env.NODE_ENV === 'production' 
    ? ['https://yourdomain.com'] 
    : ['http://localhost:3000', 'http://localhost:5173'], // Add Vite default port
  credentials: true,
}));

// Mount tRPC handler - this path matters for client config
app.use('/trpc/*', 
  trpcServer({
    router: appRouter,
    createContext: () => ({}), // Add auth context here later
  })
);

// Essential for production monitoring
app.get('/health', (c) => c.json({ status: 'ok', timestamp: new Date().toISOString() }));

export default app;

Gotcha #6: CORS will bite you in production. Set your production domain explicitly or requests will fail silently.

Gotcha #7: If you're using Vite for frontend development, add port 5173 to your CORS origins or you'll get mysterious connection errors.

Client-Side Integration

The frontend consumes the API through tRPC's React hooks:

// src/client/trpc.ts
import { createTRPCReact } from '@trpc/react-query';
import { httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../trpc';

export const trpc = createTRPCReact<AppRouter>();

export const trpcClient = trpc.createClient({
  links: [
    httpBatchLink({
      // Make this configurable or you'll hardcode localhost in production
      url: process.env.NODE_ENV === 'production' 
        ? 'https://api.yourdomain.com/trpc' 
        : 'http://localhost:8787/trpc',
      // Batching saves round trips but can mask slow queries
    }),
  ],
});

Gotcha #8: Don't hardcode localhost in your client config. Use environment variables or you'll be debugging production API calls to localhost.

Frontend components get full type safety (and fast feedback when you break things):

// src/client/UserList.tsx
import { trpc } from './trpc';

export function UserList() {
  const { data: users, isLoading, error } = trpc.users.list.useQuery();
  const utils = trpc.useUtils(); // Get this for invalidation
  
  const createUser = trpc.users.create.useMutation({
    onSuccess: () => {
      // Don't use trpc.users.list.invalidate() - it's deprecated and breaks
      utils.users.list.invalidate();
    },
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {users?.map(user => (
        <div key={user.id}>
          {user.name} ({user.email})
        </div>
      ))}
    </div>
  );
}

Gotcha #9: Use trpc.useUtils() for cache invalidation. The old trpc.procedure.invalidate() syntax is deprecated and will break in newer versions.

Advanced Integration Patterns

Request Context and Authentication

Production applications need authentication context flowing through the entire stack:

// src/trpc/context.ts
import { inferAsyncReturnType } from '@trpc/server';
import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
import jwt from 'jsonwebtoken';

export async function createContext({ req }: FetchCreateContextFnOptions) {
  const token = req.headers.get('authorization')?.replace('Bearer ', '');
  
  let user = null;
  if (token) {
    try {
      const decoded = jwt.verify(token, process.env.JWT_SECRET!) as any;
      user = decoded;
    } catch {
      // Invalid token, user remains null
    }
  }

  return { user, db };
}

export type Context = inferAsyncReturnType<typeof createContext>;

// Protected procedure helper
const t = initTRPC.context<Context>().create();

export const protectedProcedure = t.procedure
  .use(({ ctx, next }) => {
    if (!ctx.user) {
      throw new TRPCError({ code: 'UNAUTHORIZED' });
    }
    return next({ ctx: { ...ctx, user: ctx.user } });
  });

Database Connections (The Part That Breaks in Production)

Edge environments will fuck up your database connections if you're not careful:

// src/db/index.ts
import { drizzle } from 'drizzle-orm/neon-http';
import { neonConfig } from '@neondatabase/serverless';

// This is critical for edge runtimes or connections will leak
if (process.env.NODE_ENV === 'production') {
  neonConfig.fetchConnectionCache = true;
  neonConfig.useSecureWebSocket = false; // Fixes WebSocket issues in some edge environments
}

// Use ! operator carefully - this will crash if DATABASE_URL is undefined
export const db = drizzle(process.env.DATABASE_URL!);

// Essential for debugging production database issues
export async function healthCheck() {
  try {
    const start = Date.now();
    await db.execute(sql`SELECT 1`);
    return { healthy: true, responseTime: Date.now() - start };
  } catch (error) {
    return { healthy: false, error: error.message };
  }
}

Gotcha #10: Edge runtimes have weird WebSocket limitations that will fuck you on deployment day. Set useSecureWebSocket: false if you're getting Error: WebSocket connection failed in production while everything works fine locally. Spent half the weekend debugging WebSocket errors that worked fine locally.

Production Reality: This setup works great for 95% of applications. The remaining 5% hit edge runtime memory limits, database connection issues, or TypeScript compilation performance problems. When that happens, you'll need to split services or move to traditional hosting.

The magic of this stack is that Drizzle types flow into tRPC procedures, tRPC procedures become Hono routes, and TypeScript catches everything automatically. No manual synchronization, no schema drift, no "it works on my machine" bullshit.