无需SSR时，如何用tRPC实现类似getInitialProps的渲染行为？

核心逻辑 #

要复刻getInitialProps的「首屏服务端渲染、路由切换客户端渲染」效果，核心是区分服务端/客户端的数据获取时机：首屏请求时在服务端通过tRPC拉取数据并注入页面，站内导航时在客户端用tRPC异步加载数据，既满足SEO需求，又保证导航体验。

实现步骤（Pages Router） #

1. 服务端预取数据（首屏SSR） #

在页面的getInitialProps中初始化tRPC服务端客户端，调用查询接口获取文章数据，将其作为props传递给页面组件：

// pages/posts/[slug].tsx
import { trpc } from '../utils/trpc';

export const getInitialProps = async (ctx) => {
  const { slug } = ctx.query;
  // 创建tRPC服务端实例，传入请求上下文
  const serverTrpc = trpc.createServerClient(ctx);
  
  // 服务端调用接口获取文章
  const post = await serverTrpc.post.get.query({ slug });
  
  return { post };
};

const PostPage = ({ post }) => {
  // 客户端用useQuery，传入服务端预取的初始数据，避免重复请求
  const { data: clientPost } = trpc.post.get.useQuery(
    { slug: post.slug },
    { initialData: post }
  );

  const currentPost = clientPost || post;

  return (
    <article>
      <h1>{currentPost.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: currentPost.content }} />
    </article>
  );
};

export default PostPage;

2. 客户端导航动态加载 #

当用户通过站内链接（如next/link）跳转至文章页时，Next.js会触发客户端路由切换，此时getInitialProps不会执行，组件内的useQuery会直接在客户端发起异步请求，动态加载文章内容，无需等待服务端渲染。

替代方案（App Router） #

如果使用Next.js App Router，可通过服务端组件+客户端组件的组合实现：

// app/posts/[slug]/page.tsx
import { trpc } from '@/utils/trpc';
import PostClient from './PostClient';

// 服务端组件：首屏时服务端渲染，直接调用tRPC获取数据
export default async function PostPage({ params }) {
  const { slug } = params;
  const post = await trpc.post.get.query({ slug });

  // 将预取数据传递给客户端组件
  return <PostClient initialPost={post} slug={slug} />;
}

// app/posts/[slug]/PostClient.tsx
'use client';

import { trpc } from '@/utils/trpc';

export default function PostClient({ initialPost, slug }) {
  // 客户端用useQuery复用初始数据，导航时自动异步更新
  const { data: post } = trpc.post.get.useQuery(
    { slug },
    { initialData: initialPost }
  );

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

关键注意点 #

• 服务端预取的数据要通过initialData传递给客户端useQuery，避免首屏后重复请求相同数据
• 确保tRPC客户端配置正确，服务端实例能获取到请求上下文（如Cookie、Headers）
• 该方案完全基于tRPC和Next.js的原生能力，无需依赖额外工具

内容的提问来源于stack exchange，提问作者nehalist