https://github.com/devjiwonchoi/repro-next-dynamic-css-client-navigation
https://github.com/devjiwonchoi/repro-next-dynamic-css-client-navigation
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/devjiwonchoi/repro-next-dynamic-css-client-navigation
- Owner: devjiwonchoi
- Created: 2024-11-05T09:48:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-06T12:51:00.000Z (over 1 year ago)
- Last Synced: 2025-03-25T02:12:23.043Z (over 1 year ago)
- Language: TypeScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How to Reproduce
> [!NOTE]
> This issue is only reproducible in the production environment.
```bash
pnpm install
```
```bash
pnpm build && pnpm start
```
## Problem #1 (Dynamic CSS Leaking)
1. Go to `http://localhost:3000/next-dynamic`.
2. The `Red Button` is red.
3. Open the Browser Devtools `Elements` tab.
4. `` contains a `link[rel="stylesheet"]`.
4. Click on `/no-red-button`.
5. You will see the text `Stylesheet is leaked: true`.
6. `` still contains a `link[rel="stylesheet"]`.
## Problem #2 (Static CSS Page → Dynamic CSS Page Style Miss)
1. Go to `http://localhost:3000`.
2. The `Red Button` is red.
3. Open the Browser Devtools `Elements` tab.
4. `` contains a `link[rel="stylesheet"]` with `data-n-p` attribute.
5. Click on `/next-dynamic`.
6. The `Red Button` is gray.
7. `` no longer contains `link[rel="stylesheet"]`.
> **Note:** The `data-n-p` attribute means that the stylesheet was server rendered.