SSR fallback component
Unanswered
Brown bear posted this in #help-forum
Brown bearOP
Hi there, I am trying to add a component from
Still resulting in
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
the only way for client comps to have SEO is for it to have initial state that already has the data/text
if you need a fallback, id suggest creating a client comp to detect if its mounted.
if not, show an initial data with no animation (?) perhaps
otherwise if yes, then show <TypeAnimation />
if not, show an initial data with no animation (?) perhaps
otherwise if yes, then show <TypeAnimation />