mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Jiachi LiuandZack Tanner
8d18e0c719
For app page rendering on edge, the `AsyncLocalStorage` (ALS) should be bundled as same instance across layers. We're accessing the ALS in `next/dynamic` modules during SSR for preloading CSS chunks. There's a bug that we can't get the ALS store during SSR in edge, I digged into it and found the root cause is: We have both import paths: `module (rsc layer) -> request ALS (shared layer)` `module (ssr layer) -> request ALS (shared layer)` We expect the ALS to be the same module since we're using the same layer but found that they're treated as different modules due to applying another loader transform on ssr layer. They're resulted in the same `shared` layer, but with different resource queries. This PR excluded that transform so now they're identical across layers. For webpack, we aligned the loaders applying to the async local storage, so that they're resolved as the same module now. For turbopack, we leverage module transition, sort of creating a new `app-shared` layer for these modules, and apply the transition to all async local storage instances therefore the instances of them are only bundled once. To make the turbopack chanegs work, we change how the async local storage modules defined, separate the instance into a single file and mark it as "next-shared" layer with import: ``` any module -> async local storage --- use transition, specify "next-shared" layer ---> async local storage instance ``` Closes NEXT-3085
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
import { retry } from 'next-test-utils'
|
|
|
|
createNextDescribe(
|
|
'app dir - dynamic css',
|
|
{
|
|
files: __dirname,
|
|
skipDeployment: true,
|
|
},
|
|
({ next }) => {
|
|
it('should preload css of dynamic component during SSR', async () => {
|
|
const $ = await next.render$('/ssr')
|
|
const cssLinks = $('link[rel="stylesheet"]')
|
|
expect(cssLinks.attr('href')).toContain('.css')
|
|
})
|
|
|
|
it('should only apply corresponding css for page loaded that /ssr', async () => {
|
|
const browser = await next.browser('/ssr')
|
|
await retry(async () => {
|
|
expect(
|
|
await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('.text')).color`
|
|
)
|
|
).toBe('rgb(255, 0, 0)')
|
|
// Default border width, which is not effected by bar.css that is not loaded in /ssr
|
|
expect(
|
|
await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('.text')).borderWidth`
|
|
)
|
|
).toBe('0px')
|
|
})
|
|
})
|
|
|
|
it('should only apply corresponding css for page loaded in edge runtime', async () => {
|
|
const browser = await next.browser('/ssr/edge')
|
|
await retry(async () => {
|
|
expect(
|
|
await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('.text')).color`
|
|
)
|
|
).toBe('rgb(255, 0, 0)')
|
|
// Default border width, which is not effected by bar.css that is not loaded in /ssr
|
|
expect(
|
|
await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('.text')).borderWidth`
|
|
)
|
|
).toBe('0px')
|
|
})
|
|
})
|
|
|
|
it('should only apply corresponding css for page loaded that /another', async () => {
|
|
const browser = await next.browser('/another')
|
|
await retry(async () => {
|
|
expect(
|
|
await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('.text')).color`
|
|
)
|
|
).not.toBe('rgb(255, 0, 0)')
|
|
// Default border width, which is not effected by bar.css that is not loaded in /ssr
|
|
expect(
|
|
await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('.text')).borderWidth`
|
|
)
|
|
).toBe('1px')
|
|
})
|
|
})
|
|
|
|
it('should not throw with accessing to ALS in preload css', async () => {
|
|
const output = next.cliOutput
|
|
expect(output).not.toContain('was called outside a request scope')
|
|
})
|
|
}
|
|
)
|