chungweileong•8mo ago

Keep suspense on SSR

I'm currently trying to perform a trpc query in Nextjs with React suspense, however, I only want the the query to be run on client-side only. Here are the options that I already tried: - Throw error while in SSR with a custom link. It works, but I will get a bunch of errors in my Sentry ☹️

const ssrLink: TRPCLink<AppRouter> = () => {
  return () => {
    return observable((observer) => {
      observer.error(new TRPCClientError('PURPOSELY DISABLE TRPC IN SSR'));
    });
  };
};

const ssrLink: TRPCLink<AppRouter> = () => {
  return () => {
    return observable((observer) => {
      observer.error(new TRPCClientError('PURPOSELY DISABLE TRPC IN SSR'));
    });
  };
};

- Throw promise in my component while in SSR.

export function MyComponent() {
  // This will prevent the query from running in SSR, and avoiding any hydration mismatch errors
  if (typeof window === 'undefined') throw Promise.resolve('Suspense in SSR');

  const [data] = api.dashboard.getStats.useSuspenseQuery();

  return <>...</>
}

export function MyComponent() {
  // This will prevent the query from running in SSR, and avoiding any hydration mismatch errors
  if (typeof window === 'undefined') throw Promise.resolve('Suspense in SSR');

  const [data] = api.dashboard.getStats.useSuspenseQuery();

  return <>...</>
}

Throwing promise works really good in my case, but I'm wondering if I can throw it in TRPC link instead?

1 Reply

chungweileong•8mo ago

In case you wondering, I also tried using next/dynamic to load the component without SSR, however, it doesn't work with React suspense, meaning the suspense fallback will not be shown at all.