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.25 Replies
optimistic-gold•9mo ago
you can exclude a full route from SSR via route option
ssr: false
this uses an internal helper we could expose so you can apply it for single componentsextended-salmonOP•9mo ago
Thanks for you input! Didn't know
ssr: false within createFileRoute yet, awesome! Moving this to a component level would be quite nice. Should I create an issue for that?
Does Vite/TanStackStart do anything by itself to figure if a component can't be SSRed? So could the library change anything, to make this visible, it can't be SSRed?optimistic-gold•9mo ago
sure create an issue for exposing this
no,i don't think this can be detected automatically
by "making it visible" , do you man at build time ?
extended-salmonOP•9mo ago
Yes, I was thinking if Vite scans fors stuff like
window or self and then disables SSR on that code part. But I've really not much clue about SSR, was just kinda expecting it works like this 😆 .optimistic-gold•9mo ago
there could be a lot of conditional logic going on with values only known at runtime
so I don't think this is feasible
equal-aqua•7mo ago
@Manuel Schiller - i am having issues with this on Netlify. I've got a minimal reproduction here: https://github.com/ZooHillData/start-basic. It's deployed to netlify here: http://start-basic.netlify.app/test-plotly
equal-aqua•7mo ago
The error I'm getting on netlify is:
equal-aqua•7mo ago
As you can see here i do set the ssr: false flag: https://github.com/ZooHillData/start-basic/blob/main/app/routes/test-plotly.tsx#L6
GitHub
start-basic/app/routes/test-plotly.tsx at main · ZooHillData/start-...
Contribute to ZooHillData/start-basic development by creating an account on GitHub.
equal-aqua•7mo ago
let me know if you want me to create an issue or something else..
genetic-orange•7mo ago
for a react component i have this wrapper:
function NoSSR({ children }: Readonly<{ children: React.ReactNode }>) {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
return <>{isClient ? children : null}</>;
}
and any children inside of it won't be rendered on the server side. useful for preventing hydration errors as well
equal-aqua•7mo ago
Thanks for this, @matthewsomethin . i will try this. cursor recommended this, but figured the intention was for the library to take care of this with
ssr: falsegenetic-orange•7mo ago
that would run it for a whole route, but it could still be useful to ssr certain most of the page while excluding a certain subtree of react components with a component like that
equal-aqua•7mo ago
absolutely
I think the problem is actually deeper than this... i tried adding this and it didn't work. it's related to importing plotly, not rendering. any route fails, even the route that doesn't have the plotly piece.
i am still having the same problem.
will try deploying on vercel
this does work on vercel... but it works on vercel even without the
ssr: true which is interesting. i do have tsr.autoCodeSplitting: true set. i didn't try without this.
at this point, i'm moving my start apps to vercel. we love tanstack start and the netlify integration has been suboptimal ( b/c of less users ? ). we were already interested in vercel as a more developer-friendly platform, better UX/CLI, etc, so..optimistic-gold•7mo ago
what's not working on netlify?
equal-aqua•7mo ago
Trying to deploy Plotly to Netlify using Tanstack Start. The app doesn't even start up.
See here: https://start-basic.netlify.app/test-plotly
and here: https://start-basic-gray.vercel.app/test-plotly
TanStack Start | Type-Safe, Client-First, Full-Stack React Framework
TanStack Start is a type-safe, client-first, full-stack React framework.
equal-aqua•7mo ago
first is Netlify, 2nd is vercel. It's exactly the same code. works on Vercel, fails on Netlify. here's the repo: https://github.com/ZooHillData/start-basic
equal-aqua•7mo ago
the error on Netlify is this:
equal-aqua•7mo ago
not really sure if this is a problem with start, vinxi or something wrong with my netlify configuration.
optimistic-gold•7mo ago
can you run this locally with the same errors?
equal-aqua•7mo ago
no errors locally
if i use the ssr: false flag
optimistic-gold•7mo ago
but how do you run locally
in the same runtime as netlify?
equal-aqua•7mo ago
ah locally i'm actually using the standard node preset
i didn't test locally with netlify CLI
i can create a bug with this info or just leave it for now. like i mentioned, for the time being, i'm going to move to vercel. i want to use tanstack start while in beta but it's too much waste to deal with the netlify issues on top of the instability of beta.
optimistic-gold•7mo ago
a github issue would definitely help to track these kind of issues
ideally you can also provide instructions how to run locally with the netlify runtime
equal-aqua•7mo ago
ok i'll do my best. thanks for your help.
would this be under router?
i see now nvm
equal-aqua•7mo ago
here's the issue. https://github.com/TanStack/router/issues/3494
I haven't added the local netlify repro steps yet, but wanted to make sure i got the issue logged and didn't make that a blocker to submitting.
not sure when / if i'll be able to add the netlify local repro steps since i don't use local netlify environment much
GitHub
Netlify deployment issue with react-plotly.js · Issue #3494 · TanSt...
Which project does this relate to? Start Describe the bug When I deploy a Start app with react-plotly.js / plotly.js to Netlify, the app fails with the following: The function logs from Netlify sho...