Next.js Discord

Discord Forum

SSR fallback component

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
Hi there, I am trying to add a component from react-type-animation to animate my headline. Though Nextjs wants me to add use client to this component. I don't want to render nothing on server side though as these are SEO critical headlines. Instead it would be awesome to define a fallback component on the server side. Is that possible? I tried to achieve it using next/dynamic but that doesn't seem to work.

import dynamic from "next/dynamic";
const TypeAnimation = dynamic(
  () => import("react-type-animation").then((mod) => mod.TypeAnimation),
  {
    ssr: false,
  }
);

//...

                <Suspense fallback={headlines[0]}>
                  <TypeAnimation
                    sequence={headlines}
                    wrapper="span"
                    speed={50}
                    repeat={Infinity}
                  />
                </Suspense>


Still resulting in Error: useRef only works in Client Components. Add the "use client" directive at the top of the file to use it..

3 Replies