Using the LayoutFixer (beta)

The Layout Fixer is a special element that uses a web component to apply a "quick fix" to a responsive layout after an SSR and before the hydrate.

Since the gallery is using the container measurements to create a responsive layout, SSR cannot render the accurate layout. The only real layout can be created in the client, which will delay the TTI and have a negative effect on performance. To solve this issue, we've created a special flow for responsive layouts in SSR:

1. Without a specified width, the server will render a fixed-width layout, with opacity:0 on the items
2. In addition, the server will render a script tag with the Layout Fixer bundle
3. The Layout Fixer will measure the container and create the layout. Then it will apply the correct dimension and position styles and set the item opacity to 1.
4. The client will create a full and interactive layout.

The use the layout fixer you need to:

1. Bundle it separately
2. Render it when needed.

Use the playground's SSR Simulator example:

1. Importing and running the web component
2. Creating a separate bundle for the Layout Fixer. Notice: This step will differ according to your framework. It will usually be a part of your package.json
3. Rendering the Layout Fixer with the Gallery. Notice: Render the Layout Fixer only if the container dimensions are unknown