Mocking data fetching in NextJS - Deep Dive

Overview - Mocking data fetching

What is it?

Mocking data fetching means creating fake data responses instead of calling real servers. It helps developers test and build parts of an app without needing the actual backend ready. This way, you can see how your app behaves with different data quickly and safely. It is like pretending to get data so you can focus on the app's front side.

Why it matters

Without mocking, developers must wait for backend services to be ready or risk breaking the app if the server is down. This slows down work and makes testing harder. Mocking lets teams work faster and catch bugs early by simulating data responses. It also helps create reliable tests that do not depend on outside systems.

Where it fits

Before learning mocking, you should understand how Next.js fetches data using functions like getServerSideProps or React hooks like useEffect. After mastering mocking, you can explore advanced testing tools like Jest or React Testing Library to automate tests with mocked data.

Mental Model

Core Idea

Mocking data fetching is like replacing a real waiter with a pretend one who brings fake dishes so you can practice serving without a real kitchen.

Think of it like...

Imagine you want to practice serving food at a restaurant, but the kitchen is closed. You ask a friend to pretend to be the waiter and bring you fake plates. This lets you practice without needing real food or a working kitchen.

┌───────────────┐       ┌───────────────┐
│  Your App UI  │──────▶│ Mocked Data   │
└───────────────┘       │ (Fake Server) │
                        └───────────────┘
          ▲                      │
          │                      ▼
   ┌───────────────┐       ┌───────────────┐
   │ Real Backend  │       │  No Network   │
   └───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding data fetching basics

Concept: Learn how Next.js fetches data from servers to show on pages.

Next.js can fetch data on the server side using getServerSideProps or on the client side using React hooks like useEffect. This data is then used to render the page or update the UI. For example, getServerSideProps runs before the page loads and passes data as props.

Result

You know how your app gets data from a real server to show content.

Understanding how data fetching works is essential before replacing it with fake data.

2

Foundation

Why mock data fetching is useful

Concept: Mocking replaces real data calls with fake ones to speed up development and testing.

When backend APIs are not ready or unreliable, mocking lets you pretend to get data. This helps you build UI components and test them without waiting for real servers. It also avoids network delays and errors during development.

Result

You see how mocking can make your work faster and more reliable.

Knowing the benefits of mocking motivates learning how to do it properly.

3

Intermediate

Creating simple mock functions

🤔Before reading on: do you think mocking requires complex tools or can it be done with simple functions? Commit to your answer.

Concept: You can create simple JavaScript functions that return fake data instead of calling real APIs.

Instead of fetching from a URL, write a function that returns a promise resolving to fake data. For example: function fetchUser() { return Promise.resolve({ id: 1, name: 'Alice' }); } Use this function in your component to simulate data fetching.

Result

Your app behaves as if it fetched real data, but it uses the fake data instantly.

Understanding that mocking can be as simple as replacing a function helps you start quickly without extra tools.

4

Intermediate

Mocking with Next.js API routes

🤔Before reading on: do you think Next.js API routes can be used to mock data? Commit to yes or no.

Concept: Next.js API routes can serve fake data like a mini backend for your app during development.

Create a file under /pages/api/mock-user.js with: export default function handler(req, res) { res.status(200).json({ id: 1, name: 'Mock User' }); } Then fetch from '/api/mock-user' in your app instead of a real server.

Result

Your app fetches data from your own mock API route, simulating a backend.

Using API routes for mocking keeps your app structure close to real production, making transition easier.

5

Intermediate

Using MSW for advanced mocking

🤔Before reading on: do you think mocking can handle network delays and errors? Commit to yes or no.

Concept: MSW (Mock Service Worker) intercepts network requests and returns custom responses, allowing realistic mocks including delays and errors.

Install MSW and define handlers for your API endpoints. MSW runs in the browser or Node environment and intercepts fetch calls. You can simulate slow responses or failures to test your app's behavior.

Result

Your app behaves as if talking to a real server with controllable responses.

Knowing how to simulate network conditions with MSW helps build robust apps that handle real-world issues.

6

Advanced

Mocking data fetching in tests

🤔Before reading on: do you think tests should use real or mocked data fetching? Commit to your answer.

Concept: Tests use mocking to isolate components and avoid flaky tests caused by real network calls.

Use Jest with MSW or jest.mock to replace fetch or API calls with fake data during tests. This ensures tests run fast and reliably without depending on external services.

Result

Your tests pass consistently and quickly, focusing on your app logic.

Understanding mocking in tests is key to maintainable and trustworthy test suites.

7

Expert

Handling stale mocks and data consistency

🤔Before reading on: do you think mocks always stay accurate as backend changes? Commit to yes or no.

Concept: Mocks can become outdated if backend APIs change, causing bugs or false confidence.

Maintain mocks by syncing them with API specs or generating mocks from real responses. Use tools like OpenAPI or contract testing to keep mocks accurate. Also, watch for data shape mismatches that cause runtime errors.

Result

Your mocks stay reliable and your app behaves correctly as backend evolves.

Knowing the risks of stale mocks prevents hidden bugs and wasted debugging time.

Under the Hood

Mocking works by intercepting or replacing the normal data fetching calls your app makes. Instead of letting the fetch or API call go to the real server, the mock returns a prepared response immediately or after a delay. This can happen by swapping functions, intercepting network requests at the browser or Node level, or serving fake data from local API routes. The app code stays the same but receives controlled data.

Why designed this way?

Mocking was designed to decouple frontend development from backend readiness and network reliability. Early web development faced delays waiting for backend APIs. Mocking lets frontend teams work independently and test edge cases easily. Intercepting network calls or replacing functions are flexible ways to simulate any scenario without changing app logic.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ Your App Code │──────▶│ Mock Layer    │──────▶│ Fake Data     │
│ (calls fetch) │       │ (intercepts)  │       │ (responses)   │
└───────────────┘       └───────────────┘       └───────────────┘
          │                      │                      │
          │                      │                      ▼
          │                      │               ┌───────────────┐
          │                      │               │ Real Backend  │
          │                      │               └───────────────┘
          │                      │                      ▲
          │                      └──────────────────────┘
          └───────────────────────────────────────────────▶

Myth Busters - 4 Common Misconceptions

Quick: do you think mocking means your app is tested against real backend data? Commit yes or no.

Common Belief: Mocking means your app tests with real backend data but just fakes the network.

Reality: Mocking replaces real backend data with fake data, so tests do not depend on the real backend at all.

Why it matters: Believing mocks use real data can cause false confidence; your app might fail when real backend data differs.

Quick: do you think mocks always stay correct as backend changes? Commit yes or no.

Common Belief: Once you write mocks, they stay accurate forever without updates.

Reality: Mocks can become outdated if backend APIs change, causing mismatches and bugs.

Why it matters: Ignoring mock maintenance leads to hidden errors and wasted debugging.

Quick: do you think mocking slows down development because it adds complexity? Commit yes or no.

Common Belief: Mocking adds unnecessary complexity and slows down development.

Reality: Mocking speeds up development by removing backend dependencies and enabling faster testing.

Why it matters: Avoiding mocking due to this belief can cause delays and fragile apps.

Quick: do you think mocking can perfectly simulate all real network conditions? Commit yes or no.

Common Belief: Mocking can exactly replicate every real network behavior including all errors and delays.

Reality: Mocking can simulate many conditions but cannot perfectly reproduce all real-world network issues.

Why it matters: Overreliance on mocks may miss rare network bugs that only appear in production.

Expert Zone

1

Mocks should mimic backend data shapes precisely to avoid runtime errors in the frontend.

2

Using MSW allows mocking both client and server environments, enabling consistent tests across platforms.

3

Mocking can be combined with contract testing to ensure frontend and backend stay in sync automatically.

When NOT to use

Avoid mocking when you need to test real backend integration or performance. Use end-to-end testing tools like Cypress or Playwright instead to test the full stack with real servers.

Production Patterns

In production, mocks are often disabled or replaced with real API calls. During development, feature flags or environment variables toggle mocks. Teams use MSW for local development and Jest mocks for unit tests, ensuring fast feedback loops.

Connections

Dependency Injection

Mocking builds on the idea of swapping dependencies with alternatives.

Understanding dependency injection helps grasp how mocking replaces real data sources with fake ones without changing app logic.

Simulation in Engineering

Mocking is a form of simulation used to test systems under controlled conditions.

Knowing how engineers simulate physical systems helps appreciate mocking as a way to test software behavior without real external systems.

Unit Testing

Mocking is a key technique in unit testing to isolate components.

Recognizing mocking's role in unit testing clarifies why it is essential for reliable and fast automated tests.

Common Pitfalls

#1 Using mocks that do not match the real API data shape.

Wrong approach:

function fetchUser() {
return Promise.resolve({ username: 'Alice' }); // real API uses 'name' key
}

Correct approach:

function fetchUser() {
return Promise.resolve({ name: 'Alice' });
}

Root cause:

Misunderstanding the backend data structure causes frontend errors when keys differ.

#2 Leaving mocks enabled in production builds.

Wrong approach:

if (true) { // always use mock
fetch = () => Promise.resolve({ id: 1 });
}

Correct approach:

if (process.env.NODE_ENV === 'development') {
fetch = () => Promise.resolve({ id: 1 });
}

Root cause:

Not distinguishing environments leads to fake data in live apps, causing wrong behavior.

#3 Mocking only happy paths and ignoring error cases.

Wrong approach:

fetch = () => Promise.resolve({ data: 'ok' }); // no error simulation

Correct approach:

fetch = () => Promise.reject(new Error('Network error')); // simulate failure

Root cause:

Overlooking error scenarios causes untested code paths and fragile apps.

Key Takeaways

Mocking data fetching lets you build and test apps without relying on real backend servers.

You can start mocking simply by replacing fetch functions with ones returning fake data.

Advanced tools like MSW intercept network calls to simulate realistic server responses and errors.

Maintaining mocks to match backend changes is crucial to avoid hidden bugs.

Mocking is essential for fast, reliable tests and smooth frontend development workflows.