❓ Question about combining Server Components and client-side interactivity for SEO-friendly
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
Hi everyone! 👋
I have a company detail page built with the App Router. I want to make the company profile card a Server Component to improve SEO (e.g. have the description content in the initial HTML).
However, the description text can be very long, so I want to add a “read more / collapse” toggle using useState. But if I add that interactivity directly to the component, it has to become a Client Component, which defeats the purpose of SSR and hurts SEO.
What’s the best practice for this case?
I have a company detail page built with the App Router. I want to make the company profile card a Server Component to improve SEO (e.g. have the description content in the initial HTML).
However, the description text can be very long, so I want to add a “read more / collapse” toggle using useState. But if I add that interactivity directly to the component, it has to become a Client Component, which defeats the purpose of SSR and hurts SEO.
What’s the best practice for this case?
2 Replies
American black bear
you can render entire description and use css clamp to have it only show first 3 lines for example. this way you have entire text rendered on server. then you create a client component with state for client to show more, which conditionally updates the css to remove the clamp and show entire text.
Asian black bearOP
Thank you very much for your suggestion, I will try it!