Simplify static + dynamic HTML generation #28793

devknoll · 2021-09-04T19:29:47Z

Changes requireStaticHTML to supportsDynamicHTML.

This simplifies things a bit by making static HTML (the behavior until React 18 SSR) the default. Instead, dynamic HTML is the exception, and callers (not renderToHTML) should carefully decide whether dynamic HTML makes sense for the request they are trying to render.

I also added some comments about this, and tweaked next-server.ts to disable dynamic HTML earlier when necessary and ensure that cache/coalescing keys aren't generated for such requests.

ijjk · 2021-09-04T19:43:14Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
buildDuration	15.2s	15.7s	⚠️ +535ms
buildDurationCached	3.7s	3.9s	⚠️ +127ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +1.82 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.193	3.274	⚠️ +0.08
/ avg req/sec	782.87	763.54	⚠️ -19.33
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.872	1.846	-0.03
/error-in-render avg req/sec	1335.39	1354.05	+18.66

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.3 kB	23.3 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	67.2 kB	67.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
_app-HASH.js gzip	979 B	979 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.14 kB	4.14 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	318 B	318 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
_buildManifest.js gzip	492 B	492 B	✓
Overall change	492 B	492 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
index.html gzip	539 B	539 B	✓
link.html gzip	553 B	553 B	✓
withRouter.html gzip	533 B	533 B	✓
Overall change	1.63 kB	1.63 kB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
buildDuration	12s	12.5s	⚠️ +482ms
buildDurationCached	5.1s	4.9s	-117ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +1.82 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.178	3.118	-0.06
/ avg req/sec	786.65	801.79	+15.14
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.96	1.89	-0.07
/error-in-render avg req/sec	1275.77	1322.43	+46.66

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
16.HASH.js gzip	186 B	186 B	✓
677f882d2ed8..HASH.js gzip	14.1 kB	14.1 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.7 kB	10.7 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	68.1 kB	68.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
_app-HASH.js gzip	964 B	964 B	✓
_error-HASH.js gzip	3.8 kB	3.8 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.87 kB	2.87 kB	✓
head-HASH.js gzip	3.06 kB	3.06 kB	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	3.03 kB	3.03 kB	✓
withRouter-HASH.js gzip	295 B	295 B	✓
30809af5c834..565.css gzip	125 B	125 B	✓
Overall change	18.1 kB	18.1 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
_buildManifest.js gzip	500 B	500 B	✓
Overall change	500 B	500 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js x-simplify-static-result	Change
index.html gzip	584 B	584 B	✓
link.html gzip	597 B	597 B	✓
withRouter.html gzip	577 B	577 B	✓
Overall change	1.76 kB	1.76 kB	✓

Commit: fb70d92

ijjk · 2021-09-04T19:55:24Z

Failing test suites

Commit: fb70d92

test/integration/required-server-files/test/index.test.js

Required Server Files > should output required-server-files manifest correctly
Required Server Files > should render SSR page correctly
Required Server Files > should render dynamic SSR page correctly
Required Server Files > should render fallback page correctly
Required Server Files > should render SSR page correctly with x-matched-path
Required Server Files > should render dynamic SSR page correctly with x-matched-path
Required Server Files > should render fallback page correctly with x-matched-path and routes-matches
Required Server Files > should return data correctly with x-matched-path
Required Server Files > should render fallback optional catch-all route correctly with x-matched-path and routes-matches
Required Server Files > should return data correctly with x-matched-path for optional catch-all route
Required Server Files > should not apply trailingSlash redirect
Required Server Files > should normalize catch-all rewrite query values correctly
Required Server Files > should bubble error correctly for gip page
Required Server Files > should bubble error correctly for gssp page
Required Server Files > should bubble error correctly for gsp page
Required Server Files > should bubble error correctly for API page
Required Server Files > should normalize optional values correctly for SSP page
Required Server Files > should normalize optional values correctly for SSG page
Required Server Files > should normalize optional values correctly for SSG page with encoded slash
Required Server Files > should normalize optional values correctly for API page
Required Server Files > should match the index page correctly
Required Server Files > should match the root dyanmic page correctly

Expand output

● Required Server Files › should output required-server-files manifest correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render SSR page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render dynamic SSR page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render fallback page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render SSR page correctly with x-matched-path

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render dynamic SSR page correctly with x-matched-path

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render fallback page correctly with x-matched-path and routes-matches

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should return data correctly with x-matched-path

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render fallback optional catch-all route correctly with x-matched-path and routes-matches

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should return data correctly with x-matched-path for optional catch-all route

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should not apply trailingSlash redirect

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize catch-all rewrite query values correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should bubble error correctly for gip page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should bubble error correctly for gssp page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should bubble error correctly for gsp page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should bubble error correctly for API page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize optional values correctly for SSP page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize optional values correctly for SSG page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize optional values correctly for SSG page with encoded slash

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize optional values correctly for API page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should match the index page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should match the root dyanmic page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

packages/next/server/next-server.ts

Tweak dynamic HTML generation

fb70d92

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: next labels Sep 4, 2021

devknoll marked this pull request as ready for review September 4, 2021 20:12

devknoll requested review from huozhi, ijjk, padmaia, shuding, styfle and timneutkens as code owners September 4, 2021 20:12

shuding approved these changes Sep 4, 2021

View reviewed changes

huozhi reviewed Sep 5, 2021

View reviewed changes

packages/next/server/next-server.ts Show resolved Hide resolved

huozhi approved these changes Sep 5, 2021

View reviewed changes

timneutkens merged commit eab3db2 into vercel:canary Sep 6, 2021

timneutkens deleted the x-simplify-static-result branch September 6, 2021 10:23

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simplify static + dynamic HTML generation #28793

Simplify static + dynamic HTML generation #28793

devknoll commented Sep 4, 2021

ijjk commented Sep 4, 2021

ijjk commented Sep 4, 2021

Simplify static + dynamic HTML generation #28793

Simplify static + dynamic HTML generation #28793

Conversation

devknoll commented Sep 4, 2021

ijjk commented Sep 4, 2021

Stats from current PR

ijjk commented Sep 4, 2021

Failing test suites