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?

tRPC•3y ago•

2 replies

chungweileong

Keep suspense on SSR

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?

Keep suspense on SSR

Similar Threads

Keep suspense on SSR

Similar Threads

Similar Threads

Similar Threads