trying to fetch more data on server rendered page.
Answered
English Springer Spaniel posted this in #help-forum
English Springer SpanielOP
When i want to render products page i prefer server side rendering than client side rendering for seo.
But after rendering server side page im facing problem on how i should fetch more products in that single page.
In typical expressjs application i would write some vanila JavaScript which will fetch the data from api and append it with existing product items by directly editing DOM elements.
It can be done in the nextjs in same way. But I'm wondering if there's more efficient method than this.
Most online resources I found uses client side component or use dynamic route.
But after rendering server side page im facing problem on how i should fetch more products in that single page.
In typical expressjs application i would write some vanila JavaScript which will fetch the data from api and append it with existing product items by directly editing DOM elements.
It can be done in the nextjs in same way. But I'm wondering if there's more efficient method than this.
Most online resources I found uses client side component or use dynamic route.
Answered by B33fb0n3
you can use a combination of both: SSR the initial products to have good SEO and fetch more via the client. It could look something like this (pseudocode):
const [someState, setSomeState] = useState(initialSSRData);
const fetchMore = () => {
const more = await getMoreViaServerActionOrApiRoute(maybeSomeOffsetThatIsUndefinedRightNow);
setSomeState(prev => [...prev, ...more]); // depending on your data.
}
return // render someState Data6 Replies
you can use a combination of both: SSR the initial products to have good SEO and fetch more via the client. It could look something like this (pseudocode):
const [someState, setSomeState] = useState(initialSSRData);
const fetchMore = () => {
const more = await getMoreViaServerActionOrApiRoute(maybeSomeOffsetThatIsUndefinedRightNow);
setSomeState(prev => [...prev, ...more]); // depending on your data.
}
return // render someState DataAnswer
Asian black bear
Or even easier keep things SSR with an optional search param such as
limit and on click on the client increase it and refresh.It's not applicable all the time, but certainly possible in some cases.
@English Springer Spanielsolved?
English Springer SpanielOP
Yes thank you for your help. Do I have to do anything else?
No nothing else is needed. Just wanted to need any more help with your issue