The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Engineering

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

## Introduction
Pagination and infinite scrolling significantly improve the user experience of web applications by allowing developers to load large datasets.

Astro.js and Strapi are two powerful tools that developers often use in tandem to create dynamic and efficient web applications.

In this article, you will learn how to enable pagination and infinite scrolling in your Astro.js application using [Strapi 5](https://strapi.io/blog/the-strapi-5-release-candidate-is-here).

## Overview of Astro.js and Strapi
Astro.js is a JavaScript framework for building modern, fast, scalable web applications. It provides developers with a clean and organized structure for their code, making it easier to manage and maintain complex projects. Astro.js offers various features and utilities, including routing, state management, and component-based architecture, making it a popular choice among developers for front-end development.

[Strapi](https://strapi.io/), on the other hand, is an open-source headless CMS (Content Management System) built with Node.js. It allows developers to quickly and easily create API-driven content management systems. Strapi provides a flexible and customizable content management interface and powerful APIs for managing content, making it an ideal choice for building dynamic web applications.

## Importance of Pagination and Infinite Scrolling
Pagination is a technique that helps users work with a large amount of data by dividing it into smaller chunks or pages. It enhances the general user experience by limiting the amount of data loaded at a given time, improving its speed and the time it takes to load.

Infinite scrolling is when content loads as the user scrolls down the page without clicking buttons or links for page navigation. It gives a smooth and engaging browsing experience by loading new content as the user reaches the end of the content displayed. Infinite scrolling is especially effective in applications that contain a massive amount of content and whose volume increases constantly, such as social networks or news portals.

## Prerequisites
You will need the following to get started:

- [Node.js v18](https://nodejs.org/en) or later.
- A code editor on your computer.
- [Python](https://www.python.org/downloads/)

## Create a Strapi CMS Project
To get started, create a new Strapi 5 backend project by running the command below:

```
npx create-strapi-app@rc my-project --quickstart
```

The above command will scaffold a new Strapi Node.js project and install the required dependencies.

Now, fill out the forms to create your administrator user account.

## Create a New Astro App
Next, create a new Astro application by running the command below:
```
npm create astro@latest
```

The above command will prompt you to select where you want to create your new project. Press the **ESC** key to use the default. Start your project with the **Empty** template, select no write in Javascript, install dependency, and initialize the new git repository. Overall, your selection should look like the screenshot below:

![create astro app.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/create_astro_app_35b8b83514.png)

## Creating Strapi Collection Type
To demonstrate how pagination and infinite scrolling work, create a new **Article** collection, add some entries, and publish them so that the API for your content can be consumed.

The **Article** collection will have the following data types:

- `title`: The article's title
- `description`: The article's description
- `content`: The article's content


![strapi article collection.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_article_collection_91fb89c00d.png)

## Configure Strapi Collection Type API
To access your Astro application's **Article** collection API, navigate to **Settings > Roles > Public** and select the **Article** collection. In the permissions tab, check to select all to give the public read, write, update, and delete access.


![configure strapi collection api.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/configure_strapi_collection_api_368a9c8236.png)

## Connecting Astro.js with Strapi CMS
Now, let's connect your Strapi CMS with your Astro app. First, update your `astro.config.mjs` configuration with the code:

```javascript
import { defineConfig } from 'astro/config';

export default defineConfig({
  env: {
    STRAPI_API_URL: process.env.STRAPI_API_URL,
  },
  output: 'hybrid'
});
```
This configuration:

- Sets up an environment variable `STRAPI_API_URL` environment variables.
- Specifies the output as "hybrid", indicating that the project will use a hybrid approach combining static and server-rendered content.

Then add `STRAPI_API_URL` variable to your `.env` file:

```bash
STRAPI_API_URL=http://localhost:1337
```

## Adding sample data for demonstration

With the collection type and Astro configurations created to connect with your Astro app, let's load some sample data to the Articles collection. Create a `populate-strapi.js` file and add the code:

```javascript
import axios from "axios";

const STRAPI_URL = "http://localhost:1337";

async function populateArticles() {
  try {
    const { data: posts } = await axios.get(
      "https://jsonplaceholder.typicode.com/posts"
    );
    for (const post of posts) {
      await axios.post(
        `${STRAPI_URL}/api/articles`,
        {
          data: {
            title: post.title,
            content: post.body,
          },
        },
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      console.log(`Created article: ${post.title}`);
    }

    console.log("All articles created successfully!");
  } catch (error) {
    console.error("Error:", error.response?.data || error.message);
  }
}

populateArticles();
```

Here, we defined a `populateArticles()` to fetch sample data from [jsonplaceholder](https://jsonplaceholder.typicode.com) and send a **POST** request to Strapi CMS to save them in the **Article** collection.

Run the command below the code in the `populateArticles` function:

```bash
node populate-strapi.js
```

If everything works as expected, you should see `All articles created successfully!` printed on your terminal.

## Implement Pagination in Astro.js
Now that you've loaded some sample data on your **Article** collection let's fetch paginated data from Strapi. Create a new `pagination.astro` file in the `pages` directory. Then, add the code below to configure the Javascript fetch API to fetch data from your Strapi CMS.

```javascript
---
import "../styles/articles.css";

export const prerender = false;
const currentPath = Astro.url.pathname;
const page = parseInt(Astro.url.searchParams.get("page") || "1");
const pageSize = 6;

const fetchArticles = async (page, pageSize) => {
  const response = await fetch(
    `${import.meta.env.STRAPI_API_URL}/api/articles?pagination[page]=${page}&pagination[pageSize]=${pageSize}&populate=*`
  );
  const data = await response.json();
  return data;
};

const { data: articles, meta } = await fetchArticles(page, pageSize);
---
```
The above code will:
- Set `prerender` to `false`, indicating that this page should be server-side rendered.
- Determine the current path and page number from the URL.
- Set a constant `pageSize` of 6 articles per page.
 - Define an asynchronous function `fetchArticles` that makes a fetch request for articles at the Strapi REST API endpoint. The data returned from this function includes the articles and metadata, such as the current page number and the total number of pages available (`meta.pagination.page` and `meta.pagination.pageCount`).
   ![strapi pagination response.png](https://delicate-dawn-ac25646e6d.media.strapiapp.com/strapi_pagination_response_b3e8908533.png)
  - The URL includes pagination parameters (`page` and `pageSize`).
  - Uses the `STRAPI_API_URL` environment variable to construct the full API URL.
Requests all populated fields with the `populate=*` parameter.
  - Parses the JSON response and returns the data.
- Call the `fetchArticles` function with the current `page` and `pageSize`.
- Destructure the response to extract the `articles` data and `meta` information.

Then render the articles and add buttons to navigate between the articles pages:

```javascript
<div class="articles-container">
  <h1>Latest Articles</h1>

  <div class="articles-grid">
    {
      articles.map((article) => (
        <article class="article">
          <h2>{article.title}</h2>
          <div class="article-content" set:html={article.content} />
        </article>
      ))
    }
  </div>

  <nav class="pagination">
    <a
      href={`${currentPath}?page=${meta.pagination.page - 1}`}
      class={`pagination-button ${page <= 1 ? "disabled" : ""}`}
      aria-label="Go to previous page"
      rel={page > 1 ? "prev" : null}
    >
      Previous
    </a>
    <span class="pagination-info">
      Page {page} of {meta.pagination.pageCount}
    </span>
    <a
      href={`${currentPath}?page=${meta.pagination.page + 1}`}
      class={`pagination-button ${page >= meta.pagination.pageCount ? "disabled" : ""}`}
      aria-label="Go to next page"
      rel={page < meta.pagination.pageCount ? "next" : null}
    >
      Next
    </a>
  </nav>
</div>
```
To add some basic styling to the app, create a `styles` directory in the root of your project and create an `articles.css` file. Copy the styles [here](https://github.com/preshenv/astro_infinite_scrolling_app/blob/main/src/styles/articles.css) and add to the `articles.css` file. Then, on your browser, navigate to `/pagination`. You can see all the articles displayed on page 6 and navigate between pages by clicking the next and previous page buttons.

![astro pagination demo.gif](https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_pagination_demo_fc581efd9f.gif)
    
## Implement Infinite Scrolling in Astro.js
In the previous section, you saw how to add pagination to your Astro application and tested it to see how it improves app load time and user experience. Let's move further to implement infinite scrolling, which helps you achieve the same result of increasing user experience and data load time. 
    
First, the `api` folder is in the `pages` directory. In the `api` directory, create a new `articles.js` file. This will be where your application will ask for articles it needs from the server. Add the code snippet below:
    
```javascript
export async function GET({ url }) {
  const page = url.searchParams.get("page") || "1";
  const pageSize = url.searchParams.get("pageSize") || "10";

  const response = await fetch(
    `${
      import.meta.env.STRAPI_API_URL
    }/api/articles?pagination[page]=${page}&pagination[pageSize]=${pageSize}&populate=*`
  );
  const data = await response.json();

  return new Response(
    JSON.stringify({
      articles: data.data,
      hasMore: data.meta.pagination.page < data.meta.pagination.pageCount,
      totalPages: data.meta.pagination.pageCount,
    }),
    {
      headers: { "Content-Type": "application/json" },
    }
  );
}
```
The code snippet sets up an API endpoint to fetch articles from a Strapi server. It defines a `GET` function to retrieve articles based on pagination parameters like page number and page size. The function sends a request to the Strapi server, receives a list of articles and information about pagination, and checks if there are more pages of articles available. Finally, it formats the list of articles and pagination information and sends it back in a standardized JSON response. 

Now, create a new file in your `pages` directory named `infinite-scroll.astro` and add the code.
                                                        
```javascript
---
import "../styles/articles.css";

export const prerender = false;

const initialPage = parseInt(Astro.url.searchParams.get("page") || "1");
const pageSize = 10;

const fetchArticles = async (page) => {
  const response = await fetch(
    `${import.meta.env.STRAPI_API_URL}/api/articles?pagination[page]=${page}&pagination[pageSize]=${pageSize}&populate=*`
  );
  const data = await response.json();

  const { data: fetchedArticles, meta } = data;
  return {
    articles: fetchedArticles,
    hasMore: meta.pagination.page < meta.pagination.pageCount,
    totalPages: meta.pagination.pageCount,
  };
};

const {
  articles: initialArticles,
  hasMore: initialHasMore,
  totalPages,
} = await fetchArticles(initialPage);
---                             
```
The above code loads initial data when the page is first loaded. This ensures the page has some content to display before user interactions occur.
Next, add the code below to display the content on the webpage and handle the infinite scrolling functionalities.
                                                                                               
```javascript                                       
<div class="articles-container">
  <h1>Latest Articles</h1>

  <div class="articles-grid">
    {
      initialArticles.map((article) => (
        <article class="article">
          <h2>{article.title}</h2>
          <div class="article-content" set:html={article.content} />
        </article>
      ))
    }
  </div>

  <div id="article-loader" style="display: none;">Loading more articles...</div>
</div>

<script define:vars={{ initialHasMore, initialPage, pageSize, totalPages }}>
  let isLoading = false;
  let hasMore = initialHasMore;
  let currentPage = initialPage;

  const articleLoader = document.getElementById("article-loader");
  const articlesGrid = document.querySelector(".articles-grid");

  const fetchMoreArticles = async () => {
    if (isLoading || !hasMore) return;

    isLoading = true;
    articleLoader.style.display = "block";

    try {
      const response = await fetch(
        `/api/articles?page=${currentPage + 1}&pageSize=${pageSize}`
      );
      const data = await response.json();

      if (!data.articles || data.articles.length === 0) {
        hasMore = false;
      } else {
        currentPage++;
        data.articles.forEach((article) => {
          const articleElement = document.createElement("article");
          articleElement.className = "article";
          articleElement.innerHTML = `
            <h2>${article.title}</h2>
            <div class="article-content">${article.content}</div>
          `;
          articlesGrid.appendChild(articleElement);
        });
        hasMore = currentPage < totalPages;
      }
      console.log(
        `Fetched page ${currentPage}/${totalPages}, hasMore: ${hasMore}`
      );
    } catch (error) {
      console.error("Error fetching articles:", error);
      hasMore = false;
    } finally {
      isLoading = false;
      articleLoader.style.display = hasMore ? "none" : "block";
      articleLoader.textContent = hasMore
        ? "Loading more articles..."
        : "No more articles to load.";

      if (!hasMore) {
        window.removeEventListener("scroll", handleScroll);
        console.log("No more articles, removed scroll listener");
      }
    }
  };

  const handleScroll = () => {
    if (isLoading || !hasMore) return;

    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const clientHeight =
      window.innerHeight || document.documentElement.clientHeight;

    if (scrollTop + clientHeight >= scrollHeight - 200) {
      console.log(`Triggering fetch for page ${currentPage + 1}`);
      fetchMoreArticles();
    }
  };

  window.addEventListener("scroll", handleScroll);
</script>                                   
```                                                     
The above code will: 
 - Create a `<div>` with the class “articles-container” which includes a `<h2>` “Latest Articles” and a grid layout for articles. 
 - Use JavaScript to render the articles obtained from the server in real time. 
 - Create a variable `isLoading`, `hasMore`, `currentPage` and select necessary elements from the DOM `articleLoader`, `articlesGrid`. 
 - Create a function named `fetchMoreArticles`, which will load more articles from the server when the user scrolls down the page. Within `fetchMoreArticles`, to avoid multiple server requests while waiting for a response, we use the `isLoading` flag, show a loading message (`articleLoader`), and update the current page number (`currentPage`). 
 - Use the fetch API to make a **GET** request to our API endpoint `/api/articles` with the current page number and page size as parameters. After getting the response, we add the new articles to the articles grid and set `hasMore` as true or false, depending on the availability of more articles. 
 - Create the function `handleScroll` that will listen for scroll events and call the function `fetchMoreArticles` when the user scrolls down to the bottom of the page. 
 - Use the `addEventListener` method to the window object to trigger the `handleScroll` function when the user scrolls. 

## Testing App
Now, navigate to the `/infinite-scroll` endpoint on your browser to see the infinite scrolling feature in action.

![astro infinite scrolling demo.gif](https://delicate-dawn-ac25646e6d.media.strapiapp.com/astro_infinite_scrolling_demo_3fa8a76951.gif)

You can find the code for the front end of this tutorial in this [GitHub repository](https://github.com/preshenv/astro_infinite_scrolling_app). Clone and start the Astro development server by running the command below:

```bash
npm run dev
```

## Conclusion
This tutorial has shown you how to enable pagination and infinite scrolling in your Astro application. In this case, we began with a brief of Astro and Strapi CMS before delving into endless scrolling. Then, we went deeper into showing how the Astro application can do pagination and infinite scrolling using Strapi 5.

Pagination and infinite scrolling should be included in any application involving a lot of data, such as a blog, news app, or social media app. The issue here is identifying when to apply each of the two methods. Pagination may be more applicable if you work with many data sets where users usually want to go to a specific page. However, if the aim is to give the users the functionality of browsing through the page and loading more content as they scroll down, then infinite scrolling can be more applicable. Finally,  the decision depends on your application's specific requirements and user experience goals.

Add Pagination & Infinite Scrolling in Astro.js Using Strapi CMS

large_Add Pagination & Infinite Scrolling in Astro.js Using Strapi 5.png

medium_Add Pagination & Infinite Scrolling in Astro.js Using Strapi 5.png

small_Add Pagination & Infinite Scrolling in Astro.js Using Strapi 5.png

thumbnail_Add Pagination & Infinite Scrolling in Astro.js Using Strapi 5.png

Add Pagination & Infinite Scrolling in Astro.js Using Strapi 5.png

Astro & Strapi Website Tutorial: Part 1 - Intro to Astro

Astro Actions With Vanilla JavaScript and Strapi 5

## What’s New in Strapi 5 RC
The Strapi 5 Release Candidate (RC) is here, and we’ve made significant progress to ensure it’s ready for your projects. All breaking changes are done, meaning you won't encounter any disruptive updates from here to the stable release. We've defined the functional scope clearly, so what you see now is what you'll get in the stable version. Most critical bugs have been fixed, ensuring a more stable and reliable experience. The core features have undergone thorough quality assurance, so you can confidently explore them.

During the time between the RC and the stable release, we'll now be focusing on fixing medium and low-severity issues. This phase is all about polishing and refining the product based on your feedback and our ongoing testing. Our goal is to make sure that by the time the stable release rolls out, Strapi 5 will be robust, reliable, and ready for any challenge you throw at it.

So in short:
- **✅ Breaking Changes – Done.**
All the breaking changes have been implemented and thoroughly tested. You can start exploring the new version without worrying about unexpected disruptions.

- **✅ Critical Bugs – Squashed.** 
We’ve tackled the critical bugs, making the RC stable enough for you to start testing more seriously. While we continue to iron out medium and low-priority issues, the core functionality is rock solid!

## Key Features in Strapi 5 RC
- ** [Draft & Publish](https://docs-next.strapi.io/user-docs/content-manager/saving-and-publishing-content)**: Manage your content seamlessly with our Draft & Publish system.
- ** [Content History](https://docs-next.strapi.io/user-docs/content-manager/working-with-content-history)**: Track changes and revert to previous versions of your content.
- ** TypeScript**: Almost the entire codebase is now migrated to TypeScript, enhancing code quality and developer experience.
- ** Core Features**: Enjoy robust features like Webhooks, API Token, [RBAC (Role-Based Access Control)](https://strapi.io/features/custom-roles-and-permissions), and [DEITS (Data Import Export Transfer System)](https://docs.strapi.io/dev-docs/data-management/transfer).
- ** Plugin CLI**: Easily extend Strapi with our new Plugin CLI.
- ** API Format**: Improved [REST](https://docs-next.strapi.io/dev-docs/api/rest) and [GraphQL](https://docs-next.strapi.io/dev-docs/api/graphql) API formatting for better performance and usability.
- ** Vite:** Faster builds with Vite.

## What’s the Difference Between the Beta and the RC?
The main difference is stability. In the RC, there are no more breaking changes, and we've fixed critical bugs. You can now start testing Strapi 5 for more serious purposes.

## Who Should Use the Strapi 5 RC?

If you're eager to get a head start on migrating to Strapi 5, now is a great time to try it out locally. While we don't recommend starting production projects just yet, testing the migration in a local environment will help you get prepared and give you a sneak peek at the new features. It's an adventurous experience that will also provide invaluable feedback, helping us improve the final migration process for everyone. Your input will make a big difference in ensuring a smooth transition for all Strapi users.

- ** Prospective Users**: If you're starting a proof of concept (PoC) or a new project, Strapi 5 RC is perfect for you.
- ** Explorers**: Those curious about the new features and changes in Strapi 5, this is your chance to dive in.
- ** Plugin Developers**: Now is a great time to upgrade your v4 plugins to Strapi 5. 

## Who Should Not Use the Strapi 5 RC?
- ** Existing Customers**: If you're currently using Strapi 4 in a production environment, hold off on upgrading until the stable release.
- ** Production Projects**: The RC is not recommended for production use. Stick with the stable version for mission-critical applications.

## How to Get Started
You can install Strapi 5 RC using the following command:

```bash
npx create-strapi-app@rc <project_name>
```

## What’s Next?
From now until the stable release, we’ll be focusing on fixing medium and low-priority issues. This period is crucial for us to gather feedback from you and ensure that the stable release meets your needs.

## Join the Conversation
We’re eager to hear your thoughts and experiences with Strapi 5 RC. [Join our community forum and share your feedback](https://forum.strapi.io/). Your input is invaluable as we move towards the final release.

Thank you for being part of the Strapi community. We’re excited to see what you build with Strapi 5!

Happy coding!


We're thrilled to announce the release candidate (RC) of Strapi 5! This marks a major milestone on our journey to the stable release. Here’s what you need to know.

The Strapi 5 release candidate is here!

Check out the following related blog posts.

Add Pagination & Infinite Scrolling in Astro.js Using Strapi 5

I'm a Software Engineer and Technical Writer who specializes in Node.js and JavaScript. I'm passionate about technology and sharing knowledge.