I am building a Next.js application where I have a single common audio file and multiple text components. Each text component corresponds to a specific timestamp in the audio file. The text components need to update their state to maintain isPlaying status, and they should highlight when the audio reaches their respective timestamps.

I am using useState to manage the isPlaying state for each text component, which makes them client components declared with use client;.

My concern is that making these components client-side will impact SEO, as search engines might not index the text content properly.

In addition to highlighting text, there are other scenarios where I need to use hooks, necessitating the use of client components.

How can I ensure that my webpage ranks well in search engines while maintaining the required client-side functionality for synchronizing text with the audio?