Palvelinkomponentit ja tRPC-tietojenhaku
Tutustukaa siihen, miten tietoja haetaan suoraan Next.js-palvelinkomponenteissa tRPC:n avulla optimaalisen suorituskyvyn saavuttamiseksi.
Palvelinkomponentit ja tRPC-tietojenhaku on ilmainen tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. tRPC:n tyyppiturvalliset API:t päästä päähän-kurssilla on yhteensä 4 oppituntia.
Johdanto Server Components -komponentteihin
Tervetuloa! Next.js:ssä Server Components (SCs) on tehokas ominaisuus, jonka avulla voitte renderöidä käyttöliittymän osia suoraan palvelimella.
Tämä tarkoittaa, että selaimeen lähetetään vähemmän JavaScriptiä, sivut latautuvat aluksi nopeammin ja hakukoneoptimointi paranee!
Tietojen hakeminen palvelimella
Server Components -komponenttien keskeinen etu on niiden kyky hakea tietoja suoraan palvelimelta. Toisin kuin Client Components -komponentit, SCs-komponenttien ei tarvitse tehdä API-kutsuja selaimesta.
Tietoja voidaan hakea ja renderöidä ennen kuin sivu lähetetään asiakkaalle, mikä parantaa suorituskykyä.
tRPC:n rooli SCs-komponenteissa
Tässä tRPC pääsee oikeuksiinsa! Kun tRPC:tä käytetään Server Components -komponenteissa, voitte kutsua taustajärjestelmän proseduurikutsuja suoraan ilman HTTP:n aiheuttamaa ylimääräistä kuormaa.
Se muistuttaa paikallisen funktion tuomista, mutta tRPC ja TypeScript takaavat päästä päähän ulottuvan tyyppiturvallisuuden.
Palvelinpuolen kutsun rakentaminen
Jotta voimme hakea tietoja Server Components -komponenteissa, tarvitsemme erityisen tRPC-asiakasohjelman, joka kutsuu proseduurikutsuja suoraan ja ohittaa HTTP:n. Tästä käytetään usein nimitystä "server-side caller" tai "server client".
Se käyttää tRPC-reititintäsi suoraan varmistaakseen tyyppiturvallisuuden ilman verkkoliikenteen aiheuttamaa ylimääräistä kuormaa. Tässä on yksinkertaistettu esimerkki:
import { appRouter } from '@/server/routers/_app';
import { createCallerFactory } from '@trpc/server';
// Create a tRPC caller that can be used on the server
const createCaller = createCallerFactory(appRouter);
export const serverClient = createCaller({});
// Context can be passed here, e.g., createCaller({ user: currentUser })Tietojen hakeminen SC-komponentissa
Käytetään nyt serverClient-asiakasohjelmaamme tietojen hakemiseen suoraan Next.js:n Server Components -komponentissa. Huomaatte, että se näyttää aivan paikallisen funktion kutsumiselta!
Tiedot haetaan palvelimella ennen komponentin renderöintiä ja lähettämistä asiakkaalle.
// app/page.tsx (Server Component)
import { serverClient } from '@/utils/trpc';
export default async function HomePage() {
const posts = await serverClient.post.list(); // Call a tRPC query
return (
<div>
<h1>Latest Posts</h1>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}SC-komponentin tietojen välittäminen Client Components -komponenteille
Server Components -komponentit hakevat usein tietoja, mutta käyttöliittymän vuorovaikutus tapahtuu Client Components -komponenteissa. Voitte välittää haetut tiedot SC-komponentista CC-komponenttiin propseina.
Muistakaa merkitä client-komponentit "use client"-direktiivillä tiedoston alussa.
// components/PostList.tsx (Client Component)
"use client";
interface Post {
id: string;
title: string;
}
export function PostList({ posts }: { posts: Post[] }) {
// Client-side interactions can happen here
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
// app/page.tsx (Server Component, updated)
import { serverClient } from '@/utils/trpc';
import { PostList } from '@/components/PostList';
export default async function HomePage() {
const posts = await serverClient.post.list();
return (
<div>
<h1>Latest Posts</h1>
<PostList posts={posts} /> {/* Pass data as props */}
</div>
);
}Kyselyt syöteparametreilla
Kuten tavallisissa tRPC-kyselyissä, voitte välittää syöteparametreja palvelinpuolen tRPC-kutsuihin. Tämä on hyödyllistä, kun haetaan tiettyjä tietoja URL-parametrien tai muun palvelinpuolen logiikan perusteella.
// app/posts/[id]/page.tsx (Server Component)
import { serverClient } from '@/utils/trpc';
interface PostPageProps {
params: { id: string };
}
export default async function PostPage({ params }: PostPageProps) {
const { id } = params;
const post = await serverClient.post.byId({ id }); // Pass 'id' as input
if (!post) {
return <div>Post not found!</div>;
}
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}Virheiden hallinta hallitusti
Palvelimella tRPC-proseduureista heitetyt virheet välittyvät Server Components -komponentille. Voitte käsitellä niitä tavallisilla JavaScriptin try...catch-lohkoilla.
Näin sovellus pysyy toimintavarmana, vaikka tietojen haku epäonnistuisi.
// app/page.tsx (Server Component with error handling)
import { serverClient } from '@/utils/trpc';
export default async function HomePage() {
let posts = [];
let error = null;
try {
posts = await serverClient.post.list();
} catch (e) {
console.error("Failed to fetch posts:", e);
error = "Could not load posts. Please try again.";
}
return (
<div>
<h1>Latest Posts</h1>
{error && <p style={{ color: 'red' }}>{error}</p>}
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}SC- ja CC-komponenttien tietojen haku
Milloin tietojen hakemiseen kannattaa käyttää Server Components -komponentteja ja milloin Client Components -komponentteja, esimerkiksi React Queryn kanssa?
- Server Components: Ihanteellisia alkutietojen, hakukoneoptimoinnin, staattisen tai palvelimella renderöidyn sisällön sekä asiakaspuolen paketin koon pienentämisen kannalta.
- Client Components: Parhaita vuorovaikutteisiin tietoihin, reaaliaikaisiin päivityksiin, alkulatauksen jälkeisiin käyttäjäkohtaisiin tietoihin ja mutaatioihin.
Usein käytätte näiden yhdistelmää!
Tietojen haku Server Componentissa
Ajatellaan Next.js App Router -projektia, jossa käytetään tRPC:tä. Teidän on näytettävä tuoteluettelo sivun ensimmäisellä latauskerralla, ja latauksen tulee olla nopea sekä hakukoneystävällinen.
Kertaus: SCs ja tRPC
Tässä oppitunnissa tarkastelimme tietojen hakemista suoraan Next.js:n Server Components -komponenteissa tRPC:n avulla.
- Opimme luomaan palvelinpuolen tRPC-kutsujan.
- Haواimme tietoja suoraan Server Components -komponenteissa.
- Välitimme haetut tiedot Client Components -komponenttien propseina.
- Käsittelimme SC-komponenttien kyselyparametreja ja virheitä.
- Opimme ymmärtämään SC- ja CC-komponenttien tietojen haun välisen eron.
Tässä lähestymistavassa tRPC:n tyyppiturvallisuus yhdistyy Server Components -komponenttien suorituskykyetuihin, mikä mahdollistaa toimintavarman ja tehokkaan tietojen haun.
Opi tRPC:n tyyppiturvalliset API:t päästä päähän tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 10
- Oppitunnit
- 40
Usein kysytyt kysymykset
Onko oppitunti ”Palvelinkomponentit ja tRPC-tietojenhaku” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolun 3 oppituntia, myös oppitunnin “Palvelinkomponentit ja tRPC-tietojenhaku”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. tRPC:n tyyppiturvalliset API:t päästä päähän-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Palvelinkomponentit ja tRPC-tietojenhaku”?
Tutustukaa siihen, miten tietoja haetaan suoraan Next.js-palvelinkomponenteissa tRPC:n avulla optimaalisen suorituskyvyn saavuttamiseksi. Harjoittelet tRPC:n tyyppiturvalliset API:t päästä päähän-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni tRPC:n tyyppiturvalliset API:t päästä päähän-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin tRPC:n tyyppiturvalliset API:t päästä päähän-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Palvelinkomponentit ja tRPC-tietojenhaku”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunnilla?
Kyllä. Jokainen tRPC:n tyyppiturvalliset API:t päästä päähän-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- tRPC Next.js App Routerissa
- Edistynyt React Query -integraatio
- Palvelinkomponentit ja tRPC-tietojenhaku
- Optimistiset päivitykset tRPC-mutaatioilla