Image size detection for CSR
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
Detecting image size has benefits on server-side rendering and prevent CLS for server-rendered pages. But it seems tricky and inefficient when it comes to client-side rendering.
-
As fetch API is a non-blocker for page rendering, fetching resolution on the client-side cannot prevent layout shifting. It highly depends on the network, and it needs to make an additional request.
-
Having a server middleware for resolution does not support full static generation. We should fallback to client-side size detection if the server is disabled
/cc @Atinux @pi0
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No file or test is named. Start by tracing the image-size handling paths for client-side rendering, server middleware, and full static generation, then compare their request and layout-shift behavior. Done means an agreed approach that supports server-rendered pages, preserves static generation, and provides a client-side fallback when the server is disabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend, performance, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100