Servercomponents en gegevens ophalen met tRPC
Leer hoe u gegevens rechtstreeks in Next.js Server Components ophaalt met tRPC voor optimale prestaties.
Servercomponents en gegevens ophalen met tRPC is een gratis tRPC API's met typeveiligheid van begin tot eind-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject tRPC API's met typeveiligheid van begin tot eind. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Kennismaking met Server Components
Welkom! In Next.js zijn Server Components (SC's) een krachtige functie waarmee je delen van je gebruikersinterface rechtstreeks op de server kunt renderen.
Dat betekent dat er minder JavaScript naar de browser wordt gestuurd, dat de eerste pagina's sneller laden en dat de SEO verbetert!
Gegevens ophalen op de server
Een belangrijk voordeel van Server Components is dat ze rechtstreeks op de server gegevens kunnen ophalen. In tegenstelling tot Client Components hoeven SC's geen API-aanroepen vanuit de browser te doen.
Hierdoor kunnen gegevens worden opgehaald en gerenderd voordat de pagina zelfs maar naar de client wordt gestuurd, wat de prestaties verbetert.
De rol van tRPC in SC's
Hier komt tRPC goed van pas! Wanneer je tRPC in Server Components gebruikt, kun je je backendprocedures rechtstreeks aanroepen, zonder extra HTTP-overhead.
Het is alsof je een lokale functie importeert, maar met end-to-end typeveiligheid die door tRPC en TypeScript wordt gegarandeerd.
Een aanroeper aan de serverzijde bouwen
Om gegevens in Server Components op te halen, hebben we een speciale tRPC-client nodig die procedures rechtstreeks aanroept en HTTP omzeilt. Dit wordt vaak een "aanroeper aan de serverzijde" of "serverclient" genoemd.
Deze gebruikt je tRPC-router rechtstreeks om typeveiligheid zonder netwer overhead te garanderen. Hier is een vereenvoudigd voorbeeld:
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 })Gegevens ophalen in een SC
Laten we nu onze serverClient gebruiken om gegevens rechtstreeks binnen een Server Component van Next.js op te halen. Let erop dat dit er precies uitziet als het aanroepen van een lokale functie!
De gegevens worden op de server opgehaald voordat de component wordt gerenderd en naar de client wordt gestuurd.
// 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-gegevens naar Client Components
Server Components halen vaak gegevens op, maar interacties met de gebruikersinterface vinden plaats in Client Components. Je kunt de opgehaalde gegevens als props van een SC naar een CC doorgeven.
Vergeet niet om clientcomponenten bovenaan te markeren met "use client".
// 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>
);
}Query's met invoerparameters
Net als bij gewone tRPC-query's kun je invoerparameters doorgeven aan je tRPC-aanroepen aan de serverzijde. Dit is handig om specifieke gegevens op te halen op basis van URL-parameters of andere logica aan de serverzijde.
// 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>
);
}Foutafhandeling zonder problemen
Fouten die je tRPC-procedures op de server veroorzaken, worden doorgegeven aan de Server Component. Je kunt standaardblokken van JavaScript gebruiken, zoals try...catch, om ze af te handelen.
Zo blijft je toepassing robuust, zelfs als het ophalen van gegevens mislukt.
// 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>
);
}Gegevens ophalen in SC's versus CC's
Wanneer gebruik je Server Components om gegevens op te halen en wanneer Client Components (bijvoorbeeld met React Query)?
- Server Components: ideaal voor initiële gegevens, SEO, statische of op de server gerenderde inhoud en het verkleinen van de clientbundel.
- Client Components: het meest geschikt voor interactieve gegevens, realtime-updates, gebruikersspecifieke gegevens na het eerste laden en mutaties.
Vaak gebruik je een combinatie van beide!
Gegevens ophalen in een Server Component
Stel je een Next.js App Router-project met tRPC voor. Je moet bij het eerste laden van de pagina een lijst producten weergeven. Dat laden moet snel en SEO-vriendelijk zijn.
Herhaling: SC's en tRPC
In deze les hebben we onderzocht hoe je met tRPC rechtstreeks gegevens ophaalt binnen Server Components van Next.js.
- We hebben geleerd hoe je een tRPC-aanroeper aan de serverzijde maakt.
- We hebben gegevens rechtstreeks in Server Components opgehaald.
- We hebben opgehaalde gegevens als props aan Client Components doorgegeven.
- We hebben queryparameters en fouten in SC's afgehandeld.
- We hebben het verschil tussen gegevens ophalen in SC's en CC's leren begrijpen.
Deze aanpak combineert de typeveiligheid van tRPC met de prestatievoordelen van Server Components voor robuuste en efficiënte gegevensophaling.
Leer tRPC API's met typeveiligheid van begin tot eind met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 10
- Lessen
- 40
Veelgestelde vragen
Is de les “Servercomponents en gegevens ophalen met tRPC” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad tRPC API's met typeveiligheid van begin tot eind, waaronder “Servercomponents en gegevens ophalen met tRPC”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus tRPC API's met typeveiligheid van begin tot eind bevat in totaal 4 lessen.
Wat leer ik in “Servercomponents en gegevens ophalen met tRPC”?
Leer hoe u gegevens rechtstreeks in Next.js Server Components ophaalt met tRPC voor optimale prestaties. Je oefent met tRPC API's met typeveiligheid van begin tot eind door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met tRPC API's met typeveiligheid van begin tot eind te beginnen?
Ervaring vooraf is niet nodig. tRPC API's met typeveiligheid van begin tot eind op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Servercomponents en gegevens ophalen met tRPC”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over tRPC API's met typeveiligheid van begin tot eind?
Ja. Elke les over tRPC API's met typeveiligheid van begin tot eind bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- tRPC met Next.js App Router
- Geavanceerde integratie met React Query
- Servercomponents en gegevens ophalen met tRPC
- Optimistische updates met tRPC-mutaties