Pagination patterns in FastAPI - Performance & Optimization

Performance: Pagination patterns

MEDIUM IMPACT

Pagination patterns affect how quickly data loads and renders on the page, impacting load speed and interaction responsiveness.

Loading large datasets in a web app

FastAPI

from fastapi import FastAPI, Query
app = FastAPI()

@app.get('/items')
async def read_items(page: int = Query(1, ge=1), size: int = Query(10, ge=1, le=100)):
    # Returns only a page of items
    offset = (page - 1) * size
    return get_items_from_db(offset=offset, limit=size)

Loads only a small subset of data per request, reducing payload and speeding up rendering.

📈 Performance GainReduces data transfer size and response time, improving LCP and interaction speed

Loading large datasets in a web app

FastAPI

from fastapi import FastAPI
app = FastAPI()

@app.get('/items')
async def read_items():
    # Returns all items at once
    return get_all_items_from_db()

Loading all items at once causes slow response and large data transfer, blocking rendering.

📉 Performance CostBlocks rendering until all data loads; large payload increases LCP time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Load all data at once	High (all items in DOM)	Many reflows	High paint cost	[X] Bad
Server-side pagination	Low (page items only)	Single reflow	Low paint cost	[OK] Good
Client-side pagination with all data	High (all items in DOM)	Many reflows	High paint cost	[X] Bad
Client-side pagination with page data	Low (page items only)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Pagination limits the amount of data and DOM nodes processed, reducing work in layout and paint stages.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage due to large DOM and reflows

Core Web Vital Affected

LCP

Pagination patterns affect how quickly data loads and renders on the page, impacting load speed and interaction responsiveness.

Optimization Tips

1Load only the data needed for the current page to reduce payload size.

2Render only current page items in the DOM to minimize layout and paint work.

3Avoid loading or rendering all data at once to prevent blocking rendering and slow interaction.

Performance Quiz - 3 Questions

Which pagination pattern improves Largest Contentful Paint (LCP) the most?

A Loading all data and rendering all items in the DOM

B Loading all data at once and paginating on the client

C Loading only a subset of data per page from the server

D Not using pagination at all

DevTools: Performance

How to check: Record a performance profile while loading paginated data; observe layout and paint events.

What to look for: Look for fewer layout and paint events with pagination; shorter main thread blocking times indicate better performance.

Practice

1. What is the main purpose of pagination in a FastAPI application?

easy

A. To split large data sets into smaller, manageable parts

B. To speed up the server hardware

C. To encrypt data before sending it

D. To change the database schema automatically

Solution

1. Step 1: Understand pagination concept

   Pagination divides large data into smaller chunks to avoid overwhelming users or servers.

2. Step 2: Identify the main goal in FastAPI

   FastAPI uses pagination to send only a part of data per request, improving performance and usability.

3. Final Answer:

   To split large data sets into smaller, manageable parts -> Option A

4. Quick Check:

   Pagination = split data [OK]

Hint: Pagination means breaking data into pages [OK]

Common Mistakes:

• Thinking pagination speeds up hardware
• Confusing pagination with encryption
• Assuming pagination changes database structure

2. Which of the following is the correct way to declare pagination parameters in a FastAPI endpoint using query parameters?

easy

A. def get_items(offset: str = '0', count: str = '10'):

B. def get_items(page: str = '1', size: str = '10'):

C. def get_items(skip: int = 0, limit: int = 10):

D. def get_items(start: int, end: int):

Solution

1. Step 1: Check parameter types for pagination

   Pagination parameters should be integers with default values for skip and limit.

2. Step 2: Validate correct syntax in FastAPI

   Using skip and limit as integers with defaults is standard and valid for query parameters.

3. Final Answer:

   def get_items(skip: int = 0, limit: int = 10): -> Option C

4. Quick Check:

   skip and limit as int with defaults [OK]

Hint: Use int with defaults for skip and limit [OK]

Common Mistakes:

• Using strings instead of integers for pagination
• Missing default values for query parameters
• Using unclear parameter names like start/end

3. Given this FastAPI endpoint snippet, what will be the output if called with ?skip=2&limit=3 on a list [10, 20, 30, 40, 50, 60]?

items = [10, 20, 30, 40, 50, 60]

@app.get('/items')
def read_items(skip: int = 0, limit: int = 5):
    return items[skip : skip + limit]

medium

A. [40, 50, 60]

B. [20, 30, 40]

C. [10, 20, 30]

D. [30, 40, 50]

Solution

1. Step 1: Understand slicing with skip and limit

   With skip=2 and limit=3, slice is items[2:5].

2. Step 2: Extract slice from list

   items[2:5] = [30, 40, 50] from the list.

3. Final Answer:

   [30, 40, 50] -> Option D

4. Quick Check:

   items[2:5] = [30, 40, 50] [OK]

Hint: Slice list from skip to skip+limit [OK]

Common Mistakes:

• Confusing skip with page number
• Using limit as end index instead of length
• Off-by-one errors in slicing

4. Identify the error in this FastAPI pagination endpoint:

@app.get('/users')
def get_users(page: int = 1, size: int = 10):
    skip = page * size
    users = get_all_users()
    return users[skip : skip + size]

medium

A. The calculation of skip should be (page - 1) * size

B. The function should use skip and limit parameters instead of page and size

C. The slice should be users[skip : size] instead of users[skip : skip + size]

D. The default size should be 1, not 10

Solution

1. Step 1: Analyze skip calculation

   Skip should start from zero on page 1, so skip = (page - 1) * size.

2. Step 2: Check slicing correctness

   Current skip calculation skips too many items, causing wrong slice.

3. Final Answer:

   The calculation of skip should be (page - 1) * size -> Option A

4. Quick Check:

   skip = (page - 1) * size [OK]

Hint: Page 1 means skip zero items [OK]

Common Mistakes:

• Using page * size instead of (page - 1) * size
• Confusing slice end index
• Ignoring zero-based indexing

5. You want to create a FastAPI endpoint that returns paginated results along with total count of items. Which of the following code snippets correctly implements this pattern?

hard

A. def get_paginated(page: int = 0, size: int = 10):
data = get_all_data()
skip = (page - 1) * size
return {"total": len(data), "items": data[skip:skip+size]}

B. def get_paginated(skip: int = 0, limit: int = 10):
data = get_all_data()
return {"total": len(data), "items": data[skip:skip+limit]}

C. def get_paginated(offset: int = 0, count: int = 10):
data = get_all_data()
return {"total": len(data), "items": data[offset:count]}

D. def get_paginated(page: int = 1, size: int = 10):
data = get_all_data()
skip = page * size
return {"count": len(data), "results": data[skip:skip+size]}

Solution

1. Step 1: Check pagination calculation

   def get_paginated(skip: int = 0, limit: int = 10): data = get_all_data() return {"total": len(data), "items": data[skip:skip+limit]} correctly uses skip and limit with default values and slices data properly.

2. Step 2: Verify total count and returned keys

   def get_paginated(skip: int = 0, limit: int = 10): data = get_all_data() return {"total": len(data), "items": data[skip:skip+limit]} returns total count and paginated items with clear keys "total" and "items".

3. Final Answer:

   def get_paginated(skip: int = 0, limit: int = 10):\n data = get_all_data()\n return {"total": len(data), "items": data[skip:skip+limit]} -> Option B

4. Quick Check:

   Skip/limit with total count returned [OK]

Hint: Return total count and slice with skip/limit [OK]

Common Mistakes:

• Wrong skip calculation with page * size
• Incorrect slice indices causing empty results
• Using page=0 instead of page=1 for pagination