tRPC
tRPC je framework, ktorý umožňuje volať serverové funkcie z frontendu s plnou typovou bezpečnosťou — bez generovania kódu, bez REST schém, bez manuálnej synchronizácie typov. TypeScript overí správnosť volania pri kompilácii.
Ako to funguje
V tradičnom full-stack vývoji existuje neviditeľná hranica medzi frontendom a backendom. Server definuje REST endpoint, ktorý vracia nejaké JSON. Frontend ho volá a dúfa, že štruktúra odpovedá tomu, čo čaká. Typy sa píšu dvakrát alebo sa generujú z OpenAPI schémy — a každá zmena na serveri vyžaduje aktualizáciu klienta. tRPC túto hranicu prakticky vymazáva.
Funguje to tak: na serveri (Fastify alebo Next.js API routes) definujete router s procedúrami — query pre čítanie, mutation pre zápis. Každá procedúra má vstupnú validáciu cez Zod a návratový typ odvodený z TypeScriptu. Na frontende importujete typ tohto routera a zavoláte procedúru rovnako, ako by ste zavolali lokálnu funkciu. TypeScript kompilátor vie presne, čo procedúra prijíma a čo vracia — akákoľvek nezhoda je okamžite červená čiara v editore.
Praktický dôsledok: keď zmeníte signatúru procedúry na serveri — pridáte nové povinné pole alebo zmeníte typ návratovej hodnoty — TypeScript okamžite zvýrazní všetky miesta vo frontende, ktoré treba aktualizovať. Nie až keď sa spustí aplikácia, nie až keď tester narazí na chybu — pri kompilácii. Tento posun z runtime chýb na compile-time chyby dramaticky skrátuje čas ladenia.
tRPC nie je vhodný pre každú situáciu. Predpokladá, že frontend a backend sú písané v TypeScripte a žijú v rovnakom monorepe alebo aspoň zdieľajú typy. Pre verejné API spotrebované externými klientmi (mobilné aplikácie v iných jazykoch, partneri) zostáva REST s OpenAPI dokumentáciou lepšou voľbou. Pre interné aplikácie, kde ovládate oba konce, je tRPC v praxi oveľa pohodlnejší.
Z našej praxe
V Strange Loops je tRPC primárnym spôsobom komunikácie medzi Next.js frontendom a Fastify backendom vo všetkých interných projektoch — rehabit (klinický IS pre SylvoRehab), QualiTravel (správa cestovnej kancelárie), Ovulogy (edtech SaaS). Typy routera sa exportujú z Fastify API a importujú do Next.js cez zdieľaný balíček v Turborepo monorepe. Kombinácia tRPC + Zod + Drizzle ORM dáva typovú bezpečnosť od formulára vo frontende cez API vrstvu až po SQL dotaz — a späť. Chyby v dátovom kontrakte sa odhaľujú v sekunde po zmene, nie pri testovaní na stagingu.
Kedy to potrebujete
- Vyvíjate full-stack aplikáciu v TypeScripte a chcete sa vyhnúť duplicite typov medzi frontendom a backendom
- Meníte dátový model a chcete, aby TypeScript okamžite ukázal všetky miesta vo frontende, ktoré treba aktualizovať
- Prototypujete novú funkciu a chcete pridávať serverovú logiku a volania z UI paralelne bez generovania kódu
- Kombinujete s React Query a chcete automatické cachovanie, invalidáciu a optimistické aktualizácie UI pri mutáciách
Najčastejšie otázky
Čím sa tRPC líši od REST API?
REST je architektonický štýl postavený na HTTP slovesách a URL cestách — flexibilný, ale bez natívnej typovej bezpečnosti. tRPC je TypeScript-first: typy sú zdrojom pravdy a sieťová vrstva je implementačný detail. REST je lepší pre verejné API spotrebované rôznymi klientmi, tRPC pre interné full-stack TypeScript aplikácie kde ovládate obe strany.
Funguje tRPC s Next.js App Routerom?
Áno. tRPC v10+ podporuje Next.js App Router — procedúry môžete volať zo Server Components aj z Client Components. Pre Server Components sa používa priame volanie caller bez HTTP round-tripu, pre Client Components štandardný tRPC klient s React Query. Setup vyžaduje niekoľko konfiguračných krokov, ale dokumentácia tRPC to pokrýva detailne.
Potrebujem tRPC aj keď mám len jeden endpoint?
Pre jediný endpoint sa tRPC neoplatí — nastavenie má určitú réžiu. Pre aplikácie s viacerými procedúrami (formuláre, zoznamy, mutácie) sa investícia do nastavenia vráti rýchlo. Rozhranie sa typicky vypláca od piateho-desiateho endpointu, kde typová bezpečnosť začína aktívne zachytávať reálne chyby.
Súvisiace pojmy
TypeScript
TypeScript je programovací jazyk od Microsoftu — JavaScript rozšírený o statický typový systém. Kompilátor overí, že funkcie dostávajú správne parametre a objekty majú správnu štruktúru ešte pred spustením kódu, čím zachytí celú triedu chýb, ktoré by inak objavil až používateľ v produkcii.
API
API (Application Programming Interface) je formálne definované rozhranie, cez ktoré jeden softvér komunikuje s druhým. Webové API typicky prenáša dáta cez HTTP vo formáte JSON — klient pošle požiadavku, server vráti odpoveď, pričom ani jeden nemusí vedieť nič o vnútornej implementácii toho druhého.
Potrebujete s tým pomôcť?
Ak riešite niečo z toho, čo tu opisujeme, ozvite sa. Povieme vám, či a ako vieme pomôcť.