T3 StackでSSRさせてみる - wheatandcatの開発ブログ

前回紹介したwebアプリでT3 Stackでwebサービスを作成中。

www.wheatandcat.me

T3 StackでSSRを実装を試していたら、かなり簡単に実装できることに気づいたので記事化。

PR

実装

T3 StackでSSRする場合にどうすれば良いか分からなかったので初めはNext.jsでの実装と同様にgetServerSidePropsを使用して実装しようとしてみたが以下のtRPCのドキュメントを読んでSSRの場合は、getServerSidePropsを書かなくても実装できることが判明。

trpc.io

単純にcreateTRPCNextのオプションにssr: trueを設定するのみでOKだった。

■src/utils/api.ts

export const api = createTRPCNext<AppRouter>({
  ...(略)
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: true, // ← 変更する
});

上記を実装することサーバーサイド側でtRPCの通信ができるようになります。
ただOOMAKAでssr=trueで以下の箇所でサーバサイド通信で無限ループが発生してしまうケースがあったので、そういう場合は個別にtrpcの通信側でssr:falseに設定することも可能。

■src/features/schedules/components/Items.tsx

  const schedules = api.schedule.fetchInPeriod.useQuery(
    {
      urlId: props.urlId,
      startDate: props.date.toDate(),
      endDate: props.date.endOf("month").toDate(),
    },
    {
      trpc: {
        ssr: false, // ← 変更する
      },
    }
  );

上記の修正でOOMAKAでもSSRができるようになった。
ちなみ、認証情報に関しては以下の参考に実装でSSRが可能。

NextAuth.js • Create T3 App

コードは以下のようになった。

■ src/pages/index.tsx

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const session = await getServerAuthSession(ctx);
  return {
    props: { session },
  };
};

function Home() {
  const { data: sessionData } = useSession();

Next.jsだけでもSSRはかなり簡単に実装できる印象だったが、T3 Stackはそれよりもさらに簡単に実装ができるようになっていて素晴らしい 🎉