How can I make the
episode render on the server?

what do you mean by that? Videos can be rendered on client only. The link can be sent on client side

for good SEO optimization

For better SEO, you can use og titles specific for each page: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image ( scroll down)

Sorry for the bad explanation, I'll try to explain more clearly

I want to make sure that the red block is client-side, when the button is pressed, links to videos with descriptions appear, links to videos are generated by pulling from the database, only those series with “series.season === selectedSeason” are pulled.


Since fetch can only be used in server components, and I need to pull data using fetch, I have to make the links server-side, and the buttons for selecting the season client-side, which should have a state depending on which the “selectedSeason” will be

And I can’t figure out how to do it correctly, it turns out that I need to do something like this

<ClientComponentForSeason>
<ServerComponentForEpisode/>
<ClientComponentForSeason/>

But how can I connect the selectedSeason state inside ServerComponentForEpisode to correctly select episodes?

Since fetch can only be used in server components

Fetch can be used in client components like in useEffect

Why are you putting a server component inside client component?

So you need a api route for that

so you are gonna have to create a /api/routeName/route.ts, and you'll need to send request there, and get the data

I didn’t know that you can use fetch in client components, I saw in the documentation that only in server components, but if you can use fetch in client components using useEffect(), then this simplifies everything. I also wanted the source code to have the episode number and its description to improve SEO, but it only adds the episodes of the first season, which are included when generating the page. It seems strange to me that when choosing the second season, in any case, the source code will only contain episodes from the first, do you think there is any point in correcting this? If so, could you suggest some ways?

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

Scroll down where you can generate og depending upon url

Sorry, that’s not what I meant, when generating the page, only the episodes of the first season are statistically rendered, as in the first screen, then I select the second season, there will be episodes of the second season, as in the second screen. But in the source code (3 screenshots) of the second season, the episodes of the first season will be displayed. I don't know if this needs to be fixed or left as is?

I will need to see a short part of the code for that, it should be just about how handle state changes and display

Its something like this now const [selectedSeason, setSelectedSeason] = useState(1) return ( /some code\ <div className='season'> <button key={1} onClick={() => setSelectedSeason(1)}>Серія 1</button> <button key={2} onClick={() => setSelectedSeason(2)}>Серія 2</button> </div> <div className='searchSeries'> <ul className='seriesList'> {buttonSeries.filter(series => series.season === selectedSeason) .map(series => ( <ButtonForSeries key={series.id} nameSeries={series.nameSeries} image={series.image} text={series.text} link={ /choose/${series.id}`}
/>
))}
</ul>
</div>

/some code\
);

In the source code of second season, the first season shouldn’t be there

Yes, I think so too, but it is there, I think it's due to statistical generation. Could you somehow help or advise me?

Are you viewing it using view source?

Yes

...

then it will appear

nothing wrong in that

oh, and will this have a normal effect on SEO?

Yes

Thanks a lot bro

Mark my message as a solution