The fluid layout is not ideal because it inherently involves a layout shift since its dimensions get determined at runtime, and it will not get rendered when it is initially in the viewport (per docs). Nevertheless, when this layout is required it would be preferable for it to not prevent other parts of the page from benefiting from SSR.
Implementation provided by @jridgewell.
Merging this PR is blocked by the AMP validator being updated, specifically to modify validateSsrLayout() as follows:
The use of the
fluid
layout currently blocks server-side rendering since it is not among theSUPPORTED_LAYOUTS
:https://github.com/ampproject/amp-toolbox/blob/3ec7bd40f34adbc8be66f951edfa6d91d5794c01/packages/optimizer/lib/transformers/ApplyLayout.js#L30-L40
The
fluid
layout is not ideal because it inherently involves a layout shift since its dimensions get determined at runtime, and it will not get rendered when it is initially in the viewport (per docs). Nevertheless, when this layout is required it would be preferable for it to not prevent other parts of the page from benefiting from SSR.Implementation provided by @jridgewell.
Merging this PR is blocked by the AMP validator being updated, specifically to modify
validateSsrLayout()
as follows:cf. b/184254585