Is there a way to load more data in next.js by clicking on the Load More button? Currently, I am using getServerSideProps to fetch data from an API for this page.
Here is my page code:
export default function Posts({ posts, popular }) {
const classes = useStyles();
return (
<motion.main
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<InnerWrapper pbNone>
<Title title="Latest Post" subTitle />
</InnerWrapper>
<HeroSection data={posts} />
<InnerWrapper>
<Grid container spacing={3}>
<Grid item xs={12} sm={8}>
{posts.map(item => (
<HorizontalCard key={item.id} info={item} />
))}
<LoadMoreBtn />
</Grid>
<Grid item xs={12} sm={4}>
<div className={classes.marginBottom}>
<Title title={"Most Popular"} subTitle side={true} />
<SideList data={popular} />
</div>
<div className={classes.marginBottom}>
<SubscribeSide />
</div>
</Grid>
</Grid>
</InnerWrapper>
</motion.main>
);
}
export const getServerSideProps = async ({ query }) => {
// Fetch data from external API
const { data: posts } = await postLists(0);
const { data: popular } = await popularPost();
// Pass data to the page via props
return { props: { posts, popular } };
};