🏝️ All islands must be rendered on the server for maximum safety and consistency 🤗 by mxdvl · Pull Request #8991 · guardian/dotcom-rendering

mxdvl · 2023-10-03T13:27:05Z

What does this change?

Remove the ability for Islands to be client-side only and the associated attribute clientOnly.

We now have a series of tests that demonstrate that Islands will not throw in a server context.

Why?

Redo of #8948

Having to consider whether islands should be rendered or hydrated is an unnecessary complexity that is better handled by hooks. This also encourages developers and designers to think about what should be rendered on the server in order to produce the least amount of suprise to users.

Screenshots

N/A

github-actions · 2023-10-03T13:40:58Z

Size Change: -152 B (0%)

Total Size: 724 kB

Filename	Size	Change
`dotcom-rendering/dist/index.web.********************.js`	45.2 kB	-112 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`dotcom-rendering/dist/100.web.********************.js`	990 B	0 B
`dotcom-rendering/dist/1024.web.********************.js`	2.75 kB	0 B
`dotcom-rendering/dist/1076.web.********************.js`	3.08 kB	0 B
`dotcom-rendering/dist/1121.web.********************.js`	2.58 kB	0 B
`dotcom-rendering/dist/1136.web.********************.js`	884 B	0 B
`dotcom-rendering/dist/1178.web.********************.js`	504 B	0 B
`dotcom-rendering/dist/1406.web.********************.js`	5.09 kB	0 B
`dotcom-rendering/dist/1418.web.********************.js`	9.98 kB	0 B
`dotcom-rendering/dist/1465.web.********************.js`	3.32 kB	0 B
`dotcom-rendering/dist/1520.web.********************.js`	492 B	0 B
`dotcom-rendering/dist/1521.web.********************.js`	5.48 kB	0 B
`dotcom-rendering/dist/1659.web.********************.js`	518 B	0 B
`dotcom-rendering/dist/1714.web.********************.js`	3.5 kB	0 B
`dotcom-rendering/dist/1987.web.********************.js`	3.15 kB	0 B
`dotcom-rendering/dist/2092.web.********************.js`	849 B	0 B
`dotcom-rendering/dist/2096.web.********************.js`	13 kB	0 B
`dotcom-rendering/dist/2186.web.********************.js`	916 B	0 B
`dotcom-rendering/dist/2323.web.********************.js`	3.88 kB	0 B
`dotcom-rendering/dist/2351.web.********************.js`	3.34 kB	0 B
`dotcom-rendering/dist/2394.web.********************.js`	5.32 kB	0 B
`dotcom-rendering/dist/2510.web.********************.js`	663 B	0 B
`dotcom-rendering/dist/2511.web.********************.js`	819 B	0 B
`dotcom-rendering/dist/254.web.********************.js`	638 B	0 B
`dotcom-rendering/dist/2546.web.********************.js`	3.72 kB	0 B
`dotcom-rendering/dist/2848.web.********************.js`	16.2 kB	0 B
`dotcom-rendering/dist/2879.web.********************.js`	910 B	0 B
`dotcom-rendering/dist/2919.web.********************.js`	900 B	0 B
`dotcom-rendering/dist/2923.web.********************.js`	720 B	0 B
`dotcom-rendering/dist/3030.web.********************.js`	957 B	0 B
`dotcom-rendering/dist/3111.web.********************.js`	590 B	0 B
`dotcom-rendering/dist/3146.web.********************.js`	6.53 kB	0 B
`dotcom-rendering/dist/3149.web.********************.js`	636 B	0 B
`dotcom-rendering/dist/3265.web.********************.js`	916 B	0 B
`dotcom-rendering/dist/3302.web.********************.js`	820 B	0 B
`dotcom-rendering/dist/3389.web.********************.js`	884 B	0 B
`dotcom-rendering/dist/3662.web.********************.js`	3.13 kB	0 B
`dotcom-rendering/dist/374.web.********************.js`	5.09 kB	0 B
`dotcom-rendering/dist/3795.web.********************.js`	797 B	0 B
`dotcom-rendering/dist/3968.web.********************.js`	3.79 kB	0 B
`dotcom-rendering/dist/4012.web.********************.js`	783 B	0 B
`dotcom-rendering/dist/4251.web.********************.js`	8.9 kB	0 B
`dotcom-rendering/dist/4349.web.********************.js`	775 B	0 B
`dotcom-rendering/dist/4591.web.********************.js`	404 B	0 B
`dotcom-rendering/dist/4593.web.********************.js`	1.74 kB	0 B
`dotcom-rendering/dist/4627.web.********************.js`	783 B	0 B
`dotcom-rendering/dist/4797.web.********************.js`	744 B	0 B
`dotcom-rendering/dist/480.web.********************.js`	524 B	0 B
`dotcom-rendering/dist/489.web.********************.js`	5.22 kB	0 B
`dotcom-rendering/dist/5332.web.********************.js`	820 B	0 B
`dotcom-rendering/dist/5495.web.********************.js`	676 B	0 B
`dotcom-rendering/dist/5515.web.********************.js`	30 kB	0 B
`dotcom-rendering/dist/5688.web.********************.js`	3.79 kB	0 B
`dotcom-rendering/dist/5744.web.********************.js`	720 B	0 B
`dotcom-rendering/dist/5843.web.********************.js`	4.69 kB	0 B
`dotcom-rendering/dist/6068.web.********************.js`	775 B	0 B
`dotcom-rendering/dist/6126.web.********************.js`	2.23 kB	0 B
`dotcom-rendering/dist/6295.web.********************.js`	999 B	0 B
`dotcom-rendering/dist/639.web.********************.js`	951 B	0 B
`dotcom-rendering/dist/6428.web.********************.js`	741 B	0 B
`dotcom-rendering/dist/657.web.********************.js`	2.46 kB	0 B
`dotcom-rendering/dist/6609.web.********************.js`	872 B	0 B
`dotcom-rendering/dist/6967.web.********************.js`	850 B	0 B
`dotcom-rendering/dist/721.web.********************.js`	4.24 kB	0 B
`dotcom-rendering/dist/7569.web.********************.js`	4.83 kB	-18 B (0%)
`dotcom-rendering/dist/7650.web.********************.js`	23 kB	0 B
`dotcom-rendering/dist/7701.web.********************.js`	647 B	0 B
`dotcom-rendering/dist/8085.web.********************.js`	2.59 kB	0 B
`dotcom-rendering/dist/8112.web.********************.js`	3.37 kB	0 B
`dotcom-rendering/dist/818.web.********************.js`	2.85 kB	0 B
`dotcom-rendering/dist/8268.web.********************.js`	4.32 kB	0 B
`dotcom-rendering/dist/8395.web.********************.js`	580 B	0 B
`dotcom-rendering/dist/8401.web.********************.js`	922 B	0 B
`dotcom-rendering/dist/8414.web.********************.js`	4.92 kB	0 B
`dotcom-rendering/dist/8620.web.********************.js`	5.78 kB	0 B
`dotcom-rendering/dist/8924.web.********************.js`	3.22 kB	0 B
`dotcom-rendering/dist/9196.web.********************.js`	784 B	0 B
`dotcom-rendering/dist/9251.web.********************.js`	2.25 kB	0 B
`dotcom-rendering/dist/9390.web.********************.js`	743 B	0 B
`dotcom-rendering/dist/9422.web.********************.js`	614 B	0 B
`dotcom-rendering/dist/9581.web.********************.js`	797 B	0 B
`dotcom-rendering/dist/9582.web.********************.js`	710 B	0 B
`dotcom-rendering/dist/9597.web.********************.js`	3.25 kB	0 B
`dotcom-rendering/dist/9617.web.********************.js`	1 kB	0 B
`dotcom-rendering/dist/9724.web.********************.js`	5.01 kB	0 B
`dotcom-rendering/dist/AdPortals-importable.web.********************.js`	3.63 kB	0 B
`dotcom-rendering/dist/AlreadyVisited-importable.web.********************.js`	412 B	0 B
`dotcom-rendering/dist/AppEmailSignUp-importable.web.********************.js`	7.26 kB	0 B
`dotcom-rendering/dist/AppsEpic-importable.web.********************.js`	4 kB	0 B
`dotcom-rendering/dist/AppsFooter-importable.web.********************.js`	3.31 kB	0 B
`dotcom-rendering/dist/AppsLightboxImage-importable.web.********************.js`	2.92 kB	0 B
`dotcom-rendering/dist/AppsLightboxImageStore-importable.web.********************.js`	2.4 kB	0 B
`dotcom-rendering/dist/AudioAtomWrapper-importable.web.********************.js`	3.51 kB	0 B
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.web.********************.js`	4.6 kB	0 B
`dotcom-rendering/dist/Branding-importable.web.********************.js`	2.26 kB	0 B
`dotcom-rendering/dist/braze-web-sdk-core.web.********************.js`	36.9 kB	0 B
`dotcom-rendering/dist/BrazeMessaging-importable.web.********************.js`	5.28 kB	0 B
`dotcom-rendering/dist/CalloutBlockComponent-importable.web.********************.js`	6.67 kB	0 B
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.web.********************.js`	6 kB	0 B
`dotcom-rendering/dist/CardCommentCount-importable.web.********************.js`	2.89 kB	0 B
`dotcom-rendering/dist/Carousel-importable.web.********************.js`	7.65 kB	0 B
`dotcom-rendering/dist/CarouselForNewsletters-importable.web.********************.js`	5.39 kB	0 B
`dotcom-rendering/dist/ChartAtom-importable.web.********************.js`	500 B	0 B
`dotcom-rendering/dist/CommentCount-importable.web.********************.js`	3.06 kB	0 B
`dotcom-rendering/dist/DiscussionContainer-importable.web.********************.js`	23.9 kB	0 B
`dotcom-rendering/dist/DiscussionMeta-importable.web.********************.js`	3.66 kB	0 B
`dotcom-rendering/dist/DocumentBlockComponent-importable.web.********************.js`	3.3 kB	0 B
`dotcom-rendering/dist/EmbedBlockComponent-importable.web.********************.js`	3.85 kB	0 B
`dotcom-rendering/dist/EnhancePinnedPost-importable.web.********************.js`	1.97 kB	0 B
`dotcom-rendering/dist/FetchOnwardsData-importable.web.********************.js`	2.5 kB	0 B
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.web.********************.js`	3.32 kB	0 B
`dotcom-rendering/dist/FocusStyles-importable.web.********************.js`	607 B	0 B
`dotcom-rendering/dist/FollowWrapper-importable.web.********************.js`	2.85 kB	0 B
`dotcom-rendering/dist/FooterLabel-importable.web.********************.js`	336 B	0 B
`dotcom-rendering/dist/frameworks.web.********************.js`	20.8 kB	0 B
`dotcom-rendering/dist/GetCricketScoreboard-importable.web.********************.js`	3.49 kB	0 B
`dotcom-rendering/dist/GetMatchNav-importable.web.********************.js`	9.61 kB	0 B
`dotcom-rendering/dist/GetMatchStats-importable.web.********************.js`	1.52 kB	0 B
`dotcom-rendering/dist/GetMatchTabs-importable.web.********************.js`	2.55 kB	0 B
`dotcom-rendering/dist/guardian-braze-components-banner.web.********************.js`	13.4 kB	0 B
`dotcom-rendering/dist/guardian-braze-components-end-of-article.web.********************.js`	9 kB	0 B
`dotcom-rendering/dist/GuideAtomWrapper-importable.web.********************.js`	790 B	0 B
`dotcom-rendering/dist/HeaderTopBar-importable.web.********************.js`	10.8 kB	0 B
`dotcom-rendering/dist/InstagramBlockComponent-importable.web.********************.js`	3.38 kB	0 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.web.********************.js`	5.92 kB	0 B
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.web.********************.js`	3.79 kB	0 B
`dotcom-rendering/dist/InteractiveSupportButton-importable.web.********************.js`	3.83 kB	0 B
`dotcom-rendering/dist/KeyEventsCarousel-importable.web.********************.js`	2.7 kB	-22 B (-1%)
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.web.********************.js`	3.52 kB	0 B
`dotcom-rendering/dist/LatestLinks-importable.web.********************.js`	1.2 kB	0 B
`dotcom-rendering/dist/LightboxHash-importable.web.********************.js`	430 B	0 B
`dotcom-rendering/dist/LightboxJavascript-importable.web.********************.js`	4.64 kB	0 B
`dotcom-rendering/dist/LiveBlogEpic-importable.web.********************.js`	3.86 kB	0 B
`dotcom-rendering/dist/Liveness-importable.web.********************.js`	3.34 kB	0 B
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.web.********************.js`	4.98 kB	0 B
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.web.********************.js`	5.33 kB	0 B
`dotcom-rendering/dist/Metrics-importable.web.********************.js`	2.29 kB	0 B
`dotcom-rendering/dist/MostViewedFooter-importable.web.********************.js`	5.68 kB	0 B
`dotcom-rendering/dist/MostViewedFooterData-importable.web.********************.js`	8.35 kB	0 B
`dotcom-rendering/dist/MostViewedRightWrapper-importable.web.********************.js`	3.73 kB	0 B
`dotcom-rendering/dist/OnwardsUpper-importable.web.********************.js`	4.17 kB	0 B
`dotcom-rendering/dist/PersonalityQuizAtom-importable.web.********************.js`	3.65 kB	0 B
`dotcom-rendering/dist/ProfileAtom-importable.web.********************.js`	547 B	0 B
`dotcom-rendering/dist/ProfileAtomWrapper-importable.web.********************.js`	810 B	0 B
`dotcom-rendering/dist/PulsingDot-importable.web.********************.js`	744 B	0 B
`dotcom-rendering/dist/QandaAtom-importable.web.********************.js`	542 B	0 B
`dotcom-rendering/dist/ReaderRevenueDev-importable.web.********************.js`	466 B	0 B
`dotcom-rendering/dist/readerRevenueDevUtils.web.********************.js`	2.44 kB	0 B
`dotcom-rendering/dist/ReaderRevenueLinks-importable.web.********************.js`	6.18 kB	0 B
`dotcom-rendering/dist/RelativeTime-importable.web.********************.js`	1.92 kB	0 B
`dotcom-rendering/dist/RichLinkComponent-importable.web.********************.js`	6.43 kB	0 B
`dotcom-rendering/dist/SecureSignupIframe-importable.web.********************.js`	4.93 kB	0 B
`dotcom-rendering/dist/SendAMessage-importable.web.********************.js`	4.6 kB	0 B
`dotcom-rendering/dist/SendTargetingParams-importable.web.********************.js`	2.08 kB	0 B
`dotcom-rendering/dist/sentry.web.********************.js`	772 B	0 B
`dotcom-rendering/dist/SetABTests-importable.web.********************.js`	3.43 kB	0 B
`dotcom-rendering/dist/SetAdTargeting-importable.web.********************.js`	481 B	0 B
`dotcom-rendering/dist/shimport.web.********************.js`	2.78 kB	0 B
`dotcom-rendering/dist/ShowHideContainers-importable.web.********************.js`	642 B	0 B
`dotcom-rendering/dist/ShowMore-importable.web.********************.js`	5.61 kB	0 B
`dotcom-rendering/dist/SignInGateMain.web.********************.js`	3.86 kB	0 B
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.web.********************.js`	4.94 kB	0 B
`dotcom-rendering/dist/SignInGateSelector-importable.web.********************.js`	5.55 kB	0 B
`dotcom-rendering/dist/SlotBodyEnd-importable.web.********************.js`	6.57 kB	0 B
`dotcom-rendering/dist/SpotifyBlockComponent-importable.web.********************.js`	5.18 kB	0 B
`dotcom-rendering/dist/StickyBottomBanner-importable.web.********************.js`	5.74 kB	0 B
`dotcom-rendering/dist/SubNav-importable.web.********************.js`	2.36 kB	0 B
`dotcom-rendering/dist/SupportTheG-importable.web.********************.js`	6.3 kB	0 B
`dotcom-rendering/dist/TableOfContents-importable.web.********************.js`	2.86 kB	0 B
`dotcom-rendering/dist/TimelineAtom-importable.web.********************.js`	1.22 kB	0 B
`dotcom-rendering/dist/TweetBlockComponent-importable.web.********************.js`	1.01 kB	0 B
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.web.********************.js`	3.39 kB	0 B
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.web.********************.js`	5.35 kB	0 B
`dotcom-rendering/dist/VineBlockComponent-importable.web.********************.js`	3.24 kB	0 B
`dotcom-rendering/dist/WeatherWrapper-importable.web.********************.js`	5.41 kB	0 B
`dotcom-rendering/dist/YoutubeBlockComponent-importable.web.********************.js`	3.77 kB	0 B

_{compressed-size-action}

github-actions · 2023-11-17T06:06:10Z

"This PR is stale because it has been open 30 days with no activity. Unless a comment is added or the “stale” label removed, this will be closed in 3 days"

all islands must be rendered on the server for maximum safety and consistency

cemms1

👨‍🍳 💋

prout-bot · 2023-12-05T15:37:13Z

Seen on PROD (merged by @mxdvl 102 hours, 50 minutes and 14 seconds ago) Please check your changes!

mxdvl added the Health label Oct 3, 2023

github-actions Bot added the dotcom-rendering label Oct 3, 2023

mxdvl force-pushed the mxdvl/islands-always-server-safe branch from e3372ce to 4ac3382 Compare October 3, 2023 14:53

mxdvl mentioned this pull request Oct 4, 2023

Remove SWR keys from server render #8976

Closed

cemms1 modified the milestone: Health Oct 4, 2023

cemms1 removed the Health label Oct 4, 2023

mxdvl force-pushed the mxdvl/islands-always-server-safe branch 4 times, most recently from 1c7f355 to 6670051 Compare October 6, 2023 16:23

mxdvl force-pushed the mxdvl/islands-always-server-safe branch from b29c720 to 2223d74 Compare October 17, 2023 10:03

This was referenced Oct 25, 2023

Make Metrics Island server safe #9313

Merged

Make SlotBodyEnd Island server-safe #9353

Merged

Make Lightbox Island server safe #9366

Merged

Make SignInGateSelector Island server safe #9367

Merged

This was referenced Nov 2, 2023

Make RecipeMultiplier Island server safe #9383

Merged

Demonstrate some Islands are server-safe #9384

Merged

Make targeting Islands server-safe #9403

Merged

This was referenced Nov 16, 2023

Make CommentCount Island server-safe #9527

Merged

Make DiscussionMeta Island no longer client-side only #9535

Merged

github-actions Bot added the Stale label Nov 17, 2023

mxdvl force-pushed the mxdvl/islands-always-server-safe branch 2 times, most recently from 40b15b4 to ba54c01 Compare November 27, 2023 09:51

This was referenced Nov 27, 2023

Make EnhancedPinnedPost no longer client-side only #9656

Merged

Make a few more server-safe Island no longer client-side only #9659

Merged

Migrate epic.interactivity to Playwright #9669

Merged

feat(Island): no more clientOnly

15919b2

all islands must be rendered on the server for maximum safety and consistency

mxdvl force-pushed the mxdvl/islands-always-server-safe branch from ba54c01 to 15919b2 Compare November 30, 2023 17:39

mxdvl marked this pull request as ready for review November 30, 2023 17:40

sunnyclimber456 approved these changes Nov 30, 2023

View reviewed changes

cemms1 approved these changes Nov 30, 2023

View reviewed changes

mxdvl merged commit 491cefd into main Dec 1, 2023

mxdvl deleted the mxdvl/islands-always-server-safe branch December 1, 2023 08:46

prout-bot added Overdue-on-PROD Overdue-on-CODE Seen-on-PROD and removed Overdue-on-PROD labels Dec 5, 2023

cemms1 removed the Overdue-on-CODE label Dec 5, 2023

Navigation Menu

🏝️ All islands must be rendered on the server for maximum safety and consistency 🤗 - #8991

🏝️ All islands must be rendered on the server for maximum safety and consistency 🤗 #8991
mxdvl merged 1 commit into
mainfrom
mxdvl/islands-always-server-safe

mxdvl commented Oct 3, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 3, 2023 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 17, 2023

Uh oh!

cemms1 left a comment

Uh oh!

prout-bot commented Dec 5, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mxdvl commented Oct 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this change?

Why?

Screenshots

Uh oh!

github-actions Bot commented Oct 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Nov 17, 2023

Uh oh!

cemms1 left a comment

Choose a reason for hiding this comment

Uh oh!

prout-bot commented Dec 5, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mxdvl commented Oct 3, 2023 •

edited

Loading

github-actions Bot commented Oct 3, 2023 •

edited

Loading