Hydrating dynamic table with app router server side
Answered
Sokoke posted this in #help-forum
SokokeOP
Hello, I'm very new to NextJS. With the Pages router I am able to hydrate a dynamic table with
getServerSideProps on initial load (the data is visible in View Page Source). As I scroll, more data is loaded dynamically, etc. I'm trying to do the equivalent with the App router, but when I throw use client on the component (it won't work otherwise), I no longer see the data in the page source on initial load. This kills the SEO on that data. What's the equivalent way to do it with the App router?Answered by aardani
the client component should be able to display the intial state of the component and have it hydrated by client-side side effects such as paginations
7 Replies
@Sokoke Hello, I'm very new to NextJS. With the Pages router I am able to hydrate a dynamic table with `getServerSideProps` on initial load (the data is visible in View Page Source). As I scroll, more data is loaded dynamically, etc. I'm trying to do the equivalent with the App router, but when I throw `use client` on the component (it won't work otherwise), I no longer see the data in the page source on initial load. This kills the SEO on that data. What's the equivalent way to do it with the App router?
prefetching the first few items on the server then passing it to client component
the client component should be able to display the intial state of the component and have it hydrated by client-side side effects such as paginations
Answer
SokokeOP
Ok so for anyone else with this problem (because it's not super intuitive...): I had to wrap my previous table as a
use client component with a server component that does the initial fetch (i.e. getServerSideProps and then just pass those results as "initial props" down to the client componentwait app router doesn't have getServerSideProps
SokokeOP
no, just replace it with some other function
but it is serving the same purpose
aight