chungweileong•14mo 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

chungweileongOP•14mo 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.

Keep suspense on SSR

Did you find this page helpful?