Commit graph

2 commits

Author SHA1 Message Date
Steven
0cb1253638
Remove unnecessary <noscript> from next/future/image (#38080)
We don't need to include `<noscript>` for `next/future/image` since it uses native lazy loading instead of the `IntersectionObserver` (https://github.com/vercel/next.js/pull/37927).

The only case when we still need `<noscript>` is for `placeholder="blur"` because it requires client-side JS to switch the from blur image to final image on load.
2022-06-28 00:58:50 +00:00
Steven
e28d03c5a4
Add experimental next/future/image component (#37927)
This PR introduces a new experimental component, `next/future/image`, which is inspired by the existing experimental `layout="raw"`.

The difference is that much of the code has been deleted in order to reduce client-side code as well as reduce complexity:

- No `layout` prop
- No `loader` config (although `loader` prop works)
- No `IntersectionObserver`, use native `loading="lazy"` 
  - No `lazyBoundary`
  - No `lazyRoot`
- No `fill` (yet) so width & height are required
- No `objectFit` (use `style` instead)
- No `objectPosition` (use `style` instead)

This improves performance because native `loading="lazy"` doesn't need to wait for React Hydration and client-side JS.

In a future PR, we will modify `next/image` to remove `layout="raw"` since this new component supersedes it.

## Feature

- [x] Integration tests added
- [x] Documentation added
- [x] Telemetry added. In case of a feature if it's used or not.
- [x] Errors have helpful link attached, see `contributing.md`
2022-06-24 14:56:05 +00:00