T3 Stack гэж юу вэ?

T3 stack гэх хэллэг нь саяхнаас үүссэн шинэ төслийн нэр бөгөөд (t3.gg), төслийн зорилго нь сүүлийн үед трэнд болон ашиглагдаж буй open source төслүүдийг нэгтгэн, шинэ ажил эхлүүлэхэд шууд бэлэн ашиглаж болох "template" үүсгэх зорилготой юм. t3-app санг CLI tool маягаар ашиглах бөгөөд npm create [email protected] командаар ашиглана. Зөвлөж байгаа гол бүрдэлүүд нь:

• Typescript
• NextJS
• TailwindCSS
• Prisma ORM
• NextAuth
• tRPC
• Zod (validation)

Төслөө эхлүүлэхдээ дээрх 4н сонголтоос өөрт хэрэгтэй хэсгүүдээ сонгоод эхлүүлбэл нэг иймэрхүү файлууд үүснэ.

Эндээс хамгийн сонирхолтой шинэлэг зүйл нь tRPC байна. Санаа нь API endpoint-оо /api/users/<id> нтр гэж гараар зарлахгүйгээр RPC хэв маягаар үүсгэх юм. RPC-н гол санаа нь Rest API Endpoint-н оронд method-уудаа шууд client SDK болгон ашиглах юм. Гэхдээ tRPC client нь сервертэйгээ HTTP Protocol-оор харьцсан хэвээр тул, төрөл бүрийн HTTP client-уудаа чөлөөтэй ашиглан debug-дах боломжтой. gRPC гэх мэт RPC framework-ууд дээр олон хэлрүү client SDK code-оо шууд үүсгэдэг бол tRPC-н хувьд client SDK code үүсгэхгүйгээр харин client-тайгаа кодоо шууд хуваалцаж ашиглахаар зориулагдсан тул fullstack, typescript төсөлд л ашиглах боломжтой нь гол сул тал нь юм. Харин давуу тал нь Typesafe API.

Rest API endpoint-оо fetch нтр ашиглан дуудахын оронд шууд RPC серверээс оруулж ирсэн кодоо дуудан ашиглана. Жишээ нь:

// Client талдаа доорх байдлаар шууд method дуудна.
const hello = api.users.hello.useQuery({ text: "from tRPC" });
const users = api.users.getAll.getQueryKey();

// Server талд тэрхүү method-оо үүсгэхэд хангалттай. Үлдсэнийг tRPC хариуцна.
export const userRouter = createTRPCRouter({
  hello: publicProcedure
    .input(z.object({ text: z.string() }))
    .query(({ input }) => {
      return {
        greeting: `Hello ${input.text}`,
      };
    }),

  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.example.findMany();
  }),

  getSecretMessage: protectedProcedure.query(() => {
    return "you can now see this secret message!";
  }),
});

Ингэснээр сервер талд өөрчлөлт оруулахад client талдаа өөрчлөлтөө давхар оруулах, эсвэл алдаа нь шууд editor дээр харагдах зэрэг маш том давуу талтай болж байна. Үүнээс үүдэн хоёр талд элдвийн validation хийх шаардлага ч үгүй болох юм.

Бусад технологиудаас товчхон дурдвал Prisma нь одоогоор NodeJS дээрх хамгийн шилдэг ORM болоод буй. SQL/NoSQL датабазтайгаа Typescript ашиглан харилцах тул SQL код гараар бичих шаардлагагүй, мөн түүнийгээ дагаад SQL injection-д өртөх, SQL-с ирсэн кодоо model болгон хөрвүүлэх зэрэг ойр зуурын ажил хийх шаардлагагүй болно. Харин сул тал нь Prisma-гийн автоматаар үүсгэж өгсөн SQL код таны санаанд 100% нийцэхгүй байж болох юм. Ихэнх ORM-уудын адилаар заримдаа хэт нуршуу, удаан query үүсгэх гээд байдаг сул талтай ч олгож буй давуу тал нь Prisma-г сонгох хангалттай шалтгаан болох болов уу.

NextJS, Tailwind-н хувьд тайлбар илүүц биз ээ. NextAuth-н хувьд tRPC-н адилаар fullstack төсөлд л хэрэг болно. Маш олон төрлийн Authentication Provider-уудтай холбогдох код бэлэн тул, t3-г ашиглан төслөө эхлүүлсэн тохиолдолд client ID, secret 2-оо хуулж тавиад л ашиглахад бэлэн код үүсч байна.

T3 Stack-ийг үүсгэсэн нөхдүүд эдгээр технологиудаа сонгохдоо одоо үед ашиглаж болох хамгийн шилдэгүүд нь хэмээн сонгожээ. Та үүнтэй санал нийлэх үү?