Data cache behavior in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data at build time for static generation of dynamic routes in Next.js using the new App Router.

NextJS

export async function [1]() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

Drag options to blanks, or click blank then click option'

AgetServerSideProps

BgenerateStaticParams

CfetchData

DgetData

Attempts:

3 left

💡 Hint

Common Mistakes

Using getServerSideProps which is for Pages Router, not App Router.

Using a custom function name that Next.js does not recognize.

In Next.js App Router, generateStaticParams is used for static generation with dynamic routes, which involves data fetching at build time.

2fill in blank

medium

Complete the code to fetch data with caching disabled in Next.js App Router.

NextJS

const data = await fetch('https://api.example.com/data', { cache: [1] }).then(res => res.json());

Drag options to blanks, or click blank then click option'

A'no-store'

B'force-cache'

C'default'

D'reload'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-cache' which caches the response aggressively.

Using 'default' which uses the browser's default caching behavior.

Setting cache: 'no-store' disables caching and fetches fresh data on every request.

3fill in blank

hard

Complete the fetch call to ensure data is cached but revalidated every 60 seconds in Next.js App Router.

NextJS

const data = await fetch('https://api.example.com/data', { next: { [1]: 60 } }).then(res => res.json());

Drag options to blanks, or click blank then click option'

Aexpires

BmaxAge

CstaleWhileRevalidate

Drevalidate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'maxAge' which is not recognized by Next.js fetch.

Forgetting the 'next' wrapper around revalidate.

Using cache: 'no-store' which prevents caching.

The next: { revalidate: 60 } option sets Incremental Static Regeneration (ISR) to revalidate the cache every 60 seconds.

4fill in blank

hard

Fill both blanks to create a fetch call that caches data but revalidates every 30 seconds.

NextJS

const data = await fetch('https://api.example.com/data', { cache: '[1]', next: { [2]: 30 } }).then(res => res.json());

Drag options to blanks, or click blank then click option'

Aforce-cache

Brevalidate

Cno-store

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-store' disables caching, so revalidate has no effect.

Forgetting to nest revalidate under 'next'.

Using cache: 'force-cache' enables caching, and next: { revalidate: 30 } sets ISR to refresh every 30 seconds.

5fill in blank

hard

Fill all three blanks to create a fetch call that uses POST, disables caching, and sets revalidation to 0.

NextJS

const data = await fetch('https://api.example.com/data', { method: '[1]', cache: '[2]', next: { [3]: 0 } }).then(res => res.json());

Drag options to blanks, or click blank then click option'

AGET

BPOST

Crevalidate

Dno-store

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET method when POST is required.

Omitting 'next' for revalidate.

Setting cache to 'force-cache' which enables caching.

method: 'POST' for mutations, cache: 'no-store' disables caching, next: { revalidate: 0 } ensures dynamic rendering with no stale data.