Loading states for data in NextJS - Performance & Optimization

Performance: Loading states for data

MEDIUM IMPACT

This concept affects how quickly users see feedback during data fetching, impacting perceived load speed and interaction responsiveness.

Displaying feedback while waiting for data to load

NextJS

import { useState, useEffect } from 'react';

export default function Page() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      });
  }, []);

  if (loading) return <div role="status" aria-live="polite">Loading data...</div>;
  return <Content data={data} />;
}

Shows a simple loading message immediately, giving instant feedback and improving perceived responsiveness.

📈 Performance GainNon-blocking UI update; reduces INP by providing immediate visual feedback.

Displaying feedback while waiting for data to load

NextJS

export default async function Page() {
  const data = await fetch('/api/data').then(res => res.json());
  return <div>{data ? <Content data={data} /> : null}</div>;
}

No loading state shown; user sees blank or no feedback, causing poor perceived performance and possible frustration.

📉 Performance CostBlocks user feedback until data arrives, increasing INP and perceived load time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No loading state	Minimal DOM nodes	0 reflows until data arrives	Single paint delayed	[X] Bad
Simple loading text	Few DOM nodes	1 reflow on loading display	Light paint cost	[OK] Good

Rendering Pipeline

Loading states trigger style calculation and paint early, allowing the browser to show feedback before data arrives. Once data loads, layout and paint update with real content.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckPaint stage when switching from loading to content

Core Web Vital Affected

INP

This concept affects how quickly users see feedback during data fetching, impacting perceived load speed and interaction responsiveness.

Optimization Tips

1Always show a simple loading state immediately when fetching data.

2Keep loading UI lightweight to minimize paint and layout costs.

3Use ARIA roles like role="status" and aria-live="polite" for accessibility.

Performance Quiz - 3 Questions

Why is showing a loading state important for data fetching in Next.js?

A It reduces the total bundle size of the app.

B It provides immediate feedback, improving interaction responsiveness (INP).

C It prevents any reflows during rendering.

D It guarantees the data loads faster from the server.

DevTools: Performance

How to check: Record a performance profile while loading the page. Look for long gaps before first paint or interaction. Check if loading UI appears quickly.

What to look for: Short time to first paint and quick visual feedback indicate good loading state implementation.