Belajar tRPC - tRPC di Next.js, Remix, dan Serverless

#Pendahuluan

Setelah 15 episode, kalian punya API tRPC yang matang. Sekarang saatnya menjalankannya di mana saja. Episode 16 membahas integrasi tRPC dengan Next.js App Router dan pages router, pemakaian di Remix dan Astro, serta deployment serverless di Vercel, Cloudflare Pages, dan AWS Lambda.

Keuntungan arsitektur tRPC dari episode 2 kini terbayar: router sama, adapter yang berbeda.

#Integrasi dengan Next.js

#App Router dengan Route Handler

Pola App Router sudah kalian lihat di episode 4: satu file route handler melayani seluruh procedure. Untuk aplikasi skala penuh, tambahkan SSR hydration dari episode 13:

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { createContext } from "@/server/api/context";
import { appRouter } from "@/server/api/root";
 
const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createContext({ req }),
  });
 
export { handler as GET, handler as POST };

Di Server Component, buat caller per request dan prefetch query:

import { createCaller } from "@/server/api/root";
import { createContext } from "@/server/api/context";
import { QueryClient } from "@tanstack/react-query";
 
export default async function Page() {
  const queryClient = new QueryClient();
  const caller = createCaller(await createContext({}));
 
  await queryClient.prefetchQuery({
    queryKey: ["user.list"],
    queryFn: () => caller.user.list(),
  });
 
  return <DaftarUser />;
}

#Pages Router dengan createTRPCNext

Untuk pages router, @trpc/next menyediakan createTRPCNext yang menangani SSR dan client sekaligus:

import { createTRPCNext } from "@trpc/next";
import { httpBatchLink } from "@trpc/client";
import type { AppRouter } from "@/server/routers";
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [httpBatchLink({ url: "/api/trpc" })],
    };
  },
  ssr: true,
});

createTRPCNext membungkus aplikasi lewat trpc.withTRPC, dan dengan ssr: true data di-prefetch di server lalu di-hydrate di client — pola dehydration yang otomatis.

#Remix dan Astro

#Remix dengan Loader dan Action

Remix memakai loader dan action untuk server data. tRPC dipanggil di dalamnya via caller:

import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { createCaller } from "~/server/root";
 
export async function loader({ request }: LoaderFunctionArgs) {
  const caller = createCaller(await createContext({ request }));
  const users = await caller.user.list();
  return json({ users });
}

Data dari loader tersedia di komponen, dan untuk interaksi client, client tRPC standar tetap bisa dipakai dengan httpBatchLink. Prinsipnya: server menggunakan caller, browser menggunakan client proxy.

#Astro dengan Endpoint API

Astro bisa mengekspos tRPC lewat endpoint server dengan adapter Node atau serverless:

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import type { APIRoute } from "astro";
import { appRouter } from "../server/root";
 
export const prerender = false;
 
export const ALL: APIRoute = ({ request }) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req: request,
    router: appRouter,
    createContext: () => ({}),
  });

Selama framework menyediakan titik untuk fungsi HTTP, tRPC bisa dipasang — pola fetchRequestHandler adalah jembatan universal untuk environment berbasis fetch.

#Deploy Serverless

#Vercel dan Cloudflare Pages

Karena tRPC memakai adapter fetch, deployment serverless hampir tanpa perubahan. Di Vercel, file route handler Next.js langsung berfungsi. Di Cloudflare Pages Functions, pasang adapter yang serupa:

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "../server/root";
 
export async function onRequest(context) {
  return fetchRequestHandler({
    endpoint: "/api/trpc",
    req: context.request,
    router: appRouter,
    createContext: () => ({}),
  });
}

onRequest menerima request dan context Cloudflare — pola identik dengan route handler fetch. Seluruh procedure tRPC kini berjalan di edge tanpa server persisten.

#AWS Lambda dan Monolith

Di AWS Lambda, kaitkan handler fetch dengan HTTP API Gateway atau Lambda Function URL. Untuk deployment tradisional, jalankan server tRPC sebagai container di ECS atau EKS — pola standalone dari episode 4 dengan graceful shutdown dari episode 15.

#Hal yang Perlu Disesuaikan

Environment serverless punya karakteristik khusus:

• Stateless: cache dalam memori hilang setiap cold start — pindahkan cache ke Redis.
• WebSocket: tidak semua platform serverless mendukung koneksi persisten — gunakan layanan WebSocket terkelola untuk subscription.
• Cold start: lazy routers dari episode 13 membantu mempercepat startup.

#Penutup

Episode 16 menjalankan tRPC di berbagai environment: Next.js dengan dua router, Remix dan Astro lewat caller serta endpoint fetch, dan deployment serverless di Vercel, Cloudflare Pages, dan AWS Lambda — dengan catatan penyesuaian stateless dan WebSocket.

Inti yang harus dibawa pulang:

• App Router memakai fetchRequestHandler; pages router memakai createTRPCNext.
• Server Component memanggil tRPC lewat caller, bukan client HTTP.
• Remix memanggil tRPC di loader; Astro mengeksposnya lewat endpoint API.
• Adapter fetch membuat tRPC nyaris tanpa perubahan di Vercel dan Cloudflare.
• Serverless menuntut stateless: cache pindah ke Redis, WebSocket terkelola.
• Lazy routers mempercepat cold start di edge.

Di episode 17 selanjutnya kita akan membahas CI/CD, testing & production deployment — pipeline untuk build type-safe contracts dan linting, testing unit dan integration dengan vitest, msw, dan snapshot procedure, serta deployment production dengan konfigurasi environment, observability, dan release flow.