Detecting device type (i.e mobile, desktop or tablet on initial render in static pages)

[raghav0622]

It is possible to parse request headers in app.getInitialProps to detect device type but it makes all pages ssr which is pitfall.
I want device-specific layout (possible with ssr), also possible with static gneration but there are certain animations and styles that render on first render and then client-side code kicks in and renders again which is bad for module splitting and ux.
Any Ideas?

[brianlovin]

You could detect if the animation has run already when the component mounts and prevent it from replaying on the client. Something like https://joshwcomeau.com/snippets/react-hooks/use-has-mounted is a nice reusable hook for telling when a component has mounted, and you can use the output to determine if an animation should run.

[raghav0622]

tried that logic but still the animation happense again after clientside hydration. i am using react-spring for animations and sass and tailwind for styling.