TypeScript tRPC Edge Computing — คู่มือฉบับสมบูรณ์ 2026 | SiamCafe Blog

แนะนำ TypeScript tRPC Edge Computing ในยุค 2026

ในโลกของการพัฒนาเว็บแอปพลิเคชันยุคใหม่ ความต้องการระบบที่มีประสิทธิภาพสูง latency ต่ำ และสามารถปรับขนาดได้อย่างยืดหยุ่น กลายเป็นปัจจัยหลักที่นักพัฒนาทุกคนต้องให้ความสำคัญ การผสมผสานระหว่าง TypeScript, tRPC และ Edge Computing ได้กลายเป็นแนวทางที่ทรงพลังที่สุดในการสร้าง API ที่ปลอดภัย เร็ว และ developer-friendly อย่างที่ไม่เคยมีมาก่อน

บทความนี้จะพาคุณดำดิ่งสู่โลกของ TypeScript tRPC บน Edge Computing อย่างละเอียด ตั้งแต่พื้นฐานไปจนถึงเทคนิคขั้นสูง พร้อมตัวอย่างโค้ดจริง และแนวทางปฏิบัติที่ดีที่สุด สำหรับนักพัฒนาที่ต้องการก้าวข้ามข้อจำกัดของ REST API แบบดั้งเดิม

ทำความเข้าใจพื้นฐาน: TypeScript, tRPC และ Edge Computing

TypeScript คืออะไร และทำไมถึงสำคัญ

TypeScript เป็น superset ของ JavaScript ที่เพิ่มระบบ type checking แบบ static เข้ามา ทำให้โค้ดมีความปลอดภัยมากขึ้น ลดโอกาสเกิด runtime error และเพิ่ม productivity ในการพัฒนา โดยเฉพาะในโปรเจกต์ขนาดใหญ่

// ตัวอย่าง TypeScript type definition สำหรับ tRPC
interface User {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}

interface Post {
  id: string;
  title: string;
  content: string;
  authorId: string;
  published: boolean;
}

tRPC: RPC ที่ไร้ขีดจำกัด

tRPC (TypeScript Remote Procedure Call) เป็น framework ที่ช่วยให้คุณสร้าง API endpoints โดยใช้ TypeScript functions ธรรมดา โดยไม่ต้องประกาศ REST routes, schemas, หรือ type definitions แยกต่างหาก ทุกอย่างถูก infer โดยอัตโนมัติจาก TypeScript compiler

ข้อดีของ tRPC ที่เห็นได้ชัดคือ:

• Zero-dependency type safety – ข้อมูลที่ส่งระหว่าง client และ server ถูกตรวจสอบ type ทุกขั้นตอน
• No code generation – ไม่ต้องใช้ tools เพิ่มเติมในการ generate types
• Full-stack TypeScript – ใช้ภาษาเดียวกันทั้ง frontend และ backend
• Automatic TypeScript inference – IDE สามารถแนะนำ properties และ methods ได้อย่างแม่นยำ

Edge Computing: คอมพิวเตอร์ที่ใกล้ผู้ใช้มากที่สุด

Edge Computing คือแนวคิดในการประมวลผลข้อมูลใกล้กับผู้ใช้หรือแหล่งข้อมูลมากที่สุด แทนที่จะส่งข้อมูลไปยัง data center ส่วนกลาง ซึ่งช่วยลด latency และเพิ่มประสิทธิภาพในการตอบสนอง ในบริบทของเว็บแอปพลิเคชัน Edge Computing มักหมายถึงการรันโค้ดบน CDN nodes หรือ serverless edge platforms เช่น Cloudflare Workers, Vercel Edge Functions, หรือ Deno Deploy

การติดตั้งและตั้งค่าโปรเจกต์ TypeScript tRPC บน Edge

ขั้นตอนที่ 1: สร้างโปรเจกต์พื้นฐาน

เริ่มต้นด้วยการสร้างโปรเจกต์ TypeScript และติดตั้ง dependencies ที่จำเป็น

# สร้างโปรเจกต์ใหม่
mkdir my-trpc-edge-app
cd my-trpc-edge-app

# ติดตั้ง dependencies
npm init -y
npm install @trpc/server @trpc/client @trpc/react-query zod
npm install -D typescript @types/node tsx

# สร้าง tsconfig.json
npx tsc --init

ขั้นตอนที่ 2: สร้าง Router และ Procedure

ใน tRPC เราจะสร้าง router ซึ่งเป็นเหมือน containers ที่รวม procedures ต่างๆ เข้าด้วยกัน

// server/router.ts
import { z } from 'zod';
import { publicProcedure, router } from './trpc';

interface User {
  id: string;
  name: string;
  email: string;
}

const users: User[] = [
  { id: '1', name: 'สมชาย', email: '[email protected]' },
  { id: '2', name: 'สมหญิง', email: '[email protected]' },
];

export const appRouter = router({
  // Query - สำหรับดึงข้อมูล
  getUserById: publicProcedure
    .input(z.object({ id: z.string() }))
    .query(({ input }) => {
      return users.find(user => user.id === input.id);
    }),

  // Mutation - สำหรับแก้ไขข้อมูล
  createUser: publicProcedure
    .input(z.object({
      name: z.string().min(2),
      email: z.string().email(),
    }))
    .mutation(({ input }) => {
      const newUser: User = {
        id: String(users.length + 1),
        name: input.name,
        email: input.email,
      };
      users.push(newUser);
      return newUser;
    }),

  // Subscription - สำหรับ real-time data
  userUpdates: publicProcedure
    .subscription(() => {
      // ส่งข้อมูลอัปเดตทุกๆ 5 วินาที
      return {
        [Symbol.asyncIterator]: async function* () {
          while (true) {
            await new Promise(resolve => setTimeout(resolve, 5000));
            yield users;
          }
        }
      };
    }),
});

export type AppRouter = typeof appRouter;

ขั้นตอนที่ 3: ปรับแต่งให้ทำงานบน Edge

เมื่อต้องการ deploy ไปยัง Edge platform อย่าง Cloudflare Workers หรือ Vercel Edge Functions เราต้องปรับแต่งการตั้งค่าให้เหมาะสม

// edge-adapter.ts
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from './router';

export default {
  async fetch(request: Request): Promise<Response> {
    return fetchRequestHandler({
      endpoint: '/api/trpc',
      req: request,
      router: appRouter,
      createContext: () => ({}),
    });
  },
};

// สำหรับ Cloudflare Workers (wrangler.toml)
// name = "my-trpc-edge"
// main = "edge-adapter.ts"
// compatibility_date = "2025-12-01"

การเปรียบเทียบ: tRPC vs REST API vs GraphQL

เพื่อให้เห็นภาพชัดเจนยิ่งขึ้น มาดูการเปรียบเทียบระหว่าง tRPC กับทางเลือกอื่นๆ

การใช้งาน tRPC ร่วมกับ Edge Computing Platforms

Cloudflare Workers

Cloudflare Workers เป็นหนึ่งในแพลตฟอร์ม Edge Computing ที่ได้รับความนิยมมากที่สุด ด้วยการรองรับ TypeScript และ tRPC อย่างเต็มรูปแบบ

// cloudflare-worker.ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server/router';

// Client-side code
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'https://my-worker.example.workers.dev/api/trpc',
      headers: {
        'Authorization': 'Bearer ' + getAuthToken(),
      },
    }),
  ],
});

// ใช้งาน client
async function main() {
  // Query
  const user = await client.getUserById.query({ id: '1' });
  console.log('User:', user);

  // Mutation
  const newUser = await client.createUser.mutate({
    name: 'สมศรี',
    email: '[email protected]',
  });
  console.log('Created:', newUser);
}

// Best Practice: ใช้ React Query hooks
import { createTRPCReact } from '@trpc/react-query';

const trpc = createTRPCReact<AppRouter>();

function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading } = trpc.getUserById.useQuery({ id: userId });

  if (isLoading) return <div>กำลังโหลด...</div>;
  return <div>{user?.name} - {user?.email}</div>;
}

Vercel Edge Functions

Vercel Edge Functions เป็นอีกทางเลือกที่ยอดเยี่ยม โดยเฉพาะถ้าคุณใช้ Next.js อยู่แล้ว

// app/api/trpc/[trpc]/route.ts (Next.js App Router)
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '@/server/router';
import { NextRequest } from 'next/server';

const handler = (req: NextRequest) => {
  return fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: appRouter,
    createContext: () => ({
      // ส่ง cookies หรือ session ไปยัง context
      session: req.cookies.get('session')?.value,
    }),
  });
};

export { handler as GET, handler as POST };

// ใช้ middleware สำหรับ authentication
import { middleware, publicProcedure } from './trpc';

const authProcedure = publicProcedure.use(
  middleware(async ({ ctx, next }) => {
    if (!ctx.session) {
      throw new Error('ไม่ได้รับอนุญาต');
    }
    return next({
      ctx: {
        ...ctx,
        user: await getUserFromSession(ctx.session),
      },
    });
  })
);

Real-world Use Cases: การประยุกต์ใช้ในโลกจริง

กรณีศึกษา 1: ระบบ E-commerce แบบ Real-time

บริษัทขายปลีกออนไลน์แห่งหนึ่งใช้ tRPC บน Edge Computing เพื่อสร้างระบบตะกร้าสินค้าแบบ real-time ที่สามารถทำงานได้แม้ในพื้นที่ที่มีอินเทอร์เน็ตช้า

• ปัญหา: API latency สูงถึง 300ms เมื่อผู้ใช้ในเอเชียตะวันออกเฉียงใต้เรียกใช้ API จาก data center ในสหรัฐอเมริกา
• วิธีแก้: ย้าย API ไปรันบน Cloudflare Workers ที่มี edge nodes ใน 250+ เมืองทั่วโลก
• ผลลัพธ์: latency ลดลงเหลือ 20-50ms และ conversion rate เพิ่มขึ้น 15%

กรณีศึกษา 2: แพลตฟอร์ม Social Media แบบ Decentralized

สตาร์ทอัพด้าน social media ใช้ tRPC ร่วมกับ Edge Computing เพื่อสร้างแพลตฟอร์มที่เน้นความเป็นส่วนตัวและความเร็ว

// social-media-router.ts
import { z } from 'zod';
import { router, publicProcedure, protectedProcedure } from './trpc';

export const socialRouter = router({
  // โพสต์แบบไม่ต้องยืนยันตัวตน
  getPublicFeed: publicProcedure
    .input(z.object({
      cursor: z.string().optional(),
      limit: z.number().min(1).max(50).default(20),
    }))
    .query(async ({ input }) => {
      // ใช้ edge database (เช่น D1, KV store)
      const posts = await getPostsFromEdgeDB({
        cursor: input.cursor,
        limit: input.limit,
      });
      return posts;
    }),

  // โพสต์เฉพาะผู้ใช้ที่ล็อกอิน
  createPost: protectedProcedure
    .input(z.object({
      content: z.string().min(1).max(500),
      mediaIds: z.array(z.string()).optional(),
    }))
    .mutation(async ({ ctx, input }) => {
      const post = await createPostInDB({
        userId: ctx.user.id,
        content: input.content,
        mediaIds: input.mediaIds,
      });

      // Trigger real-time notification ผ่าน WebSocket
      await notifyFollowers(ctx.user.id, post);

      return post;
    }),

  // Real-time subscription สำหรับ timeline
  timelineUpdates: protectedProcedure
    .subscription(async function* ({ ctx }) {
      const timeline = await getTimeline(ctx.user.id);
      yield timeline;

      // อัปเดตทุกๆ 10 วินาที
      while (true) {
        await new Promise(resolve => setTimeout(resolve, 10000));
        const updated = await getTimeline(ctx.user.id);
        yield updated;
      }
    }),
});

กรณีศึกษา 3: ระบบ IoT Dashboard

บริษัท smart home ใช้ tRPC + Edge Computing เพื่อสร้าง dashboard ที่สามารถแสดงผลข้อมูลจากเซนเซอร์นับพันตัวแบบ real-time

Best Practices และแนวทางการพัฒนา

1. การจัดการ Context และ Middleware

การใช้ context ใน tRPC ช่วยให้คุณสามารถแชร์ข้อมูลระหว่าง procedures ได้ เช่น session, database connection, หรือ authentication state

// trpc.ts - การตั้งค่า Context และ Middleware
import { initTRPC, TRPCError } from '@trpc/server';
import { z } from 'zod';

// สร้าง context type
interface Context {
  user?: {
    id: string;
    role: 'admin' | 'user';
  };
  db: Database;
  requestId: string;
}

const t = initTRPC.context<Context>().create();

// Middleware สำหรับ logging
const loggerMiddleware = t.middleware(async ({ path, type, next }) => {
  const start = Date.now();
  const result = await next();
  const duration = Date.now() - start;
  console.log(`[${type}] ${path} - ${duration}ms`);
  return result;
});

// Middleware สำหรับ authentication
const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next({
    ctx: {
      user: ctx.user,
    },
  });
});

// Middleware สำหรับ rate limiting
const rateLimiter = t.middleware(async ({ ctx, next }) => {
  const key = `rate:${ctx.user?.id || ctx.requestId}`;
  const current = await ctx.db.get(key);
  if (current && current > 100) {
    throw new TRPCError({ code: 'TOO_MANY_REQUESTS' });
  }
  await ctx.db.incr(key, 1);
  await ctx.db.expire(key, 60);
  return next();
});

// Export procedures
export const publicProcedure = t.procedure.use(loggerMiddleware);
export const protectedProcedure = t.procedure.use(loggerMiddleware).use(isAuthed).use(rateLimiter);
export const adminProcedure = protectedProcedure.use(
  t.middleware(({ ctx, next }) => {
    if (ctx.user.role !== 'admin') {
      throw new TRPCError({ code: 'FORBIDDEN' });
    }
    return next();
  })
);

2. การจัดการ Error อย่างมีประสิทธิภาพ

tRPC มีระบบ error handling ที่ยืดหยุ่นและ type-safe คุณควรใช้ประโยชน์จากมันอย่างเต็มที่

// error-handling.ts
import { TRPCError } from '@trpc/server';
import { z } from 'zod';

export const userRouter = router({
  updateProfile: protectedProcedure
    .input(z.object({
      name: z.string().min(2).optional(),
      email: z.string().email().optional(),
    }))
    .mutation(async ({ ctx, input }) => {
      try {
        // ตรวจสอบว่า email ซ้ำหรือไม่
        if (input.email) {
          const existing = await ctx.db.users.findUnique({
            where: { email: input.email }
          });
          if (existing && existing.id !== ctx.user.id) {
            throw new TRPCError({
              code: 'CONFLICT',
              message: 'อีเมลนี้มีผู้ใช้แล้ว',
            });
          }
        }

        // อัปเดตข้อมูล
        const updated = await ctx.db.users.update({
          where: { id: ctx.user.id },
          data: input,
        });

        return updated;
      } catch (error) {
        if (error instanceof TRPCError) throw error;
        
        // Log internal errors
        console.error('Update profile error:', error);
        throw new TRPCError({
          code: 'INTERNAL_SERVER_ERROR',
          message: 'เกิดข้อผิดพลาดภายใน กรุณาลองใหม่อีกครั้ง',
        });
      }
    }),
});

3. การ Optimize Performance บน Edge

การทำงานบน Edge Computing มีข้อจำกัดบางอย่าง เช่น ขนาด memory ที่จำกัด และ cold start time คุณควรปฏิบัติตามแนวทางเหล่านี้:

• Minimize bundle size – ใช้ tree-shaking และ dynamic imports
• ใช้ Edge-optimized database – เช่น Cloudflare D1, PlanetScale, หรือ Turso
• Caching strategies – ใช้ CDN caching และ stale-while-revalidate
• Batch requests – ใช้ httpBatchLink เพื่อรวม requests หลายๆ อัน
• Avoid blocking operations – ใช้ async/await และ stream data

4. การทดสอบและ Debugging

การทดสอบ tRPC application บน Edge ทำได้หลายวิธี:

// testing/trpc.test.ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import { appRouter } from '../server/router';
import { describe, it, expect } from 'vitest';

// Integration test โดยใช้ in-memory adapter
async function createTestContext() {
  const ctx = {
    user: { id: 'test-user', role: 'admin' as const },
    db: createInMemoryDatabase(),
    requestId: 'test-request',
  };
  return ctx;
}

describe('User Router', () => {
  it('ควรสร้างผู้ใช้ใหม่ได้สำเร็จ', async () => {
    const ctx = await createTestContext();
    const caller = appRouter.createCaller(ctx);

    const result = await caller.user.createUser({
      name: 'ทดสอบ',
      email: '[email protected]',
    });

    expect(result).toHaveProperty('id');
    expect(result.name).toBe('ทดสอบ');
    expect(result.email).toBe('[email protected]');
  });

  it('ควร reject เมื่ออีเมลไม่ถูกต้อง', async () => {
    const ctx = await createTestContext();
    const caller = appRouter.createCaller(ctx);

    await expect(
      caller.user.createUser({
        name: 'ทดสอบ',
        email: 'invalid-email',
      })
    ).rejects.toThrow();
  });
});

การ Deploy และ Monitoring

Deploy ไปยัง Cloudflare Workers

ขั้นตอนการ deploy tRPC application ไปยัง Cloudflare Workers:

1. ติดตั้ง Wrangler CLI: npm install -g wrangler
2. Login: wrangler login
3. สร้าง wrangler.toml พร้อมกำหนด routes และ environment variables
4. Build: npm run build
5. Deploy: wrangler publish

Monitoring และ Observability

การ monitoring เป็นสิ่งสำคัญ โดยเฉพาะเมื่อทำงานบน Edge Computing ที่กระจายตัว:

• Logging – ใช้ Cloudflare Logs, Datadog, หรือ OpenTelemetry
• Metrics – ติดตาม request latency, error rate, และ throughput
• Tracing – ใช้ distributed tracing เพื่อหา bottleneck
• Alerts – ตั้งค่า alert สำหรับ error rate ที่สูงเกินไป

แนวโน้มในอนาคตของ TypeScript tRPC Edge Computing

ในปี 2026 และต่อจากนี้ เราคาดว่าจะเห็นการพัฒนาที่น่าสนใจหลายอย่าง:

• AI-powered API generation – AI จะช่วย generate tRPC routers และ procedures จาก natural language
• Edge-native databases – ฐานข้อมูลที่ออกแบบมาเพื่อ Edge โดยเฉพาะ เช่น D1, Turso, และ Neon
• WebSocket over Edge – การรองรับ real-time communication ที่ดีขึ้นบน Edge platforms
• Zero-trust security – ระบบ authentication และ authorization ที่ทำงานบน Edge โดยตรง
• Cross-platform compatibility – tRPC จะสามารถทำงานได้ seamless ระหว่าง Edge platforms ต่างๆ

Summary

TypeScript tRPC Edge Computing ได้ปฏิวัติวิธีการสร้างและ deploy API ในยุค 2026 ด้วยการผสมผสานความปลอดภัยของ TypeScript, ความสะดวกของ tRPC, และประสิทธิภาพของ Edge Computing นักพัฒนาสามารถสร้างแอปพลิเคชันที่เร็ว ปลอดภัย และ maintainable ได้ง่ายขึ้นกว่าที่เคย

การเลือกใช้ tRPC บน Edge ไม่เพียงแต่ช่วยลด latency และต้นทุนในการดำเนินงาน แต่ยังมอบ developer experience ที่ยอดเยี่ยมด้วย type safety แบบ end-to-end และการทำงานร่วมกันอย่างลงตัวระหว่าง frontend และ backend ไม่ว่าคุณจะกำลังสร้าง e-commerce platform, social media, IoT dashboard, หรือแอปพลิเคชันประเภทใดก็ตาม การลงทุนเรียนรู้และใช้งานเทคโนโลยีนี้จะเป็นการเตรียมพร้อมสำหรับอนาคตของการพัฒนาเว็บแอปพลิเคชัน

เริ่มต้นวันนี้ด้วยการทดลองสร้างโปรเจกต์เล็กๆ บน Cloudflare Workers หรือ Vercel Edge Functions แล้วคุณจะเห็นความแตกต่างด้วยตัวคุณเองว่า TypeScript tRPC บน Edge Computing สามารถเปลี่ยนวิธีการพัฒนาเว็บแอปพลิเคชันของคุณไปตลอดกาล