Nextjs useGSAP errors on use of useRef

[zowber]

The page https://gsap.com/resources/React/ states that can be used within a Nextjs SSR component with...

However my application errors out when attempting to use useGSAP...

Is the documentation wrong or am I missing something here?

[joevingracien]

If you're using the app router / react server components, you need to drop a "use client" at the top of your file for useGSAP() to work

[Amyx000]

@zowber It is not possible to useGsap in SSR environment, as it a hook and which work only in client component. That's when browser load html, javascript file.

@jackdoyle I think the statement is misleading on SSR section.

[jackdoyle]

Thanks for the note, @Amyx000 - I'm curious what you'd suggest as an improvement in the docs. What do you think would be more accurate? We want folks to know that it's okay to use GSAP in tools like Next.js and we're doing things under the hood to avoid issues as much as possible, but of course JavaScript that targets DOM elements (and things like that) couldn't possibly be expected to work on the server side when there's no client rendering.

[Amyx000]

@jackdoyle, as we know, in Next.js, we have two environments: client-side and server-side rendering. By default, each component is server-side rendered (SSR). So, when using useGSAP or any hook, Next.js will throw an error if the hook is used in an SSR component.

For useGSAP, React hooks are being used https://github.com/greensock/react/blob/main/src/index.js#L11, which causes Next.js to throw an error when used in SSR components.

"use client" directive must be added at the top of a component in a Next.js application to make it a client-side component and not a server-side component.

The documentation states:

This hook is safe to use in Next.js or other server-side rendering environments.

It implies the hook will work in Next.js SSR components, which is false.

It will work in a client component (Client rendering) in Next.js but not in a server component (Server rendering).

Instead we can write something like:

"This hook is safe to use in Next.js and other server-side rendering frameworks, provided it is used in client-side components."