Server-Side Rendering

The only thing you need to do to get SSR on your application is to set ssr: true in your _app.tsx, but it comes with some additional considerations.

In order to execute queries properly during the server-side render step and customize caching behavior, we might want to add some extra logic inside our _app.tsx:

pages/_app.tsx

  1. import React from 'react';
  2. import { withTRPC } from '@trpc/next';
  3. import { AppType } from 'next/dist/shared/lib/utils';
  4. import superjson from 'superjson';
  5. import type { AppRouter } from './api/trpc/[trpc]';
  7. const MyApp: AppType = ({ Component, pageProps }) => {
  8.   return <Component {...pageProps} />;
  9. };
  11. export default withTRPC<AppRouter>({
  12.   config({ ctx }) {
  13.     if (typeof window !== 'undefined') {
  14.       // during client requests
  15.       return {
  16.         transformer: superjson, // optional - adds superjson serialization
  17.         url: '/api/trpc',
  18.       };
  19.     }
  20.     // during SSR below
  22.     // optional: use SSG-caching for each rendered page (see caching section for more details)
  23.     const ONE_DAY_SECONDS = 60 * 60 * 24;
  24.     ctx?.res?.setHeader(
  25.       'Cache-Control',
  26.       `s-maxage=1, stale-while-revalidate=${ONE_DAY_SECONDS}`,
  27.     );
  29.     // The server needs to know your app's full url
  30.     // On render.com you can use `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}/api/trpc`
  31.     const url = process.env.VERCEL_URL
  32.       ? `https://${process.env.VERCEL_URL}/api/trpc`
  33.       : 'http://localhost:3000/api/trpc';
  35.     return {
  36.       transformer: superjson, // optional - adds superjson serialization
  37.       url,
  38.       headers: {
  39.         // optional - inform server that it's an ssr request
  40.         'x-ssr': '1',
  41.       },
  42.     };
  43.   },
  44.   ssr: true,
  45. })(MyApp);

Caveats

When you enable SSR, tRPC will use getInitialProps to prefetch all queries on the server. That causes problems like this when you use getServerSideProps in a page and solving it is out of our hands. Though, you can use SSG Helpers to prefetch queries in getStaticSiteProps or getServerSideProps.