Typesikre API-er fra frontend til backend med tRPC · leksjon

Effektiv bunting av forespørsler

Forstå hvordan tRPC automatisk samler forespørsler i grupper, og hvordan du kan utnytte dette for bedre ytelse.

Leksjon 1 av 411 trinn

Effektiv bunting av forespørsler er en gratis leksjon i Typesikre API-er fra frontend til backend med tRPC på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Typesikre API-er fra frontend til backend med tRPC, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.

Hva er forespørselsbatching?

Forestill Dem at appen Deres må hente flere databiter fra backend. Uten batching ville hver databiter kreve sin egen separate nettverksforespørsel.

Batching av forespørsler er en teknikk der flere individuelle forespørsler kombineres til én større forespørsel før den sendes til serveren. Dette kan forbedre ytelsen betydelig.

Problemet: For mange forespørsler

Det kan være ineffektivt å sende mange små forespørsler. Hver forespørsel har et visst overhead:

  • Nettverksforsinkelse: Tidsforsinkelsen for hver rundtur.
  • TCP-håndtrykk: Oppretting av en tilkobling for hver forespørsel.
  • Serverbelastning: Individuell behandling av mange små forespørsler.

Dette legges sammen og får appen til å føles tregere.

tRPCs automatiske batching-magi

En av tRPCs mest nyttige funksjoner er automatisk batching av forespørsler. Når klientkoden Deres foretar flere tRPC-kall i rask rekkefølge, samler tRPC dem intelligent i én enkelt HTTP-forespørsel.

De trenger ikke skrive noen spesiell kode for dette; det fungerer automatisk med en gang!

Når batcher tRPC?

tRPC batcher forespørsler som skjer innenfor samme «event loop-tikk» eller i løpet av et svært kort tidsrom. Det betyr at hvis De kaller to forskjellige tRPC-spørringer rett etter hverandre, blir de sannsynligvis batchet.

Hvis De for eksempel har to useQuery-kall i en React-komponent som rendres samtidig, vil tRPC batche dem.

Eksempel på batching på klientsiden

La oss se på hvordan flere klientkall blir til én nettverksforespørsel. Forestill Dem at React-komponenten Deres trenger to forskjellige opplysninger om brukere:

// Client-side React/Next.js example
import { trpc } from './utils/trpc';

function UserProfile() {
  const { data: user1 } = trpc.user.getById.useQuery({ id: '1' });
  const { data: user2 } = trpc.user.getById.useQuery({ id: '2' });

  // ... render user data
}

Selv om De kaller useQuery to ganger, sender tRPC dette som én samlet forespørsel til serveren Deres.

Visning i nettverksfanen

Hvis De åpner utviklerverktøyene i nettleseren og går til fanen «Network», vil De se noe interessant:

  • I stedet for to separate forespørsler for user.getById?id=1 og user.getById?id=2 ser De bare én forespørsel.
  • Denne ene forespørselen går vanligvis til et eget batching-endepunkt, ofte med et navn som /api/trpc/user.getById,user.getById.
  • Svaret inneholder resultatene for begge spørringene.

Viktige fordeler med batching

Automatisk batching av forespørsler gir flere fordeler:

  • Redusert ventetid: Færre rundturer betyr raskere henting av data.
  • Mindre overhead: Mindre arbeid med å opprette og avslutte tilkoblinger.
  • Effektiv serverbruk: Servere kan behandle flere relaterte oppgaver mer effektivt.
  • Enklere kode: De trenger ikke administrere batching manuelt; tRPC håndterer det.

Hva skjer på serveren?

Når tRPC mottar en batchet forespørsel, gjør den følgende:

  1. Analyserer den ene innkommende HTTP-forespørselen.
  2. Identifiserer alle de individuelle prosedyrene som inngår i batchen.
  3. Kjører hver prosedyre, ofte parallelt hvis de er uavhengige.
  4. Kombinerer resultatene fra alle prosedyrene i ett enkelt svar.

Dette sørger for at serveren også får fordel av den optimaliserte forespørselen.

Avansert: Tilpasse batching

Selv om tRPCs automatiske batching er utmerket, kan det i sjeldne tilfeller være ønskelig å deaktivere eller konfigurere den. Det kan for eksempel være aktuelt hvis De har svært langvarige spørringer som De foretrekker å kjøre separat.

De kan konfigurere batching-alternativer når De setter opp tRPC-klienten, men for de fleste applikasjoner er standardoppførselen optimal.

Forstå batching

Hvilke av følgende påstander om tRPCs automatiske batching av forespørsler er SANNE?

Oppsummering: Effektive forespørsler

Godt jobbet! I denne leksjonen utforsket vi tRPCs automatiske batching av forespørsler.

  • Vi lærte hvordan tRPC kombinerer flere klientspørringer til én nettverksforespørsel.
  • Dette reduserer nettverksoverhead og ventetid, og forbedrer den generelle ytelsen til applikasjonen.
  • Batching skjer automatisk for forespørsler som gjøres innenfor samme event loop-tikk.

Denne kraftige funksjonen forenkler koden Deres og gjør applikasjonene raskere uten ekstra innsats!

Gratis å komme i gang

Lær deg Typesikre API-er fra frontend til backend med tRPC med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
10
Leksjoner
40

Ofte stilte spørsmål

Er leksjonen «Effektiv bunting av forespørsler» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Typesikre API-er fra frontend til backend med tRPC, inkludert «Effektiv bunting av forespørsler», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Typesikre API-er fra frontend til backend med tRPC inneholder totalt 4 leksjoner.

Hva lærer jeg i «Effektiv bunting av forespørsler»?

Forstå hvordan tRPC automatisk samler forespørsler i grupper, og hvordan du kan utnytte dette for bedre ytelse. Du øver på Typesikre API-er fra frontend til backend med tRPC med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Typesikre API-er fra frontend til backend med tRPC?

Ingen tidligere erfaring er nødvendig. Typesikre API-er fra frontend til backend med tRPC på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Effektiv bunting av forespørsler»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Typesikre API-er fra frontend til backend med tRPC-leksjonen?

Ja. Alle Typesikre API-er fra frontend til backend med tRPC-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Effektiv bunting av forespørsler
  2. Implementering av optimistiske oppdateringer
  3. Filopplastinger med tRPC
  4. Uendelige spørringer og markørbasert paginering
← Tilbake til Typesikre API-er fra frontend til backend med tRPC