Data fetching

Choose freshness from the data, not from a single cache rule.

Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.

Next.js fetching data

Rules

NX-DATA-001 required

Fetch on the server when the data is not a browser-only value

Read files and official records on the server. Do not move that read into useEffect.

NX-DATA-002 recommended

Start independent reads together

Use Promise.all when two reads do not depend on each other.

NX-DATA-003 conditional

Pick cache behavior from sensitivity

Public content can be static. A private personnel record must not use the same public cache.

Applies when: A request returns personal or official records.

NX-DATA-004 required

Validate external input

Search text and route params are treated as data. They are not inserted into HTML.

Correct

const [offices, notices] = await Promise.all([
  readOffices(),
  readNotices(),
]);

Incorrect

const offices = await readOffices();
const notices = await readNotices();

The second read waits for the first even though neither result is an input to the other.

Checklist

Independent reads run together.
Private data is not given a public cache.
Errors render text, not a blank page.

AI instructions

You are implementing this practice in the current project. Do not install a design-system package and do not import one.
TASK: Apply Data fetching.
Choose freshness from the data, not from a single cache rule.
APPLIES TO: Written for a Next.js 15 App Router application. Guidance for Next.js 16 bundled docs or /_next/mcp does not apply to 15.5.27.
RULES:
- NX-DATA-001 [required] Fetch on the server when the data is not a browser-only value. Read files and official records on the server. Do not move that read into useEffect.
- NX-DATA-002 [recommended] Start independent reads together. Use Promise.all when two reads do not depend on each other.
- NX-DATA-003 [conditional] Pick cache behavior from sensitivity. Public content can be static. A private personnel record must not use the same public cache.
- NX-DATA-004 [required] Validate external input. Search text and route params are treated as data. They are not inserted into HTML.
CORRECT:
const [offices, notices] = await Promise.all([
  readOffices(),
  readNotices(),
]);
INCORRECT:
const offices = await readOffices();
const notices = await readNotices();
The second read waits for the first even though neither result is an input to the other.
CHECK:
- [ ] Independent reads run together.
- [ ] Private data is not given a public cache.
- [ ] Errors render text, not a blank page.
SOURCE: Next.js fetching data https://nextjs.org/docs/app/getting-started/fetching-data
Build the interface with the project’s own markup. Match the documented colors and elements when a control is involved.
Do not upgrade Next.js to obtain bundled docs. Do not claim a WCAG audit. Do not add secrets.