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.

Practice

1. What is the main purpose of pagination links in a REST API?

easy

A. To split large data into smaller pages for easier access

B. To encrypt the data sent from the server

C. To speed up the server response time by caching

D. To validate user authentication tokens

Solution

1. Step 1: Understand pagination concept

   Pagination divides large data sets into smaller, manageable pages.

2. Step 2: Identify purpose of pagination links

   Pagination links help clients navigate between these pages easily.

3. Final Answer:

   To split large data into smaller pages for easier access -> Option A

4. Quick Check:

   Pagination = split data into pages [OK]

Hint: Pagination means breaking data into pages for easy reading [OK]

Common Mistakes:

• Confusing pagination with data encryption
• Thinking pagination speeds up server response
• Mixing pagination with authentication

2. Which of the following is the correct syntax for a pagination link in an HTTP header?

easy

A. Link: ; rel="next"

B. Link: https://api.example.com/items?page=2 rel=next

C. Link: rel=next

D. Link: https://api.example.com/items?page=2; rel="next"

Solution

1. Step 1: Review correct Link header format

   The URL must be enclosed in angle brackets <> and rel value in quotes.

2. Step 2: Match syntax with options

   Link: ; rel="next" correctly uses <URL> and rel="next" with quotes.

3. Final Answer:

   Link: <https://api.example.com/items?page=2>; rel="next" -> Option A

4. Quick Check:

   Link header syntax = <URL>; rel="value" [OK]

Hint: Use angle brackets for URL and quotes for rel value [OK]

Common Mistakes:

• Omitting angle brackets around URL
• Not quoting the rel attribute value
• Missing semicolon between URL and rel

3. Given the HTTP Link header:
Link: <https://api.example.com/items?page=3>; rel="next", <https://api.example.com/items?page=1>; rel="prev"
What URL should the client use to get the previous page?

medium

A. https://api.example.com/items?page=3

B. https://api.example.com/items?page=4

C. https://api.example.com/items?page=1

D. https://api.example.com/items?page=2

Solution

1. Step 1: Identify rel attributes in Link header

   Rel="next" points to page 3, rel="prev" points to page 1.

2. Step 2: Find URL for previous page

   The client should use the URL with rel="prev", which is page 1.

3. Final Answer:

   https://api.example.com/items?page=1 -> Option C

4. Quick Check:

   Prev page URL = page=1 [OK]

Hint: Look for rel="prev" to find previous page URL [OK]

Common Mistakes:

• Choosing the next page URL instead of previous
• Confusing page numbers in URLs
• Ignoring rel attribute values

4. You receive this Link header:
Link: https://api.example.com/items?page=2; rel="next"
Why might this cause an error when parsing pagination links?

medium

A. The page number is invalid

B. The rel attribute value is missing quotes

C. The semicolon is missing between URL and rel

D. The URL is not enclosed in angle brackets

Solution

1. Step 1: Check Link header syntax rules

   URLs must be enclosed in angle brackets <> for correct parsing.

2. Step 2: Identify error in given header

   The URL is not inside <>, which can cause parsing errors.

3. Final Answer:

   The URL is not enclosed in angle brackets -> Option D

4. Quick Check:

   URL must be in <> for Link header [OK]

Hint: Always put URLs in angle brackets in Link headers [OK]

Common Mistakes:

• Forgetting angle brackets around URLs
• Assuming quotes around rel are optional
• Misplacing semicolons in header

5. You want to implement pagination links for an API returning 100 items with 10 items per page. Which Link header correctly provides navigation for page 5?

hard

A. Link: ; rel="next", ; rel="prev"

B. Link: ; rel="next", ; rel="prev"

C. Link: ; rel="next", ; rel="prev"

D. Link: ; rel="next", ; rel="prev"

Solution

1. Step 1: Calculate next and previous pages for page 5

   Next page after 5 is 6, previous page before 5 is 4.

2. Step 2: Match correct URLs with rel attributes

   Link: ; rel="next", ; rel="prev" correctly assigns page=6 to rel="next" and page=4 to rel="prev".

3. Final Answer:

   Link: <https://api.example.com/items?page=6>; rel="next", <https://api.example.com/items?page=4>; rel="prev" -> Option B

4. Quick Check:

   Page 5 next=6, prev=4 [OK]

Hint: Next page = current +1, prev page = current -1 in Link header [OK]

Common Mistakes:

• Swapping next and prev URLs
• Using current page number for both next and prev
• Incorrect page numbers outside valid range