How can i set `ontouchstart=""` attribute to html element on server in nextjs?
Answered
Nebelung posted this in #help-forum
NebelungOP
Third-party library sets this attribute on first render on client and it causes hydration errors. I want to set it on server side so they would match
Answered by B33fb0n3
imagine it would be possible (appart from what you said here: https://nextjs-forum.com/post/1313889801510060124#message-1313890820046458901) and the client now set's it to a different value, then what happens: hydration error. So it wouldn't resolve your hydration error when you just set it.
Import your client component with disabled SSR and you are good to go:
Import your client component with disabled SSR and you are good to go:
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })24 Replies
@Nebelung Third-party library sets this attribute on first render on client and it causes hydration errors. I want to set it on server side so they would match
you can set it by adding it directly to your element like:
<div onTouchStart={() => {}}/>@B33fb0n3 you can set it by adding it directly to your element like:
tsx
<div onTouchStart={() => {}}/>
NebelungOP
This value is not the same as
"". It produces different HTML@Nebelung This value is not the same as `""`. It produces different HTML
then set it to:
<div onTouchStart=""/>Btw this wouldn't resolve your issue
@B33fb0n3 then set it to:
<div onTouchStart=""/>
NebelungOP
And this is not valid react code and produces errors on render about mismatched types
@B33fb0n3 Btw this wouldn't resolve your issue
NebelungOP
Why though?
@Nebelung Why though?
imagine it would be possible (appart from what you said here: https://nextjs-forum.com/post/1313889801510060124#message-1313890820046458901) and the client now set's it to a different value, then what happens: hydration error. So it wouldn't resolve your hydration error when you just set it.
Import your client component with disabled SSR and you are good to go:
Import your client component with disabled SSR and you are good to go:
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })Answer
happy to help
@B33fb0n3 happy to help
NebelungOP
But what if i pass children to this component with SSR false? Will they also have ssr disabled for them?
@Nebelung But what if i pass children to this component with SSR false? Will they also have ssr disabled for them?
that will also disabled them from beeing loaded as SSR
@B33fb0n3 that will also disabled them from beeing loaded as SSR
NebelungOP
That's a problem :|
NebelungOP
This component is a provider that basically wraps my whole app 
@B33fb0n3 then set it to:
<div onTouchStart=""/>
NebelungOP
Well is there any way to really do this for now?
Or is it just not possible to produce such HTML on server with nextjs
it is possible. I just tried to use it like I said and of course there is an typescript error, but the html renders fine. However: I think nextjs itself will strip all props from html element that are "invalid". So maybe the event itself won't be there.
What are you trying to do? You said it's a provider? Give us a little context and maybe I can give you some experience
@B33fb0n3 What are you trying to do? You said it's a provider? Give us a little context and maybe I can give you some experience
NebelungOP
I have a provider from this library wrapping my app (
https://www.npmjs.com/package/@tonconnect/ui-react
TonConnectUIProvider). It has in it's internal logic some usEffect that does thishttps://www.npmjs.com/package/@tonconnect/ui-react
So i have to either match what it does in my server rendered html, disable SSR for it and all of it's children (not considering that) or patch the library
Third option seems like the best one although i'm not sure if removing
ontouchstart="" wouldn't break anything. And if it does we come right back to the problem that i have no idea how to set such an attribute to the body properly in nextjs.@B33fb0n3 you can set it by adding it directly to your element like:
tsx
<div onTouchStart={() => {}}/>
NebelungOP
This is what i get when trying to pass it an empty function
hm ok. Can you extract only this single div into it's own component?