Next.js Discord

Discord Forum

SSR Interactivity

Answered
hu2299 posted this in #help-forum
Open in Discord
Hi, I have component (currently CSR) within my Homepage that loads items based on the tab selected. What would be the best way to convert this to a SSR component to speed up loading times?

Currently on page load a default query is made to load items, and when a different tab is clicked a new query is made along with useeffect, states, buttons etc to load new items.

(What Im trying to achieve is to have the inital page load everything at once since the tab items load a couple seconds after the rest of the page)
Answered by hu2299
Ended up achieving this using server actions and cookies (tutorial: https://www.youtube.com/watch?v=O94ESaJtHtM&t=330s)
View full answer

2 Replies

American black bear
You can use getServerSideProps and fetch in that function all data you fetch on the page load. With that approch you will convert your page to SSR. But it wolud be better if you move all your data fetching in getServerSideProps function, to ensure best performance of this rendering pattern
Ended up achieving this using server actions and cookies (tutorial: https://www.youtube.com/watch?v=O94ESaJtHtM&t=330s)
Answer