Portal Nested Components

[dajinchu]

The lets the legacy backend leave "slots" for Bifrost to render into, enabling incremental replacement of pages beyond the outside-in approach of Layouts.

On the legacy backend you create your slot

<div data-bifrost-render="myComponent">

In your wrapped layout you render

<NestedComponentPortal name="myComponent>
  cool component
</NestedComoponentPortal

You can do data fetching as needed in +data or trpc/relay integrations etc. Data can be conditionally fetched by reading pageContext.proxyNestedComponents for which components were present in the backend html.

Bifrost can also then conditionally render NestedComponentPortal based on the data fetch. If you don't render it, then the corresponding data-bifrost-render div will be deleted.

Limitation

You can fetch the data for the component in the prefetch, but the portaled components will not be rendered on SSR. This could be enabled but would require re-parsing the DOM and handling hydration.

It is advised to add a height to the data-bifrost-render component to prevent layout shift. As Bifrost has the option to delete it, this ensure we only expand layout when the component is actually going to render.