tRPC End-to-End Type Safe APIs · レッスン

サーバーコンポーネントとtRPCによるデータ取得

tRPCを使ってNext.jsのサーバーコンポーネント内で直接データを取得し、最適なパフォーマンスを実現する方法を理解します。

「サーバーコンポーネントとtRPCによるデータ取得」はCoddyKit上の無料tRPC End-to-End Type Safe APIsレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応の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によるデータ取得」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、tRPC End-to-End Type Safe APIsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 tRPC End-to-End Type Safe APIsコースには全4レッスンが含まれています。

「サーバーコンポーネントとtRPCによるデータ取得」で何を学びますか？

tRPCを使ってNext.jsのサーバーコンポーネント内で直接データを取得し、最適なパフォーマンスを実現する方法を理解します。ブラウザで直接実行するハンズオンコードでtRPC End-to-End Type Safe APIsを演習し、24時間対応の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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← tRPC End-to-End Type Safe APIsに戻る