Avoid data fetching in client component
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
I am implementing a 'Load More Articles' feature in Next.js using a CMS API. I want to achieve this without using client components and need a solution to check if more articles are available. What would be the best approach?
Answered by B33fb0n3
the already loaded data need to be in a state somewhere. And the server has only a few states like url, cookies, ... You are looking for "the best approach" and I and many others as well would recommend you to still use client component to hold the loaded data and use a server action (or api endpoint) to load more data.
If you still don't want to use client components, use can use the url. Enter the number of the loaded amount. In the beginning the number is for example
Keep in mind, that this need a lot of resources, because the first 10 articles are fetched again, even if they don't need to.
So please: Use client components
If you still don't want to use client components, use can use the url. Enter the number of the loaded amount. In the beginning the number is for example
/path?q=10. So the first 10 articles are loaded. When you now click on the button "Load More Articles" the user will be redirected to /path?q=20. Now you can see, that the first 20 articles are loaded. Keep in mind, that this need a lot of resources, because the first 10 articles are fetched again, even if they don't need to.
So please: Use client components
3 Replies
the already loaded data need to be in a state somewhere. And the server has only a few states like url, cookies, ... You are looking for "the best approach" and I and many others as well would recommend you to still use client component to hold the loaded data and use a server action (or api endpoint) to load more data.
If you still don't want to use client components, use can use the url. Enter the number of the loaded amount. In the beginning the number is for example
Keep in mind, that this need a lot of resources, because the first 10 articles are fetched again, even if they don't need to.
So please: Use client components
If you still don't want to use client components, use can use the url. Enter the number of the loaded amount. In the beginning the number is for example
/path?q=10. So the first 10 articles are loaded. When you now click on the button "Load More Articles" the user will be redirected to /path?q=20. Now you can see, that the first 20 articles are loaded. Keep in mind, that this need a lot of resources, because the first 10 articles are fetched again, even if they don't need to.
So please: Use client components
Answer
Asian black bearOP
okey , thanks for help!
sure thing