SSR: useRef only works in Client Components

[sstackus]

Hey,

This doesn't seem to be working with SSR in Next.js v13.

Error: useRef only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

The workaround is to create a wrapper component with the following:

'use client';
export * from 'react-type-animation';

but it's less than ideal.

[maxeth]

Hi,

where exactly does that useRef come from? Could you paste a snippet of your code?

[sstackus]

I mean you have useRef in src\hooks\useEffectOnce.tsx:4-7 and src\hooks\useForwardRef.tsx:4. Simply importing react-type-animation into an SSR app breaks it:

import {TypeAnimation} from 'react-type-animation';
//...
return <TypeAnimation sequence={['aa', 50]} />

By using the preRenderFirstString prop, you can initially (pre-)render the very first string of your sequence. When used with SSR (Next.js or similar), the initial string will be included in the static HTML, which may benefit SEO. - https://react-type-animation.netlify.app/examples#initially-pre-rendered

preRenderFirstString doesn't seem to help this case either.

[maxeth]

@sstackus

Right, missed that one.

I have very little experience with Next 13 server components so I'm not sure if or what we can do here, but isn't that just a technical limitation of server components, in which case you simply gotta wrap it in a component with "use client" as you suggested already?

I mean it's impossible for this component to work without any client-side js, meaning it's supposed to be a client component, right?