Data all 4 written

app/data/basic/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import { connection } from 'next/server';

export default async function Basic() {
  await connection();
  const res = await fetch(`${process.env.DATA_URL}/posts`);
  const posts = await res.json();
  return (
    <main data-page="posts">
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </main>
  );
}

basic.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const hits = async () => (await fetch(data + '/_hits')).json();

const html = await (await fetch(base + '/data/basic')).text();
const afterOne = await hits();
await fetch(base + '/data/basic');
const afterTwo = await hits();

console.log(html.match(/<ul>.*?<\/ul>/)[0]);
console.log('requests that reached the data server after one visit: ', JSON.stringify(afterOne));
console.log('requests that reached the data server after two visits:', JSON.stringify(afterTwo));

check('the titles fetched on the server are in the HTML', ['Hello, Next.js', 'Server components', 'Caching'].map((t) => html.includes(t)), [true, true, true]);
check('one visit made one request to the data server', afterOne, { '/posts': 1 });
check('a second visit made another: this fetch is not remembered between requests', afterTwo, { '/posts': 2 });
check('the address of the data server never reaches the browser', html.includes(data), false);

app/data/waterfall/page.js

1
2
3
4
5
6
7
8
9
10import { connection } from 'next/server';

const get = async (id) => (await fetch(`${process.env.DATA_URL}/slow?ms=600&id=${id}`)).json();

export default async function Waterfall() {
  await connection();
  const a = await get('a');
  const b = await get('b');
  return <main data-page="waterfall">{a.waited + b.waited} ms of waiting, one after the other</main>;
}

app/data/parallel/page.js

1
2
3
4
5
6
7
8
9import { connection } from 'next/server';

const get = async (id) => (await fetch(`${process.env.DATA_URL}/slow?ms=600&id=${id}`)).json();

export default async function Parallel() {
  await connection();
  const [a, b] = await Promise.all([get('a'), get('b')]);
  return <main data-page="parallel">{a.waited + b.waited} ms of waiting, at the same time</main>;
}

waterfall.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const log = async () => (await fetch(data + '/_log')).json();

await fetch(base + '/data/waterfall');
const sequential = await log();
await fetch(data + '/_reset');
await fetch(base + '/data/parallel');
const together = await log();

const gap = (rows) => rows[1][1] - rows[0][1];
console.log('one after the other:', sequential.map((row) => row[0]).join('  then  '));
console.log('  the second arrived at least 550 ms after the first:', gap(sequential) >= 550);
console.log('with Promise.all:');
console.log('  both arrived within 300 ms of each other:', gap(together) < 300);

check('the waterfall asked in order', sequential.map((row) => row[0]), ['/slow?ms=600&id=a', '/slow?ms=600&id=b']);
check('and asked for the second only after the first had answered', gap(sequential) >= 550, true);
check('Promise.all asked for both', together.map((row) => row[0]).sort(), ['/slow?ms=600&id=a', '/slow?ms=600&id=b']);
check('at once', gap(together) < 300, true);

app/data/memo/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25import { connection } from 'next/server';
import { calls, double, doubleCached } from '../../_lib/calls.js';

async function PostCount() {
  const posts = await (await fetch(`${process.env.DATA_URL}/posts`)).json();
  return <span data-count>{posts.length} posts</span>;
}

async function PostTitles() {
  const posts = await (await fetch(`${process.env.DATA_URL}/posts`)).json();
  return <span data-titles>{posts.map((post) => post.title).join(', ')}</span>;
}

export default async function Memo() {
  await connection();
  double(2);
  double(2);
  doubleCached(2);
  doubleCached(2);
  return (
    <main data-page="memo" data-plain={calls.plain} data-cached={calls.cached}>
      <PostCount /> <PostTitles />
    </main>
  );
}

app/_lib/calls.js

1
2
3
4
5
6
7
8
9
10
11
12
13import { cache } from 'react';

export const calls = { plain: 0, cached: 0 };

export function double(n) {
  calls.plain += 1;
  return n * 2;
}

export const doubleCached = cache((n) => {
  calls.cached += 1;
  return n * 2;
});

memo.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const hits = async () => (await fetch(data + '/_hits')).json();
const number = (html, name) => Number(new RegExp('data-' + name + '="(\\d+)"').exec(html)[1]);

const first = await (await fetch(base + '/data/memo')).text();
const afterOne = await hits();
const second = await (await fetch(base + '/data/memo')).text();
const afterTwo = await hits();

console.log('two components fetched /posts; requests that reached the data server:', JSON.stringify(afterOne));
console.log('after a second visit:', JSON.stringify(afterTwo));
console.log('per visit, the plain function ran', number(second, 'plain') - number(first, 'plain'), 'times for 2 calls');
console.log('per visit, the cache()-wrapped one ran', number(second, 'cached') - number(first, 'cached'), 'time for 2 calls');

check('two components fetching one address made one request', afterOne, { '/posts': 1 });
check('the memory ends with the render, so the next visit asked again', afterTwo, { '/posts': 2 });
check('a plain function runs for every call', number(second, 'plain') - number(first, 'plain'), 2);
check('cache() runs it once per render', number(second, 'cached') - number(first, 'cached'), 1);

app/cache/default/page.js

1
2
3
4
5
6
7
8
9
10
11
12import { connection } from 'next/server';

export default async function Default() {
  await connection();
  const res = await fetch(`${process.env.DATA_URL}/stamp/default`);
  const stamp = await res.json();
  return (
    <main data-page="cache-default">
      <p>This page was built from data request number <span data-n>{stamp.n}</span>.</p>
    </main>
  );
}

app/cache/forced/page.js

1
2
3
4
5
6
7
8
9
10
11
12import { connection } from 'next/server';

export default async function Forced() {
  await connection();
  const res = await fetch(`${process.env.DATA_URL}/stamp/forced`, { cache: 'force-cache' });
  const stamp = await res.json();
  return (
    <main data-page="cache-forced">
      <p>This page was built from data request number <span data-n>{stamp.n}</span>.</p>
    </main>
  );
}

force-cache.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const number = (html) => Number(/data-n[^>]*>(\d+)</.exec(html)[1]);
const visit = async (path) => number(await (await fetch(base + path)).text());

const plain = [await visit('/cache/default'), await visit('/cache/default'), await visit('/cache/default')];
const forced = [await visit('/cache/forced'), await visit('/cache/forced'), await visit('/cache/forced')];
const hits = await (await fetch(data + '/_hits')).json();

console.log('fetch(url)                        three visits showed data request number:', plain.join(', '));
console.log("fetch(url, { cache: 'force-cache' }) three visits showed data request number:", forced.join(', '));
console.log('requests that reached the data server:', JSON.stringify(hits));

check('without an option, every visit made a new request', plain, [1, 2, 3]);
check('with force-cache, the first answer was reused', forced, [1, 1, 1]);
check('the data server counted 3 requests and 1', hits, { '/stamp/default': 3, '/stamp/forced': 1 });

app/cache/timed/page.js

1
2
3
4
5
6
7
8
9
10
11
12import { connection } from 'next/server';

export default async function Timed() {
  await connection();
  const res = await fetch(`${process.env.DATA_URL}/stamp/timed`, { next: { revalidate: 2 } });
  const stamp = await res.json();
  return (
    <main data-page="cache-timed">
      <p>This page was built from data request number <span data-n>{stamp.n}</span>.</p>
    </main>
  );
}

timed.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const number = (html) => Number(/data-n[^>]*>(\d+)</.exec(html)[1]);
const visit = async () => number(await (await fetch(base + '/cache/timed')).text());
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const early = [await visit(), await visit()];
await sleep(3500);
const later = [];
for (let i = 0; i < 6 && later.at(-1) !== 2; i++) {
  later.push(await visit());
  await sleep(300);
}
const hits = await (await fetch(data + '/_hits')).json();

console.log('two visits at once showed:', early.join(', '));
console.log('after 3.5 seconds the data had changed within 6 visits:', later.at(-1) === 2);
console.log('requests that reached the data server:', JSON.stringify(hits));

check('two visits inside the 2 seconds shared one answer', early, [1, 1]);
check('after the time was up the data was fetched again', later.at(-1), 2);
check('and that was one new request, not one per visit', hits, { '/stamp/timed': 2 });

app/_lib/report.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14import { unstable_cache } from 'next/cache';

// Counts how many times the function below really ran.
export const runs = { count: 0 };

// A function that is not a fetch (a database query, say), remembered by Next.js.
export const getReport = unstable_cache(
  async (id) => {
    runs.count += 1;
    return { id, title: `Report ${id}` };
  },
  ['report'],
  { revalidate: 3600, tags: ['report'] },
);

app/cache/unstable/page.js

1
2
3
4
5
6
7
8
9
10
11
12import { connection } from 'next/server';
import { getReport, runs } from '../../_lib/report.js';

export default async function Unstable() {
  await connection();
  const report = await getReport('weekly');
  return (
    <main data-page="cache-unstable" data-runs={runs.count}>
      <p>{report.title}</p>
    </main>
  );
}

unstable.mjs

1
2
3
4
5
6
7const base = process.env.BASE_URL;
const runs = async () => Number(/data-runs="(\d+)"/.exec(await (await fetch(base + '/cache/unstable')).text())[1]);

const seen = [await runs(), await runs(), await runs()];
console.log('times the function body had run after each of 3 visits:', seen.join(', '));

check('the function ran once and its answer was reused', seen, [1, 1, 1]);

at-build.mjs

1
2
3
4
5
6
7
8
9import { readFileSync } from 'node:fs';
const hits = await (await fetch(process.env.DATA_URL + '/_hits')).json();
const manifest = JSON.parse(readFileSync(process.env.APP_DIR + '/.next/prerender-manifest.json', 'utf8'));
console.log('requests the build made:', JSON.stringify({ static: hits['/stamp/static'], isr: hits['/stamp/isr'], default: hits['/stamp/default'] ?? 0 }));
console.log('prerender-manifest.json for /cache/isr:', JSON.stringify(manifest.routes['/cache/isr']));
check('the build fetched the data of a static page once', hits['/stamp/static'], 1);
check('and the data of a revalidate = 2 page once', hits['/stamp/isr'], 1);
check('a dynamic page fetched nothing at build time', hits['/stamp/default'], undefined);
check('revalidate = 2 is recorded as 2 seconds, and the entry may be kept for a year', [manifest.routes['/cache/isr'].initialRevalidateSeconds, manifest.routes['/cache/isr'].initialExpireSeconds], [2, 31536000]);

app/cache/static/page.js

1
2
3
4
5
6
7
8
9export default async function Static() {
  const res = await fetch(`${process.env.DATA_URL}/stamp/static`);
  const stamp = await res.json();
  return (
    <main data-page="cache-static">
      <p>This page was built from data request number <span data-n>{stamp.n}</span>.</p>
    </main>
  );
}

static.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const get = async (path) => {
  const res = await fetch(base + path);
  return { n: Number(/data-n[^>]*>(\d+)</.exec(await res.text())[1]), cache: res.headers.get('x-nextjs-cache') };
};
const visits = [await get('/cache/static'), await get('/cache/static'), await get('/cache/static')];
const hits = await (await fetch(data + '/_hits')).json();
console.log('three visits showed data request number:', visits.map((v) => v.n).join(', '));
console.log('x-nextjs-cache:', visits.map((v) => v.cache).join(', '));
console.log('requests that reached the data server:', JSON.stringify(hits));
check('every visit got the data fetched at build time', visits.map((v) => v.n), [1, 1, 1]);
check('no visit made a request', hits, {});
check('Next.js says the copy came from its own store', visits.map((v) => v.cache), ['HIT', 'HIT', 'HIT']);

app/cache/isr/page.js

1
2
3
4
5
6
7
8
9
10
11export const revalidate = 2;

export default async function Isr() {
  const res = await fetch(`${process.env.DATA_URL}/stamp/isr`);
  const stamp = await res.json();
  return (
    <main data-page="cache-isr">
      <p>This page was built from data request number <span data-n>{stamp.n}</span>.</p>
    </main>
  );
}

isr.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const get = async () => {
  const res = await fetch(base + '/cache/isr');
  return { n: Number(/data-n[^>]*>(\d+)</.exec(await res.text())[1]), cache: res.headers.get('x-nextjs-cache') };
};
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const untilNumber = async (wanted) => {
  const seen = [];
  for (let i = 0; i < 8 && seen.at(-1)?.n !== wanted; i++) { await sleep(300); seen.push(await get()); }
  return seen.at(-1);
};

await sleep(2500);
const stale = await get();
const fresh = await untilNumber(2);
const midway = await fetch(data + '/_hits').then((res) => res.json());
await sleep(3500);
const staleAgain = await get();
const freshAgain = await untilNumber(3);
const hits = await (await fetch(data + '/_hits')).json();

console.log('first visit, more than 2 seconds after the build:', JSON.stringify(stale));
console.log('a visit once the new copy was ready:', JSON.stringify(fresh));
console.log('requests that reached the data server by then:', JSON.stringify(midway));
console.log('first visit after waiting 3.5 seconds:', JSON.stringify(staleAgain));
console.log('a visit once the next copy was ready:', JSON.stringify(freshAgain));
console.log('requests that reached the data server in all:', JSON.stringify(hits));

check('the first visit got the copy made at build time, marked stale', [stale.n, stale.cache], [1, 'STALE']);
check('the next copy was made in the background, from one request', [fresh.n, midway], [2, { '/stamp/isr': 1 }]);
check('and is served as fresh', fresh.cache, 'HIT');
check('after the time was up again, the visit got the old copy first', [staleAgain.n, staleAgain.cache], [2, 'STALE']);
check('and the one after it the new one', [freshAgain.n, freshAgain.cache], [3, 'HIT']);
check('two requests in all, one per regeneration', hits, { '/stamp/isr': 2 });

app/tags/list/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { connection } from 'next/server';

export default async function List() {
  await connection();
  const res = await fetch(`${process.env.DATA_URL}/stamp/tagged`, {
    cache: 'force-cache',
    next: { tags: ['stamps'] },
  });
  const stamp = await res.json();
  return (
    <main data-page="tags-list">
      <p>Tagged data from request number <span data-n>{stamp.n}</span>.</p>
    </main>
  );
}

app/api/revalidate/route.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22import { revalidatePath, revalidateTag } from 'next/cache';

// Only fixed values are accepted: an endpoint that revalidates whatever it is told to is an
// invitation to flush the cache from outside.
export async function POST(request) {
  const url = new URL(request.url);
  const tag = url.searchParams.get('tag');
  const path = url.searchParams.get('path');
  if (tag === 'stamps') {
    revalidateTag('stamps', 'max');
    return Response.json({ revalidated: 'stamps', how: 'max' });
  }
  if (tag === 'stamps-expire') {
    revalidateTag('stamps');
    return Response.json({ revalidated: 'stamps', how: 'one argument' });
  }
  if (path === '/tags/path') {
    revalidatePath('/tags/path');
    return Response.json({ revalidated: path });
  }
  return Response.json({ error: 'unknown tag or path' }, { status: 400 });
}

tag.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const number = (html) => Number(/data-n[^>]*>(\d+)</.exec(html)[1]);
const visit = async () => number(await (await fetch(base + '/tags/list')).text());
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const before = [await visit(), await visit()];
const res = await fetch(base + '/api/revalidate?tag=stamps', { method: 'POST' });
const after = [];
for (let i = 0; i < 6 && after.at(-1) !== 2; i++) { after.push(await visit()); await sleep(300); }
const hits = await (await fetch(data + '/_hits')).json();

console.log('two visits:', before.join(', '));
console.log('POST /api/revalidate?tag=stamps ->', res.status, JSON.stringify(await res.json()));
console.log('visits after it:', after.join(', '));
console.log('requests that reached the data server:', JSON.stringify(hits));

check('the tagged data was fetched once and reused', before, [1, 1]);
check('the handler answered', res.status, 200);
check('the first visit after the call still got the old data', after[0], 1);
check('the data was fetched again, once', [after.at(-1), hits], [2, { '/stamp/tagged': 2 }]);

expire.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const number = (html) => Number(/data-n[^>]*>(\d+)</.exec(html)[1]);
const visit = async () => number(await (await fetch(base + '/tags/list')).text());

const before = await visit();
const res = await fetch(base + '/api/revalidate?tag=stamps-expire', { method: 'POST' });
const right = await visit();
const hits = await (await fetch(data + '/_hits')).json();

console.log('visit before:', before);
console.log('POST /api/revalidate?tag=stamps-expire ->', res.status, JSON.stringify(await res.json()));
console.log('the very next visit:', right);
console.log('requests that reached the data server:', JSON.stringify(hits));

check('the handler answered', res.status, 200);
check('the very next visit already had new data', right, before + 1);
check('after exactly one more request', hits, { '/stamp/tagged': 1 });

app/tags/path/page.js

1
2
3
4
5
6
7
8
9export default async function PathPage() {
  const res = await fetch(`${process.env.DATA_URL}/stamp/path`);
  const stamp = await res.json();
  return (
    <main data-page="tags-path">
      <p>Built from data request number <span data-n>{stamp.n}</span>.</p>
    </main>
  );
}

path.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const number = (html) => Number(/data-n[^>]*>(\d+)</.exec(html)[1]);
const visit = async () => number(await (await fetch(base + '/tags/path')).text());
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const before = [await visit(), await visit()];
const res = await fetch(base + '/api/revalidate?path=/tags/path', { method: 'POST' });
const after = [];
for (let i = 0; i < 6 && after.at(-1) !== 2; i++) { after.push(await visit()); await sleep(300); }
const hits = await (await fetch(data + '/_hits')).json();

console.log('two visits:', before.join(', '));
console.log('POST /api/revalidate?path=/tags/path ->', res.status, JSON.stringify(await res.json()));
console.log('visits after it:', after.join(', '));
console.log('requests that reached the data server:', JSON.stringify(hits));

check('the page built at build time was served', before, [1, 1]);
check('the handler answered', res.status, 200);
check('the first visit after the call already showed the page rendered again', after, [2]);
check('which took one request', hits, { '/stamp/path': 1 });

app/tags/actions.js

1
2
3
4
5
6'use server';
import { updateTag } from 'next/cache';

export async function expireStamp() {
  updateTag('action-stamps');
}

app/tags/action/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19import { connection } from 'next/server';
import { expireStamp } from '../actions.js';

export default async function ActionPage() {
  await connection();
  const res = await fetch(`${process.env.DATA_URL}/stamp/action`, {
    cache: 'force-cache',
    next: { tags: ['action-stamps'] },
  });
  const stamp = await res.json();
  return (
    <main data-page="tags-action">
      <p>Tagged data from request number <span data-n>{stamp.n}</span>.</p>
      <form action={expireStamp}>
        <button type="submit">Expire it</button>
      </form>
    </main>
  );
}

update-tag.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const number = (html) => Number(/data-n[^>]*>(\d+)</.exec(html)[1]);
const visit = async () => number(await (await fetch(base + '/tags/action')).text());

const page = await (await fetch(base + '/tags/action')).text();
const id = /name="(\$ACTION_ID_[0-9a-f]+)"/.exec(page)[1];
const form = new FormData();
form.append(id, '');
const posted = await fetch(base + '/tags/action', { method: 'POST', body: form, headers: { origin: base } });
const inResponse = number(await posted.text());
const next = [await visit(), await visit()];
const hits = await (await fetch(data + '/_hits')).json();

console.log('first visit:', number(page));
console.log('the response to the form post:', posted.status, 'data request number', inResponse);
console.log('the next two visits:', next.join(', '));
console.log('requests that reached the data server:', JSON.stringify(hits));

check('the page began with the first answer', number(page), 1);
check('the post succeeded', posted.status, 200);
check('the response to the post already held new data', inResponse, 2);
check('the visits after it showed data newer than that, and then kept it', next, [3, 3]);
check('three requests in all reached the data server', hits, { '/stamp/action': 3 });

next.config.mjs

1
2
3
4
5
6/** @type {import('next').NextConfig} */
const nextConfig = {
  // Turns on "use cache" and the prerender-everything-you-can model.
  cacheComponents: true,
};
export default nextConfig;

app/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28import { Suspense } from 'react';
import { connection } from 'next/server';
import { cacheLife, cacheTag } from 'next/cache';

async function Stamp() {
  'use cache';
  cacheLife('hours');
  cacheTag('cc-home');
  const res = await fetch(`${process.env.DATA_URL}/stamp/home`);
  const stamp = await res.json();
  return <p>Cached data from request number <span data-n>{stamp.n}</span>.</p>;
}

async function Visit() {
  await connection();
  return <p>This visit began at <span data-at>{Date.now()}</span>.</p>;
}

export default function Home() {
  return (
    <main data-page="cc-home">
      <Stamp />
      <Suspense fallback={<p data-fallback>Waiting for this visit...</p>}>
        <Visit />
      </Suspense>
    </main>
  );
}

app/args/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30import { Suspense } from 'react';
import { connection } from 'next/server';

async function lookup(id) {
  'use cache';
  const res = await fetch(`${process.env.DATA_URL}/stamp/${id}`);
  return res.json();
}

async function Lookups() {
  await connection();
  const first = await lookup('a');
  const again = await lookup('a');
  const other = await lookup('b');
  return (
    <p data-first={first.n} data-again={again.n} data-other={other.n}>
      a: {first.n}, a again: {again.n}, b: {other.n}
    </p>
  );
}

export default function Args() {
  return (
    <main data-page="cc-args">
      <Suspense fallback={<p>Looking up...</p>}>
        <Lookups />
      </Suspense>
    </main>
  );
}

at-build.mjs

1
2
3
4
5
6
7
8
9
10import { readFileSync } from 'node:fs';
const hits = await (await fetch(process.env.DATA_URL + '/_hits')).json();
const manifest = JSON.parse(readFileSync(process.env.APP_DIR + '/.next/prerender-manifest.json', 'utf8'));
console.log('requests the build made:', JSON.stringify(hits));
console.log('prerender-manifest.json for /:', JSON.stringify(manifest.routes['/']));
console.log('prerender-manifest.json for /args:', JSON.stringify(manifest.routes['/args']));
check('the build fetched the cached component data once', hits['/stamp/home'], 1);
check('and nothing behind connection()', [hits['/stamp/a'], hits['/stamp/b']], [undefined, undefined]);
check('/args is partly static too, with no lifetime of its own', [manifest.routes['/args'].renderingMode, manifest.routes['/args'].initialRevalidateSeconds], ['PARTIALLY_STATIC', false]);
check('the home page is partly static, kept for an hour and allowed to expire after a day', [manifest.routes['/'].renderingMode, manifest.routes['/'].initialRevalidateSeconds, manifest.routes['/'].initialExpireSeconds], ['PARTIALLY_STATIC', 3600, 86400]);

home.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const get = async () => {
  const html = await (await fetch(base + '/')).text();
  return { n: Number(/data-n[^>]*>(\d+)</.exec(html)[1]), at: Number(/data-at[^>]*>(\d+)</.exec(html)[1]), html };
};
const visits = [await get(), await get(), await get()];
const hits = await (await fetch(data + '/_hits')).json();
console.log('data request number in three visits:', visits.map((v) => v.n).join(', '));
console.log('the time of the visit was different each time:', new Set(visits.map((v) => v.at)).size === 3);
console.log('requests that reached the data server:', JSON.stringify(hits));
check('the cached part was the same in every visit', visits.map((v) => v.n), [1, 1, 1]);
check('the part behind connection() was rendered for each visit', new Set(visits.map((v) => v.at)).size, 3);
check('no visit asked the data server', hits, {});

args.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const get = async () => {
  const html = await (await fetch(base + '/args')).text();
  const pick = (name) => Number(new RegExp('data-' + name + '="(\\d+)"').exec(html)[1]);
  return [pick('first'), pick('again'), pick('other')];
};
const visits = [await get(), await get(), await get()];
const hits = await (await fetch(data + '/_hits')).json();
console.log('lookup("a"), lookup("a"), lookup("b") in three visits:', JSON.stringify(visits));
console.log('requests that reached the data server:', JSON.stringify(hits));
check('the same argument gave the same answer, every time', visits.map((v) => v[0] === v[1]), [true, true, true]);
check('each argument made one request in all three visits', hits, { '/stamp/a': 1, '/stamp/b': 1 });

app/api/expire/route.js

1
2
3
4
5
6import { revalidateTag } from 'next/cache';

export async function POST() {
  revalidateTag('cc-home', 'max');
  return Response.json({ revalidated: 'cc-home' });
}

tag.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const base = process.env.BASE_URL;
const data = process.env.DATA_URL;
const number = async () => Number(/data-n[^>]*>(\d+)</.exec(await (await fetch(base + '/')).text())[1]);
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const before = await number();
const res = await fetch(base + '/api/expire', { method: 'POST' });
const after = [];
for (let i = 0; i < 6 && after.at(-1) !== 2; i++) { after.push(await number()); await sleep(300); }
const hits = await (await fetch(data + '/_hits')).json();
console.log('before:', before, ' POST /api/expire ->', res.status);
console.log('visits after it:', after.join(', '));
console.log('requests that reached the data server:', JSON.stringify(hits));
check('the handler answered', res.status, 200);
check('the first visit after the call still got the old data', after[0], 1);
check('the cached component ran again, once', [after.at(-1), hits], [2, { '/stamp/home': 1 }]);