Components all 5 written

app/library/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import { getShelf } from '../_lib/shelf.js';

export default async function Library() {
  const shelf = await getShelf();
  return (
    <main data-page="library">
      <h1>Library</h1>
      <ul>
        {shelf.map((book) => (
          <li key={book.title}>
            {book.title}, shelved {book.shelved}
          </li>
        ))}
      </ul>
    </main>
  );
}

app/_lib/shelf.js

1
2
3
4
5
6
7
8
9import 'server-only';
import { readFile } from 'node:fs/promises';
import { join } from 'node:path';

export async function getShelf() {
  const text = await readFile(join(process.cwd(), 'data', 'shelf.json'), 'utf8');
  // `note` is data the page has, and chooses not to render.
  return JSON.parse(text).map((book) => ({ ...book, note: 'internal-note-7c1e4d' }));
}

server-component.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
25import { existsSync, readdirSync, readFileSync } from 'node:fs';

const root = process.env.APP_DIR + '/.next';
const html = await (await fetch(process.env.BASE_URL + '/library')).text();

const walk = (dir) =>
  readdirSync(dir, { withFileTypes: true }).flatMap((e) => (e.isDirectory() ? walk(dir + '/' + e.name) : [dir + '/' + e.name]));
const countIn = (files, text) => files.filter((f) => readFileSync(f, 'utf8').includes(text)).length;
const client = walk(root + '/static/chunks').filter((f) => f.endsWith('.js'));
const server = walk(root + '/server').filter((f) => /\.(js|html)$/.test(f));
const manifest = readFileSync(root + '/server/app/library/page_client-reference-manifest.js', 'utf8');
const listed = [...manifest.matchAll(/"\[project\]\/(app\/[^"]+)":\{"id"/g)].map((m) => m[1]);

console.log(html.match(/<ul>.*?<\/ul>/)[0].replace(/<!-- -->/g, ''));
console.log('the note is in the HTML:', html.includes('internal-note-7c1e4d'));
console.log('files under .next/server holding the note:', countIn(server, 'internal-note-7c1e4d') > 0);
console.log('files under .next/static/chunks holding it:', countIn(client, 'internal-note-7c1e4d'));

check('the data read from disk is in the HTML', ['Middlemarch', 'Dracula', 'Persuasion', '2024-05-30'].map((s) => html.includes(s)), [true, true, true, true]);
check('a field the component did not render is not in the HTML', html.includes('internal-note-7c1e4d'), false);
check('the code that holds it is in the server build', countIn(server, 'internal-note-7c1e4d') > 0, true);
check('and in no file the browser downloads', countIn(client, 'internal-note-7c1e4d'), 0);
check('neither is the page itself', countIn(client, 'shelved'), 0);
check('the page needs no client module of the project', listed, []);
check('server-only is not a folder in node_modules, and the build passed anyway', existsSync(process.env.APP_DIR + '/node_modules/server-only'), false);

app/counter/page.js

1
2
3
4
5
6
7
8
9
10import Counter from './Counter';

export default function CounterPage() {
  return (
    <main data-page="counter">
      <h1>Counter</h1>
      <Counter label="Copies" start={3} tags={['fiction', 'classic']} />
    </main>
  );
}

app/counter/Counter.js

1
2
3
4
5
6
7
8
9
10
11
12
13'use client';
import { useState } from 'react';
import { describe } from './describe.js';

export default function Counter({ label, start, tags }) {
  const [count, setCount] = useState(start);
  return (
    <p data-counter>
      {label}: <output>{count}</output> ({tags.join(', ')}){' '}
      <button onClick={() => setCount(count + 1)}>{describe(count)}</button>
    </p>
  );
}

app/counter/describe.js

1
2
3
4// No "use client" here. It is in the browser's code because a client component imports it.
export function describe(count) {
  return count === 1 ? 'add (describe-marker-2b9f, 1 copy)' : `add (describe-marker-2b9f, ${count} copies)`;
}

client-component.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22import { readdirSync, readFileSync } from 'node:fs';

const root = process.env.APP_DIR + '/.next';
const html = await (await fetch(process.env.BASE_URL + '/counter')).text();
/* The payload is a list of JSON string pieces inside script tags. */
const payload = [...html.matchAll(/self\.__next_f\.push\(\[1,("(?:[^"\\]|\\.)*")\]\)/g)].map((m) => JSON.parse(m[1])).join('');

const manifest = readFileSync(root + '/server/app/counter/page_client-reference-manifest.js', 'utf8');
const listed = [...manifest.matchAll(/"\[project\]\/(app\/[^"]+)":\{"id"/g)].map((m) => m[1]);
const chunks = readdirSync(root + '/static/chunks').filter((f) => f.endsWith('.js'));
const holding = (text) => chunks.filter((f) => readFileSync(root + '/static/chunks/' + f, 'utf8').includes(text)).length;

console.log('the server rendered:', html.match(/<output>.*?<\/output>/)[0]);
console.log('props in the payload:', payload.match(/\{"label":[^}]*\}/)[0]);
console.log('client modules of the project, per the manifest:', listed.join(' '));
console.log('files under .next/static/chunks that hold describe.js:', holding('describe-marker-2b9f'));

check('the HTML already holds the starting state', html.includes('<output>3</output>'), true);
check('the props travel as JSON in the payload', payload.includes('{"label":"Copies","start":3,"tags":["fiction","classic"]}'), true);
check('the manifest names the marked file and nothing else of the project', listed, ['app/counter/Counter.js']);
check('the unmarked module it imports is not listed', listed.includes('app/counter/describe.js'), false);
check('but its code was shipped to the browser with Counter', holding('describe-marker-2b9f'), 1);

app/studio/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import Collapsible from './Collapsible';
import ServerNote from './ServerNote';
import { ThemeBadge } from './ThemeProvider';

export default function Studio() {
  return (
    <main data-page="studio">
      <h1>Studio</h1>
      <ThemeBadge />
      <Collapsible title="Notes">
        <ServerNote />
      </Collapsible>
    </main>
  );
}

app/studio/Collapsible.js

1
2
3
4
5
6
7
8
9
10
11
12'use client';
import { useState } from 'react';

export default function Collapsible({ title, children }) {
  const [open, setOpen] = useState(true);
  return (
    <section data-collapsible>
      <button onClick={() => setOpen(!open)}>{title}</button>
      {open ? children : null}
    </section>
  );
}

app/studio/ServerNote.js

1
2
3
4// A server component: no directive, so nothing here is sent to the browser as code.
export default function ServerNote() {
  return <p data-server-note>server-child-marker-4e7a, rendered on the server</p>;
}

children.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import { readdirSync, readFileSync } from 'node:fs';

const root = process.env.APP_DIR + '/.next';
const html = await (await fetch(process.env.BASE_URL + '/studio')).text();
const manifest = readFileSync(root + '/server/app/studio/page_client-reference-manifest.js', 'utf8');
const listed = [...manifest.matchAll(/"\[project\]\/(app\/[^"]+)":\{"id"/g)].map((m) => m[1]).sort();
const chunks = readdirSync(root + '/static/chunks').filter((f) => f.endsWith('.js'));
const holding = (text) => chunks.filter((f) => readFileSync(root + '/static/chunks/' + f, 'utf8').includes(text)).length;

console.log(html.match(/<section data-collapsible.*?<\/section>/)[0]);
console.log('client modules of the project:', listed.join(' '));
console.log('browser files holding the server child:', holding('server-child-marker-4e7a'));

check('the server child is inside the client component in the HTML', html.includes('<section data-collapsible="true"><button>Notes</button><p data-server-note="true">server-child-marker-4e7a, rendered on the server</p></section>'), true);
check('the client modules of the page are the two marked files', listed, ['app/studio/Collapsible.js', 'app/studio/ThemeProvider.js']);
check('the server component is not one of them', listed.includes('app/studio/ServerNote.js'), false);
check('and its code is in no file the browser downloads', holding('server-child-marker-4e7a'), 0);

app/studio/layout.js

1
2
3
4
5import ThemeProvider from './ThemeProvider';

export default function StudioLayout({ children }) {
  return <ThemeProvider theme="dark">{children}</ThemeProvider>;
}

app/studio/ThemeProvider.js

1
2
3
4
5
6
7
8
9
10
11
12
13'use client';
import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

export default function ThemeProvider({ theme, children }) {
  return <ThemeContext value={theme}>{children}</ThemeContext>;
}

export function ThemeBadge() {
  const theme = useContext(ThemeContext);
  return <span data-theme={theme}>theme: {theme}</span>;
}

provider.mjs

1
2
3
4
5
6
7const html = await (await fetch(process.env.BASE_URL + '/studio')).text();
const badge = html.match(/<span data-theme="[^"]*">.*?<\/span>/)[0].replace(/<!-- -->/g, '');

console.log(badge);

check('the badge got the value the provider was given', html.includes('<span data-theme="dark">'), true);
check('not the default from createContext', html.includes('data-theme="light"'), false);

prerendered.mjs

1
2
3
4
5
6
7import { readFileSync } from 'node:fs';

const manifest = JSON.parse(readFileSync(process.env.APP_DIR + '/.next/prerender-manifest.json', 'utf8'));
const clocks = Object.keys(manifest.routes).filter((route) => route.startsWith('/clock/'));
console.log('prerendered clock routes:', clocks.join(' '));

check('only the static clock was prerendered', clocks, ['/clock/static']);

app/clock/static/page.js

1
2
3export default function StaticClock() {
  return <main data-page="clock-static"><p data-at={Date.now()}>rendered at {Date.now()}</p></main>;
}

app/clock/dynamic/page.js

1
2
3
4
5export const dynamic = 'force-dynamic';

export default function DynamicClock() {
  return <main data-page="clock-dynamic"><p data-at={Date.now()}>rendered at {Date.now()}</p></main>;
}

app/clock/cookies/page.js

1
2
3
4
5
6import { cookies } from 'next/headers';

export default async function CookieClock() {
  const jar = await cookies();
  return <main data-page="clock-cookies"><p data-at={Date.now()}>{jar.size} cookie(s), rendered at {Date.now()}</p></main>;
}

app/clock/search/page.js

1
2
3
4export default async function SearchClock({ searchParams }) {
  const query = await searchParams;
  return <main data-page="clock-search"><p data-at={Date.now()}>{Object.keys(query).length} parameter(s), rendered at {Date.now()}</p></main>;
}

app/clock/connection/page.js

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

export default async function ConnectionClock() {
  await connection();
  return <main data-page="clock-connection"><p data-at={Date.now()}>rendered at {Date.now()}</p></main>;
}

clocks.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
29const base = process.env.BASE_URL;
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function twice(path) {
  const stamps = [];
  let first;
  for (let i = 0; i < 2; i++) {
    const res = await fetch(base + path);
    const html = await res.text();
    stamps.push(/data-at="(\d+)"/.exec(html)[1]);
    first ??= res;
    await sleep(30);
  }
  return { same: stamps[0] === stamps[1], cache: first.headers.get('cache-control'), hit: first.headers.get('x-nextjs-cache') };
}

const DYNAMIC = 'private, no-cache, no-store, max-age=0, must-revalidate';
const results = {};
for (const path of ['/clock/static', '/clock/dynamic', '/clock/cookies', '/clock/search', '/clock/connection']) {
  results[path] = await twice(path);
  console.log(path.padEnd(18), 'same time twice:', String(results[path].same).padEnd(5), 'cache-control:', results[path].cache);
}

check('the static page shows the build time on every request', results['/clock/static'].same, true);
check('and is served as cacheable for a year', [results['/clock/static'].cache, results['/clock/static'].hit], ['s-maxage=31536000', 'HIT']);
for (const path of ['/clock/dynamic', '/clock/cookies', '/clock/search', '/clock/connection']) {
  check(path + ' renders again on each request', results[path].same, false);
  check(path + ' is sent with no-store headers and no cache marker', [results[path].cache, results[path].hit], [DYNAMIC, null]);
}

app/streaming/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21import { Suspense } from 'react';

export const dynamic = 'force-dynamic';

async function Comments() {
  const res = await fetch(`${process.env.DATA_URL}/slow?ms=1000&part=comments`);
  const { waited } = await res.json();
  return <p data-part="comments">Comments arrived after {waited} ms.</p>;
}

export default function Streaming() {
  return (
    <main data-page="streaming">
      <h1>Streaming</h1>
      <p data-part="shell">This part does not wait for anything.</p>
      <Suspense fallback={<p data-part="fallback">Loading comments...</p>}>
        <Comments />
      </Suspense>
    </main>
  );
}

app/streaming/blocking/page.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17export const dynamic = 'force-dynamic';

async function Comments() {
  const res = await fetch(`${process.env.DATA_URL}/slow?ms=1000&part=blocking`);
  const { waited } = await res.json();
  return <p data-part="comments">Comments arrived after {waited} ms.</p>;
}

export default function Blocking() {
  return (
    <main data-page="blocking">
      <h1>Blocking</h1>
      <p data-part="shell">This part has to wait for the comments.</p>
      <Comments />
    </main>
  );
}

streams.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
35
36
37
38
39
40const base = process.env.BASE_URL;

async function read(path) {
  const started = performance.now();
  const res = await fetch(base + path);
  const headersAt = performance.now() - started;
  const reader = res.body.getReader();
  const decoder = new TextDecoder();
  const chunks = [];
  for (;;) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push({ at: performance.now() - started, text: decoder.decode(value, { stream: true }) });
  }
  return { res, headersAt, chunks, all: chunks.map((c) => c.text).join('') };
}

const streamed = await read('/streaming');
const blocking = await read('/streaming/blocking');

const commentsAt = (r) => r.chunks.findIndex((c) => c.text.includes('Comments arrived'));
const gap = (r) => r.chunks[commentsAt(r)].at - r.chunks[0].at;
const first = streamed.chunks[0].text;

console.log('with Suspense:');
console.log('  first piece has the shell and the fallback:', first.includes('data-part="shell"') && first.includes('Loading comments...'));
console.log('  first piece has the comments:              ', first.includes('Comments arrived'));
console.log('  the comments came more than 700 ms after the first piece:', gap(streamed) > 700);
console.log('without Suspense:');
console.log('  the response started more than 700 ms in:', blocking.headersAt > 700);
console.log('  first piece has the comments:            ', blocking.chunks[0].text.includes('Comments arrived'));

check('both responses are sent in pieces', [streamed.res.headers.get('transfer-encoding'), blocking.res.headers.get('transfer-encoding')], ['chunked', 'chunked']);
check('with Suspense, the first piece holds the shell and the fallback', [first.includes('data-part="shell"'), first.includes('Loading comments...')], [true, true]);
check('and not the comments', first.includes('Comments arrived'), false);
check('the comments arrive in a later piece', commentsAt(streamed) > 0, true);
check('and they come more than 700 ms after the first piece', gap(streamed) > 700, true);
check('without Suspense, nothing is sent until the data is ready', blocking.headersAt > 700, true);
check('and the first piece already holds the comments', blocking.chunks[0].text.includes('Comments arrived'), true);
check('no boundary was needed there', [blocking.all.includes('id="B:0"'), blocking.all.includes('$RC(')], [false, false]);

swap.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14const html = await (await fetch(process.env.BASE_URL + '/streaming')).text();

const placeholder = html.match(/<!--\$\?--><template id="B:0"><\/template>.*?<!--\/\$-->/)[0];
const content = html.match(/<div hidden id="S:0">.*?<\/div>/)[0];
const swap = html.match(/\$RC\("B:0","S:0"\)/)[0];

console.log(placeholder);
console.log(content);
console.log(swap);

check('the fallback sits where the boundary is, next to a marker for it', placeholder, '<!--$?--><template id="B:0"></template><p data-part="fallback">Loading comments...</p><!--/$-->');
check('the finished content arrives hidden, with a name that pairs with the marker', content.includes('Comments arrived after'), true);
check('and a call names both', swap, '$RC("B:0","S:0")');
check('the content comes after the fallback in the document', html.indexOf('id="S:0"') > html.indexOf('id="B:0"'), true);