Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

avoid loading the page loader chunk on initial page load #62269

Merged
merged 3 commits into from
Feb 21, 2024
Merged

avoid loading the page loader chunk on initial page load #62269

merged 3 commits into from
Feb 21, 2024
+34 −24

Conversation

sokra
Copy link
Member

@sokra sokra commented Feb 20, 2024 •
edited

What?

  • unnecessary request
  • removes a race condition with script loading

Closes PACK-2544

@ijjk ijjk added Turbopack Related to Turbopack with Next.js. created-by: Turbopack team PRs by the turbopack team type: next labels Feb 20, 2024
@ijjk
Copy link
Member

ijjk commented Feb 20, 2024 •
edited

Failing test suites

Commit: 2e030b7

TURBOPACK=1 pnpm test-dev test/e2e/app-dir/not-found-default/index.test.ts (turbopack)

  • app dir - not found with default 404 page > should render default 404 with root layout for non-existent page
Expand output

● app dir - not found with default 404 page › should render default 404 with root layout for non-existent page

expect(received).not.toContain(expected) // indexOf

Expected substring: not "/_error"
Received string:        "yarn run v1.22.19
$ /tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.bin/next --turbo
   ▲ Next.js 14.1.1-canary.67 (turbo)
   - Local:        http://localhost:42189

Creating turbopack project {
  dir: '/tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207',
  testMode: true
}
 ✓ Ready in 1786ms
 ○ Compiling / ...
 ✓ Compiled / in 2.5s
Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

  36 |         const cliOutput = next.cliOutput
  37 |         expect(cliOutput).toContain('/not-found')
> 38 |         expect(cliOutput).not.toContain('/_error')
     |                               ^
  39 |       }
  40 |     })
  41 |

  at handleRequest (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/router-server.js:320:17)
  at async requestHandlerImpl (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/router-server.js:339:13)
  at async Server.requestListener (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/start-server.js:140:13) {
    code: 'ERR_HTTP_HEADERS_SENT'
  }
  Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
  at handleRequest (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/router-server.js:320:17)
  at async requestHandlerImpl (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/router-server.js:339:13)
  at async Server.requestListener (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/start-server.js:140:13) {
    code: 'ERR_HTTP_HEADERS_SENT'
  }
  Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
  at handleRequest (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/router-server.js:320:17)
  at async requestHandlerImpl (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/router-server.js:339:13)
  at async Server.requestListener (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/start-server.js:140:13) {
    code: 'ERR_HTTP_HEADERS_SENT'
  }
  Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
  at handleRequest (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/router-server.js:320:17)
  at async requestHandlerImpl (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/router-server.js:339:13)
  at async Server.requestListener (../../../../../../tmp/next-install-5907f0104af0c1fe80f72540a73647c08fd20feb9c62b57e803cf0a2e718e207/node_modules/.pnpm/file+..+next-repo-48d1493511d82e9f38e8870f5fca18e3bab29059b3753222fc95e7fe0a04350d+packages+n_lgmzuaxdht6wtzijm2cozfgpfu/node_modules/next/dist/server/lib/start-server.js:140:13) {
    code: 'ERR_HTTP_HEADERS_SENT'
  }
   ○ Compiling /_error ...
   ✓ Compiled /_error in 1257ms
   ✓ Compiled /not-found in 257ms
  "
  at Object.toContain (e2e/app-dir/not-found-default/index.test.ts:38:31)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/app-dir/interception-route-prefetch-cache/interception-route-prefetch-cache.test.ts (PPR)

  • interception-route-prefetch-cache > runtime = edge > should render the correct interception when two distinct layouts share the same path structure
Expand output

● interception-route-prefetch-cache › runtime = edge › should render the correct interception when two distinct layouts share the same path structure

thrown: "Exceeded timeout of 120000 ms for a test.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

   6 | describe('interception-route-prefetch-cache', () => {
   7 |   function runTests({ next }: ReturnType<typeof nextTestSetup>) {
>  8 |     it('should render the correct interception when two distinct layouts share the same path structure', async () => {
     |     ^
   9 |       const browser = await next.browser('/')
  10 |
  11 |       await browser.elementByCss('[href="/foo"]').click()

  at it (e2e/app-dir/interception-route-prefetch-cache/interception-route-prefetch-cache.test.ts:8:5)
  at runTests (e2e/app-dir/interception-route-prefetch-cache/interception-route-prefetch-cache.test.ts:91:5)
  at describe (e2e/app-dir/interception-route-prefetch-cache/interception-route-prefetch-cache.test.ts:90:3)
  at Object.describe (e2e/app-dir/interception-route-prefetch-cache/interception-route-prefetch-cache.test.ts:6:1)

Read more about building and testing Next.js in contributing.md.

@ijjk
Copy link
Member

ijjk commented Feb 20, 2024 •
edited

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
buildDuration 20.3s 14.4s N/A
buildDurationCached 8.8s 8.2s N/A
nodeModulesSize 196 MB 197 MB ⚠️ +380 kB
nextStartRea..uration (ms) 405ms 408ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
1068-HASH.js gzip 30.3 kB 30.3 kB N/A
3f784ff6-HASH.js gzip 53.5 kB 53.5 kB N/A
4944-HASH.js gzip 5.04 kB 5.03 kB N/A
8423.HASH.js gzip 181 B 181 B ✓
framework-HASH.js gzip 45.2 kB 45.2 kB ✓
main-app-HASH.js gzip 243 B 242 B N/A
main-HASH.js gzip 32.2 kB 32.1 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB ✓
Overall change 47.1 kB 47.1 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
polyfills-HASH.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
_app-HASH.js gzip 196 B 196 B ✓
_error-HASH.js gzip 184 B 183 B N/A
amp-HASH.js gzip 503 B 504 B N/A
css-HASH.js gzip 323 B 324 B N/A
dynamic-HASH.js gzip 2.5 kB 2.51 kB N/A
edge-ssr-HASH.js gzip 258 B 259 B N/A
head-HASH.js gzip 353 B 351 B N/A
hooks-HASH.js gzip 370 B 370 B ✓
image-HASH.js gzip 4.21 kB 4.2 kB N/A
index-HASH.js gzip 259 B 259 B ✓
link-HASH.js gzip 2.68 kB 2.67 kB N/A
routerDirect..HASH.js gzip 313 B 314 B N/A
script-HASH.js gzip 386 B 385 B N/A
withRouter-HASH.js gzip 309 B 311 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 931 B 931 B ✓
Client Build Manifests
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
_buildManifest.js gzip 485 B 484 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
index.html gzip 529 B 528 B N/A
link.html gzip 540 B 540 B ✓
withRouter.html gzip 524 B 522 B N/A
Overall change 540 B 540 B ✓
Edge SSR bundle Size
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
edge-ssr.js gzip 94.8 kB 2.29 kB N/A
page.js gzip 152 kB 2.98 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
middleware-b..fest.js gzip 628 B 628 B ✓
middleware-r..fest.js gzip 151 B 151 B ✓
middleware.js gzip 44.9 kB 465 B N/A
edge-runtime..pack.js gzip 1.94 kB 839 B N/A
Overall change 779 B 779 B ✓
Next Runtimes
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
app-page-exp...dev.js gzip 167 kB 166 kB N/A
app-page-exp..prod.js gzip 96.2 kB 95.9 kB N/A
app-page-tur..prod.js gzip 97.9 kB 97.6 kB N/A
app-page-tur..prod.js gzip 92.4 kB 92 kB N/A
app-page.run...dev.js gzip 136 kB 136 kB N/A
app-page.run..prod.js gzip 90.9 kB 90.6 kB N/A
app-route-ex...dev.js gzip 22.1 kB 22 kB N/A
app-route-ex..prod.js gzip 14.9 kB 14.9 kB N/A
app-route-tu..prod.js gzip 14.9 kB 14.9 kB N/A
app-route-tu..prod.js gzip 14.7 kB 14.6 kB N/A
app-route.ru...dev.js gzip 21.8 kB 21.7 kB N/A
app-route.ru..prod.js gzip 14.7 kB 14.6 kB N/A
pages-api-tu..prod.js gzip 9.49 kB 9.47 kB N/A
pages-api.ru...dev.js gzip 9.76 kB 9.74 kB N/A
pages-api.ru..prod.js gzip 9.48 kB 9.47 kB N/A
pages-turbo...prod.js gzip 22.3 kB 22.1 kB N/A
pages.runtim...dev.js gzip 23 kB 22.8 kB N/A
pages.runtim..prod.js gzip 22.3 kB 22.1 kB N/A
server.runti..prod.js gzip 50.3 kB 50.2 kB N/A
Overall change 0 B 0 B ✓
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js sokra/no-page-loader-in-initial-load Change
0.pack gzip 1.55 MB 1.49 MB N/A
index.pack gzip 104 kB 104 kB ⚠️ +219 B
Overall change 104 kB 104 kB ⚠️ +219 B
Diff details
Diff for page.js 
failed to diff
Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for 1068-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js 
failed to diff
Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js 
failed to diff
Diff for app-page.runtime.prod.js

Diff too large to display

Diff for app-route-ex..ntime.dev.js

Diff too large to display

Diff for app-route-ex..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route-tu..time.prod.js

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

Diff for app-route.ru..time.prod.js

Diff too large to display

Diff for pages-api-tu..time.prod.js

Diff too large to display

Diff for pages-api.runtime.dev.js

Diff too large to display

Diff for pages-api.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 2e030b7

@sokra sokra marked this pull request as ready for review February 20, 2024 10:09
@sokra sokra enabled auto-merge (squash) February 20, 2024 10:51
@sokra sokra disabled auto-merge February 21, 2024 20:49
@sokra sokra merged commit e7ff4c0 into canary Feb 21, 2024
68 of 70 checks passed
@sokra sokra deleted the sokra/no-page-loader-in-initial-load branch February 21, 2024 20:49
@github-actions github-actions bot added the locked label Mar 7, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 7, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@timneutkens timneutkens timneutkens approved these changes

@ForsakenHarmony ForsakenHarmony ForsakenHarmony approved these changes

@ijjk ijjk Awaiting requested review from ijjk ijjk is a code owner

@shuding shuding Awaiting requested review from shuding shuding is a code owner

@huozhi huozhi Awaiting requested review from huozhi huozhi is a code owner

@feedthejim feedthejim Awaiting requested review from feedthejim feedthejim is a code owner

@ztanner ztanner Awaiting requested review from ztanner ztanner is a code owner

@wyattjoh wyattjoh Awaiting requested review from wyattjoh wyattjoh is a code owner

Assignees
No one assigned
Labels
created-by: Turbopack team PRs by the turbopack team locked Turbopack Related to Turbopack with Next.js. type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@sokra @ijjk @timneutkens @ForsakenHarmony