Repository pattern for data access in NextJS - Performance & Optimization

Performance: Repository pattern for data access

MEDIUM IMPACT

This pattern affects how data fetching impacts page load speed and interaction responsiveness by centralizing data access logic.

Fetching data directly in multiple components

NextJS

class Repository {
  async fetchUsers() {
    const res = await fetch('https://api.example.com/users');
    return res.json();
  }
  async fetchPosts() {
    const res = await fetch('https://api.example.com/posts');
    return res.json();
  }
}

export async function getServerSideProps() {
  const repo = new Repository();
  const [users, posts] = await Promise.all([repo.fetchUsers(), repo.fetchPosts()]);
  return { props: { users, posts } };
}

function Page({ users, posts }) {
  // render users and posts
}

Centralizes data fetching, enables parallel requests, and reduces duplicated code, improving load speed.

📈 Performance GainParallel fetches reduce blocking time; single abstraction layer simplifies caching and optimization.

Fetching data directly in multiple components

NextJS

export async function getServerSideProps() {
  const res1 = await fetch('https://api.example.com/users');
  const users = await res1.json();
  const res2 = await fetch('https://api.example.com/posts');
  const posts = await res2.json();
  return { props: { users, posts } };
}

function Page({ users, posts }) {
  // render users and posts
}

Multiple fetch calls scattered in components cause duplicated logic and uncoordinated data fetching, increasing load time.

📉 Performance CostBlocks rendering until all fetches complete; multiple network requests increase LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct fetch in multiple components	Multiple fetch calls	Multiple reflows due to delayed content	High paint cost due to blocking	[X] Bad
Centralized repository with parallel fetch	Single fetch layer	Single reflow after data ready	Lower paint cost, faster LCP	[OK] Good
Repository instantiated inside component	Stable DOM but extra React effects	Extra reflows from re-renders	Moderate paint cost	[!] OK
Repository instantiated outside component	Stable DOM and effects	Minimal reflows	Low paint cost	[OK] Good

Rendering Pipeline

Data fetching via repository affects the critical rendering path by determining when content can be painted. Fetching delays block LCP. Efficient repository use enables parallel fetches and caching, reducing layout and paint delays.

→Critical Rendering Path

→Layout

→Paint

⚠️ BottleneckData fetching delays block initial content paint, increasing LCP.

Core Web Vital Affected

LCP

This pattern affects how data fetching impacts page load speed and interaction responsiveness by centralizing data access logic.

Optimization Tips

1Centralize data fetching in a repository to avoid duplicated network calls.

2Use parallel fetches inside the repository to reduce blocking time.

3Instantiate repository objects outside React components to avoid unnecessary re-renders.

Performance Quiz - 3 Questions

How does using a repository pattern with parallel fetches affect page load?

A It increases blocking time by adding extra abstraction layers.

B It reduces blocking time and improves LCP by fetching data in parallel.

C It has no effect on page load speed.

D It causes more reflows during rendering.

DevTools: Performance

How to check: Record page load in Performance tab, look for long tasks blocking main thread during data fetch, and check waterfall for fetch timing.

What to look for: Look for long blocking times before first content paint (LCP) and multiple sequential fetches causing delays.

Practice

1. What is the main purpose of using the Repository pattern in a Next.js application?

easy

A. To style components with CSS modules

B. To organize data access in one place for cleaner and reusable code

C. To handle routing between pages

D. To manage component state with hooks

Solution

1. Step 1: Understand the role of the Repository pattern

   The Repository pattern centralizes data access logic, separating it from UI code.

2. Step 2: Identify benefits in Next.js context

   This separation makes code cleaner, reusable, and easier to maintain.

3. Final Answer:

   To organize data access in one place for cleaner and reusable code -> Option B

4. Quick Check:

   Repository pattern = centralized data access [OK]

Hint: Repository pattern centralizes data access, not UI or styling [OK]

Common Mistakes:

• Confusing repository with UI state management
• Thinking repository handles routing
• Mixing repository with styling concerns

2. Which of the following is the correct way to define a simple repository class in Next.js using TypeScript?

easy

A. class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } }

B. function UserRepository() { return fetch('/api/users') }

C. const UserRepository = () => fetch('/api/users').json()

D. class UserRepository { getAll() { return fetch('/api/users').json() } }

Solution

1. Step 1: Check class syntax and async usage

   class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } correctly defines a class with an async method returning parsed JSON from fetch.

2. Step 2: Identify errors in other options

   function UserRepository() { return fetch('/api/users') } is a function, not a class. const UserRepository = () => fetch('/api/users').json() incorrectly calls .json() directly on fetch result without awaiting. class UserRepository { getAll() { return fetch('/api/users').json() } } misses async and awaits, causing runtime error.

3. Final Answer:

   class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } -> Option A

4. Quick Check:

   Async class method with fetch and json parsing = class UserRepository { async getAll() { return fetch('/api/users').then(res => res.json()) } } [OK]

Hint: Repository methods fetching data must be async and parse JSON [OK]

Common Mistakes:

• Forgetting async keyword on methods
• Calling .json() without awaiting fetch response
• Using function instead of class for repository

3. Given this repository method in Next.js, what will console.log(users) output?

class UserRepository {
  async getAll() {
    return [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
  }
}

const repo = new UserRepository()
const users = await repo.getAll()
console.log(users)

medium

A. [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

B. Promise { <pending> }

C. undefined

D. Error: await is only valid in async function

Solution

1. Step 1: Analyze the getAll method

   getAll returns a resolved array of user objects immediately (no fetch or delay).

2. Step 2: Understand await usage

   Await unwraps the Promise returned by async getAll, so users is the array itself.

3. Final Answer:

   [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] -> Option A

4. Quick Check:

   Await unwraps async return value = array [OK]

Hint: Await unwraps async method result to actual data [OK]

Common Mistakes:

• Thinking users is a Promise object
• Forgetting await causes Promise logged
• Assuming undefined without return

4. Identify the error in this Next.js repository code snippet:

class ProductRepository {
  getAll() {
    const response = fetch('/api/products')
    return response.json()
  }
}

medium

A. json() method does not exist on response

B. fetch URL is incorrect

C. Missing async keyword and await for fetch and json calls

D. Class name should be lowercase

Solution

1. Step 1: Check fetch usage

   fetch returns a Promise, so response is a Promise, not the actual response object.

2. Step 2: Identify missing async/await

   To get JSON data, method must be async and await fetch and response.json() calls.

3. Final Answer:

   Missing async keyword and await for fetch and json calls -> Option C

4. Quick Check:

   Async fetch requires await to get response data [OK]

Hint: Always use async/await with fetch and response.json() [OK]

Common Mistakes:

• Not marking method async
• Not awaiting fetch or json()
• Assuming fetch returns data synchronously

5. You want to create a repository in Next.js that fetches user data and caches it to avoid repeated API calls. Which approach correctly applies the repository pattern with caching?

hard

A. class UserRepository {
async getAll() {
return fetch('/api/users').then(res => res.json())
}
}

B. function getAllUsers() {
return fetch('/api/users').then(res => res.json())
}

C. const cache = []
async function getAllUsers() {
if (cache.length) return cache
const res = await fetch('/api/users')
cache.push(...await res.json())
return cache
}

D. class UserRepository {
cache = null
async getAll() {
if (this.cache) return this.cache
const res = await fetch('/api/users')
this.cache = await res.json()
return this.cache
}
}

Solution

1. Step 1: Understand caching in repository context

   Caching should be encapsulated inside the repository class to keep data access logic together.

2. Step 2: Evaluate options for caching implementation

   class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } uses a class property to store cache and returns it if available, avoiding repeated fetch calls.

3. Step 3: Compare other options

   Options A and B do not implement caching. const cache = [] async function getAllUsers() { if (cache.length) return cache const res = await fetch('/api/users') cache.push(...await res.json()) return cache } uses an external cache variable, breaking encapsulation.

4. Final Answer:

   class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } -> Option D

5. Quick Check:

   Repository with internal cache property = class UserRepository { cache = null async getAll() { if (this.cache) return this.cache const res = await fetch('/api/users') this.cache = await res.json() return this.cache } } [OK]

Hint: Cache inside repository class to keep data logic together [OK]

Common Mistakes:

• Caching outside repository breaks encapsulation
• Not checking cache before fetching
• Using functions instead of class for caching