fix(pages): dynamic css missing style after client navigation (#72959)
> [!NOTE]
> This issue occurs only on:
> - Pages Router
> - Production
> - Webpack Build
### Why?
When client-side navigating from Page 1 to Page 2, where Page 1
**statically imports** CSS, whereas Page 2 **dynamically imports** CSS,
the expected style is missing at Page 2.
The root cause of the issue is the `mini-css-extract-plugin` (which
handles Production CSS) skipped injecting the stylesheet since the
`link` tag with the target `href` already existed. This is fine, but the
expected stylesheet is missing as Next.js removes "server-rendered"
stylesheets after the navigation.
### How?
Create a `dynamic-css-manifest` with the list of dynamic CSS files along
with the `react-loadables-manifest`. Then, pass it to the internal
`_document`'s `<Head>` component. During rendering the head, if the href
of the target CSS is included in the dynamic CSS files list, do not add
the `data-n-p` (attribute for server-rendered CSS) attribute. This is
possible because we do not "unload" the dynamic stylesheets during the
client navigation. Therefore, the result will be the same with removing
the current stylesheet and then dynamically loading the same stylesheet.
### Testing Plan
- Covers runtime `nodejs` and `edge`
- `next/dynamic`
- React `lazy`
- dynamic `import()`
Fixes #33286
Fixes #47655
Fixes #68328
Closes NDX-145
---------
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
next.js
3d82475d - fix(pages): dynamic css missing style after client navigation (#72959)
