服务器组件与 tRPC 数据获取
理解如何在 Next.js 服务器组件中直接使用 tRPC 获取数据，以实现最佳性能。
服务器组件与 tRPC 数据获取 是 CoddyKit 上的免费 tRPC End-to-End Type Safe APIs 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 tRPC End-to-End Type Safe APIs 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 tRPC End-to-End Type Safe APIs 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Intro to Server Components
Welcome! In Next.js, Server Components (SCs) are a powerful feature that lets you render parts of your UI directly on the server.
This means less JavaScript sent to the browser, faster initial page loads, and improved SEO!
Data Fetching on the Server
A key benefit of Server Components is their ability to fetch data directly on the server. Unlike Client Components, SCs don't need to make API calls from the browser.
This allows data to be fetched and rendered before the page is even sent to the client, boosting performance.
tRPC's Role in SCs
This is where tRPC shines! When used in Server Components, tRPC allows you to call your backend procedures directly, without any HTTP overhead.
It's like importing a local function, but with end-to-end type safety guaranteed by tRPC and TypeScript.
Build a Server-Side Caller
To fetch data in Server Components, we need a special tRPC client that calls procedures directly, bypassing HTTP. This is often called a "server-side caller" or "server client."
It uses your tRPC router directly to ensure type safety without network overhead. Here's a simplified example:
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 })Fetching Data in an SC
Now, let's use our serverClient to fetch data directly within a Next.js Server Component. Notice how it looks just like calling a local function!
The data is fetched on the server before the component is rendered and sent to the client.
// 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 Data to Client Components
Server Components often fetch data, but UI interactions happen in Client Components. You can pass the fetched data as props from an SC to a CC.
Remember to mark client components with "use client" at the top.
// 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>
);
}Queries with Input Parameters
Just like regular tRPC queries, you can pass input parameters to your server-side tRPC calls. This is useful for fetching specific data based on URL parameters or other server-side logic.
// 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>
);
}Graceful Error Handling
Errors thrown by your tRPC procedures on the server will propagate up to the Server Component. You can use standard JavaScript try...catch blocks to handle them.
This ensures your application remains robust even if data fetching fails.
// 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 vs. CC Data Fetching
When should you use Server Components for data fetching versus Client Components (e.g., with React Query)?
- Server Components: Ideal for initial data, SEO, static/server-rendered content, and reducing client bundle size.
- Client Components: Best for interactive data, real-time updates, user-specific data after initial load, and mutations.
Often, you'll use a mix of both!
Server Component Data Fetch
Consider a Next.js App Router project using tRPC. You need to display a list of products on the initial page load, which should be fast and SEO-friendly.
Recap: SCs & tRPC
In this lesson, we explored fetching data directly within Next.js Server Components using tRPC.
- We learned to create a server-side tRPC caller.
- Fetched data directly in Server Components.
- Passed fetched data as props to Client Components.
- Handled query parameters and errors in SCs.
- Understood the distinction between SC and CC data fetching.
This approach combines tRPC's type safety with Server Components' performance benefits for robust and efficient data fetching.
常见问题解答
「服务器组件与 tRPC 数据获取」课时是免费的吗？
是的 — 「服务器组件与 tRPC 数据获取」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 tRPC End-to-End Type Safe APIs 课程的其余内容，请升级到 CoddyKit PRO。 tRPC End-to-End Type Safe APIs 课程共包含 4 节课。
「服务器组件与 tRPC 数据获取」这节课中我会学到什么？
理解如何在 Next.js 服务器组件中直接使用 tRPC 获取数据，以实现最佳性能。 你通过在浏览器中直接运行的动手代码来练习 tRPC End-to-End Type Safe APIs，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 tRPC End-to-End Type Safe APIs 需要有经验吗？
无需任何先前经验。CoddyKit 上的 tRPC End-to-End Type Safe APIs 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「服务器组件与 tRPC 数据获取」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 tRPC End-to-End Type Safe APIs 课中编写并运行代码吗？
能。每节 tRPC End-to-End Type Safe APIs 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 在 Next.js 应用路由器中使用 tRPC
- 高级 React Query 集成
- 服务器组件与 tRPC 数据获取
- 使用 tRPC 变更实现乐观更新