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.