should render the correct sizes passed when a noscript is rendered #37161

dc7290 · 2022-05-24T15:59:33Z

Bug

Fixes sizes defined in props is not applied to noscript in next/image #36807
Unit tests added

Please review this PR.

As shown in this Issue, the noscript element does not render sizes correctly during SSR.
This change adds noscriptSizes to the props passed to ImageElement to generate the same sizes and srcset as the normal img tag that is actually rendered in the browser.

should render the correct sizes passed when a noscript is rendered fix #36807

styfle

Nice find, thanks! 🎉

ijjk · 2022-05-24T19:25:04Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
buildDuration	15.7s	16s	⚠️ +296ms
buildDurationCached	6.3s	6.4s	⚠️ +82ms
nodeModulesSize	494 MB	494 MB	⚠️ +117 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.839	3.868	⚠️ +0.03
/ avg req/sec	651.29	646.31	⚠️ -4.98
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.344	1.322	-0.02
/error-in-render avg req/sec	1860.32	1891.48	+31.16

Client Bundles (main, webpack)

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	29.2 kB	29.2 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	73 kB	73 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.73 kB	5.74 kB	⚠️ +12 B
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	⚠️ +12 B

Client Build Manifests Overall increase ⚠️

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
_buildManifest.js gzip	458 B	459 B	⚠️ +1 B
Overall change	458 B	459 B	⚠️ +1 B

Rendered Page Sizes

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-544bb68363445a0e.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-c1372eeb4916d32c.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-478ba29a386d0870.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-88d38b3925f9d65d.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa584c92af7d6b54.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-113a7082ae16fbcb.js"

Diff for image-HASH.js

@@ -449,7 +449,8 @@
             onLoadingCompleteRef: onLoadingCompleteRef,
             setBlurComplete: setBlurComplete,
             setIntersection: setIntersection,
-            isVisible: isVisible
+            isVisible: isVisible,
+            noscriptSizes: sizes
           },
           rest
         );
@@ -895,6 +896,7 @@
           onLoad = _param.onLoad,
           onError = _param.onError,
           isVisible = _param.isVisible,
+          noscriptSizes = _param.noscriptSizes,
           rest = _objectWithoutProperties(_param, [
             "imgAttributes",
             "heightInt",
@@ -916,7 +918,8 @@
             "setIntersection",
             "onLoad",
             "onError",
-            "isVisible"
+            "isVisible",
+            "noscriptSizes"
           ]);
         return /*#__PURE__*/ _react.default.createElement(
           _react.default.Fragment,
@@ -1007,7 +1010,7 @@
                     layout: layout,
                     width: widthInt,
                     quality: qualityInt,
-                    sizes: imgAttributes.sizes,
+                    sizes: noscriptSizes,
                     loader: loader
                   }),
                   layout === "raw"

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
buildDuration	18.2s	18.2s	-64ms
buildDurationCached	6.5s	6.3s	-119ms
nodeModulesSize	494 MB	494 MB	⚠️ +117 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.849	3.861	⚠️ +0.01
/ avg req/sec	649.51	647.56	⚠️ -1.95
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.379	1.327	-0.05
/error-in-render avg req/sec	1813.49	1883.27	+69.78

Client Bundles (main, webpack)

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.7 kB	29.7 kB	✓
webpack-HASH.js gzip	1.54 kB	1.54 kB	✓
Overall change	74 kB	74 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.89 kB	2.89 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.82 kB	5.84 kB	⚠️ +20 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.78 kB	2.78 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.4 kB	⚠️ +20 B

Client Build Manifests

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	dc7290/next.js fix/noscript-sizes	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Diffs

Diff for _buildManifest.js

@@ -12,7 +12,7 @@ self.__BUILD_MANIFEST = {
   ],
   "/head": ["static\u002Fchunks\u002Fpages\u002Fhead-544bb68363445a0e.js"],
   "/hooks": ["static\u002Fchunks\u002Fpages\u002Fhooks-c1372eeb4916d32c.js"],
-  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-478ba29a386d0870.js"],
+  "/image": ["static\u002Fchunks\u002Fpages\u002Fimage-88d38b3925f9d65d.js"],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-fa584c92af7d6b54.js"],
   "/routerDirect": [
     "static\u002Fchunks\u002Fpages\u002FrouterDirect-113a7082ae16fbcb.js"

Diff for image-HASH.js

@@ -449,7 +449,8 @@
             onLoadingCompleteRef: onLoadingCompleteRef,
             setBlurComplete: setBlurComplete,
             setIntersection: setIntersection,
-            isVisible: isVisible
+            isVisible: isVisible,
+            noscriptSizes: sizes
           },
           rest
         );
@@ -895,6 +896,7 @@
           onLoad = _param.onLoad,
           onError = _param.onError,
           isVisible = _param.isVisible,
+          noscriptSizes = _param.noscriptSizes,
           rest = _objectWithoutProperties(_param, [
             "imgAttributes",
             "heightInt",
@@ -916,7 +918,8 @@
             "setIntersection",
             "onLoad",
             "onError",
-            "isVisible"
+            "isVisible",
+            "noscriptSizes"
           ]);
         return /*#__PURE__*/ _react.default.createElement(
           _react.default.Fragment,
@@ -1007,7 +1010,7 @@
                     layout: layout,
                     width: widthInt,
                     quality: qualityInt,
-                    sizes: imgAttributes.sizes,
+                    sizes: noscriptSizes,
                     loader: loader
                   }),
                   layout === "raw"

Commit: ab276a2

…ercel#37161) ## Bug - [x] Fixes vercel#36807 - [x] Unit tests added Please review this PR. As shown in [this Issue](vercel#36807), the noscript element does not render sizes correctly during SSR. This change adds `noscriptSizes` to the props passed to `ImageElement` to generate the same `sizes` and `srcset` as the normal img tag that is actually rendered in the browser.

dc7290 added 2 commits May 25, 2022 00:43

fix(next/image): About the noscript element sizes

9098037

should render the correct sizes passed when a noscript is rendered fix #36807

Merge branch 'canary' into fix/noscript-sizes

5886fbc

dc7290 requested review from timneutkens, ijjk, shuding and styfle as code owners May 24, 2022 15:59

ijjk added the type: next label May 24, 2022

Merge branch 'canary' into fix/noscript-sizes

ef4353d

styfle approved these changes May 24, 2022

View reviewed changes

Merge branch 'canary' into fix/noscript-sizes

ab276a2

kodiakhq bot merged commit 1374747 into vercel:canary May 24, 2022

dc7290 deleted the fix/noscript-sizes branch May 25, 2022 05:21

github-actions bot locked as resolved and limited conversation to collaborators Jun 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

should render the correct sizes passed when a noscript is rendered #37161

should render the correct sizes passed when a noscript is rendered #37161

dc7290 commented May 24, 2022 •

edited

Loading

styfle left a comment

ijjk commented May 24, 2022

Diffs

Diffs

should render the correct sizes passed when a noscript is rendered #37161

should render the correct sizes passed when a noscript is rendered #37161

Conversation

dc7290 commented May 24, 2022 • edited Loading

Bug

styfle left a comment

Choose a reason for hiding this comment

ijjk commented May 24, 2022

Stats from current PR

Diffs

Diffs

dc7290 commented May 24, 2022 •

edited

Loading