T
tRPC

❓-help

Keep suspense on SSR

Cchungweileong12/18/2023
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?
Cchungweileong12/18/2023
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.

Looking for more? Join the community!