https://github.com/katt/nextjs-layout-page-coupling
https://github.com/katt/nextjs-layout-page-coupling
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/katt/nextjs-layout-page-coupling
- Owner: KATT
- Created: 2024-06-14T13:53:51.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-14T14:27:05.000Z (about 2 years ago)
- Last Synced: 2024-10-05T16:42:17.361Z (over 1 year ago)
- Language: JavaScript
- Size: 151 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Demos recompilation of of `page.js` being slow due to `layout.js` being complex
In the layout here, we have a loop that blocks the event loop for 10s:
https://github.com/KATT/nextjs-layout-page-coupling/blob/5eaecca1a0b96bfb7e59b9cc57c36c6a4728f690/app/layout.js#L6-L9
The page itself is dead simple, but changing it gets punished by the layout being complex.
https://github.com/KATT/nextjs-layout-page-coupling/blob/5eaecca1a0b96bfb7e59b9cc57c36c6a4728f690/app/page.js#L1-L3
This isn't a big problem itself - who writes silly code like that, right? - Well, the issue is exasperated by the dev server being very slow on any barrel imports so any complex layout with many imports will have a pretty bad experience when developing.
---
```shell
git clone git@github.com:KATT/nextjs-layout-page-coupling.git
cd nextjs-layout-page-coupling
pnpm i
pnpm dev
```
- Run `pnpm dev`
- Go to localhost:3000
- First load is slow and that's ok
- Change `page.js` -> wait
---
Related issue: https://github.com/vercel/next.js/issues/48748