As your blog grows, you need a function like “Load more” or even “Infinite scroll” so that your visitors can easily access all the valuable content. In this story, I will focus on that and show you how easy it is to implement such functionality with Next.js 14, Server Actions (to move the heavy lifting to the server), and Contentful as the underlying CMS, where we have all our data.
Here is the GitHub repo with the full code.
Here is the link to the final result, so you can already spoil it ;-)
https://nextjs14-azureb2c-prisma.vercel.app/
New NPM Package
Let’s install the new "react-intersection-observer" NPM package, which we need for the infinite scroll.
New Next.js 14 Server Action for fetching posts
Now, I create a new folder under “src/actions” and a new file, “getPosts.ts”
As you can see, we use the “use server” directive, which tells Next to execute it only on the server.
Server Actions briefly explained
Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.
Having these special functions that only run on the server means that developers can offload responsibilities like data fetching and mutations to them, avoiding the vulnerabilities and security concerns of fetching and mutating data from the client.
Contentful GraphQL- Introducing Offset with Skip Parameter
Next, I adapt the underlying graphql file for the “posts” data fetch from Contentful. I added the “skip” variable so that we can work with an offset during the data fetch.
Changing Logic for page.tsx files
The next file to adapt is the page.tsx under “src/app/[locale]” because we have
On line 154, we introduce the “skip” parameter, and in the last section of the file, we have to pass two new parameters (slug and locale) to our “ArticleTileGrid” component.
Slug is needed to exclude the BlogPosts in the Hero section of the page so that we don’t show it twice, and a locale is needed to handle the multilanguage part.
ArticleTileGrid - Where the logic resides
Last but not least, we adapt the “ArticleTileGrid” component, where most of the magic happens.
In this component, you can decide whether to use the “Load more” button or the “Infinite Scroll” method.
Cloudapp-dev, and before you leave us
Thank you for reading until the end. Before you go:
