Welcome back! In the previous lessons, you learned how to fetch and display book data in your React catalog app and how to let users sort the results. As your catalog grows, you might notice that loading and displaying all books at once can slow down your app and make it harder for users to find what they want.

This is where pagination comes in. Pagination means breaking up a large list of items into smaller, more manageable pages. Instead of loading hundreds or thousands of books at once, you only load a few at a time — just what the user needs to see. This makes your app faster and easier to use.

In this lesson, you will learn how to add server-side pagination to your catalog. This means the server will only send a small chunk of books for each page, and your frontend will let users move between pages.

With server-side pagination, the client (your React app) asks the server for just one page of data at a time. The server responds with only the books for that page, along with information about the total number of books and how many are shown per page.

This is usually done by sending query parameters like page, sortBy, and order in the API request. For example:

The server then responds with something like:

• items: The books for the current page.
• total: The total number of books in the catalog.
• page: The current page number.
• pageSize: How many books are shown per page.

This way, your app only needs to handle a small set of books at a time, making it faster and more responsive.

Let’s look at how you can fetch paginated data and display it in your catalog. Here’s the updated code for your API call and catalog page:

Explanation: Let’s look at getBooks. It constructs a query string using URLSearchParams so the server receives exactly the sorting, paging, and search options you specify.

• Purpose: Build /books?... with any mix of:
  • sortBy (e.g., "title" or "author"),
  • order ("asc" or "desc"),
  • page (page , 1-based),

Let’s walk through the key behaviors in CatalogPage and why they matter.

Let’s look at the Pagination component. It receives currentPage, totalPages, and a callback:

Explanation:

• Rendering strategy:
  • If there’s only 1 page, render nothing.
  • Otherwise, compute [1, 2, ..., totalPages] and render buttons for each, plus Previous/Next.
  • Note: For very large catalogs, rendering all page numbers may be unwieldy. Consider showing a smaller range (like 1 ... 4 5 6 ... 20) in a real-world app to improve readability and performance.
• Disabled states:
  • Previous is disabled on the first page; Next on the last page — this prevents invalid navigation.
• Styling & accessibility:

URLSearchParams is a built-in Web API for building and manipulating query strings:

• Creation: new URLSearchParams({ page: '2', q: 'clean code' })
• Encoding: Automatically escapes special characters (q=clean+code), so you don’t have to encodeURIComponent manually.
• Editing:
  • .set('key', 'value') adds/replaces a parameter.
  • .delete('key') removes it.
  • .get('key') reads it; returns null if missing.
• Serialization: .toString() returns key=value&key2=value2, ready to append after a ?.
• Cloning from existing params: new URLSearchParams(prev) lets you copy and modify current URL parameters cleanly (exactly what we do in the debounced search effect).

Using URLSearchParams keeps your URLs well-formed, your code concise, and your state shareable.

A key part of this setup is keeping the UI state (which page you’re on) in sync with the URL. This way, users can bookmark or share a link to a specific page, and the app will always show the correct results.

• The useSearchParams hook from React Router reads and updates the URL’s query parameters.
• When you change the page, the URL updates (for example, ?sortBy=title&order=asc&page=2).
• The useQuery hook automatically fetches new data when the page or sorting changes.

This approach makes your app more user-friendly and easier to navigate.

In this lesson, you learned how to add server-side pagination to your catalog app. You saw how to:

• Request a specific page of data from the server using query parameters.
• Update your API call and frontend to handle paginated responses.
• Use a pagination component to let users move between pages.
• Keep the UI and URL in sync for a smooth user experience.

To sum up:

• API: getBooks builds /books?... with sortBy, order, page, q, and pageSize using URLSearchParams, then returns the typed payload.
• Screen: CatalogPage keeps URL state in sync, debounces search input, fetches the correct page with useQuery (fixed pageSize: 5), and computes totalPages from the server response.
• UI: Pagination renders accessible controls and calls back to update the URL, which triggers a refetch.

With these pieces, your catalog now handles search + sort + server-side pagination cleanly and efficiently — and every state is shareable via the URL. Next, you’ll get a chance to practice these concepts with hands-on exercises. This will help you reinforce what you’ve learned and make sure you can implement server-side pagination on your own. Great work — let’s keep going!