TanStackT
TanStack14mo ago
41 replies
primary-violet

How to exclude a component/function/code from SSR?

We are using react-plotly, which throws the error "Uncaught ReferenceError: self is not defined" during SSR.

Is there any way to exclude a component from SSR?

I've tried an import() with Supsense, which fixes the "self is not defined" error, but create a Hydration mismatch.

Next solves this through a custom dynamic import with an ssr flag https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr or the "use client"; directive.

We also have configs, which need to initialize differently for Client and Server. This can be handled through setting those values within
client.tsx
or ssr.tsx. But I'm not sure how to solve this within a component.
Was this page helpful?