Pagination links in Rest API - Step-by-Step Execution

Concept Flow - Pagination links

Client requests page N

↓

Server fetches data slice

↓

Server creates pagination links

↓

Server sends data + links

↓

Client uses links to request next/prev page

The client asks for a specific page, the server gets that data slice, creates links for navigation, and sends both data and links back.

Execution Sample

Rest API

GET /items?page=2&size=3

Response:
{
  "data": ["item4", "item5", "item6"],
  "links": {
    "prev": "/items?page=1&size=3",
    "next": "/items?page=3&size=3"
  }
}

Client requests page 2 with 3 items per page; server returns items 4-6 and links to previous and next pages.

Execution Table

Step	Action	Page Requested	Data Returned	Links Created
1	Client sends request	2	N/A	N/A
2	Server calculates offset	2	N/A	N/A
3	Server fetches items 4-6	2	["item4", "item5", "item6"]	N/A
4	Server creates links	2	["item4", "item5", "item6"]	{"prev": "/items?page=1&size=3", "next": "/items?page=3&size=3"}
5	Server sends response	2	["item4", "item5", "item6"]	{"prev": "/items?page=1&size=3", "next": "/items?page=3&size=3"}
6	Client uses links to navigate	N/A	N/A	N/A

💡 Response sent with data slice and pagination links for navigation.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
page	N/A	2	2	2	2
size	N/A	3	3	3	3
offset	N/A	3	3	3	3
data_slice	N/A	N/A	["item4", "item5", "item6"]	["item4", "item5", "item6"]	["item4", "item5", "item6"]
links	N/A	N/A	N/A	{"prev": "/items?page=1&size=3", "next": "/items?page=3&size=3"}	{"prev": "/items?page=1&size=3", "next": "/items?page=3&size=3"}

Key Moments - 3 Insights

Why does the server create 'prev' and 'next' links instead of just sending data?

The server creates 'prev' and 'next' links to help the client easily navigate between pages without guessing URLs. See execution_table rows 4 and 5 where links are created and sent.

What happens if the client requests page 1? Is there a 'prev' link?

For page 1, there is no 'prev' link because there is no page before 1. The server omits or disables 'prev' link to avoid invalid navigation. This is a common edge case in pagination.

How does the server know which items to send for page 2?

The server calculates an offset based on page number and size (offset = (page-1)*size). For page 2 and size 3, offset is 3, so items 4-6 are sent. See variable_tracker for 'offset' and 'data_slice'.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, which items does the server fetch for page 2?

A ["item4", "item5", "item6"]

B ["item1", "item2", "item3"]

C ["item7", "item8", "item9"]

D No items fetched

💡 Hint

Check the 'Data Returned' column at step 3 in execution_table.

At which step does the server create the pagination links?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Links Created' column in execution_table.

If the client requested page 1, what would the 'prev' link be?

A "/items?page=0&size=3"

B No 'prev' link

C "/items?page=1&size=3"

D "/items?page=2&size=3"

💡 Hint

Recall key_moments about edge cases for page 1 navigation.

Concept Snapshot

Pagination links help clients navigate pages.
Server calculates offset: (page-1)*size.
Server returns data slice plus 'prev' and 'next' URLs.
'prev' link omitted on first page.
Client uses links to request other pages.

Full Transcript

Pagination links are URLs the server sends with data to help clients move between pages easily. When a client asks for page N with a certain size, the server calculates which items to send by using an offset. It then creates links for the previous and next pages if they exist. These links are included in the response so the client can click or request them to get other pages. For example, if the client requests page 2 with size 3, the server sends items 4 to 6 and links to page 1 and page 3. On the first page, the 'prev' link is not sent because there is no page before page 1. This system makes browsing large lists simple and clear.