Background
The current slot implementation isn't compatible with server-side rendering (SSR). It only renders the freeform main slot on the server and then adds other slots after mounting on the client (with useEffect) which is not a problem in client-only components like Overlay but can be a bad loading experience for other components with layout shift.
The tradeoffs considered at the time of building this component are mentioned in this comment: https://github.com/github/primer/issues/1224#issuecomment-1222450075
Task
Update the slots implementation to render consistently across the server and client. This will introduce a limitation that a slot needs to be a direct child of the slot container, deep nesting is not allowed.
Components to migrate
Related work
Clean up
Background
The current slot implementation isn't compatible with server-side rendering (SSR). It only renders the freeform main slot on the server and then adds other slots after mounting on the client (with useEffect) which is not a problem in client-only components like Overlay but can be a bad loading experience for other components with layout shift.
The tradeoffs considered at the time of building this component are mentioned in this comment: https://github.com/github/primer/issues/1224#issuecomment-1222450075
Task
Update the slots implementation to render consistently across the server and client. This will introduce a limitation that a slot needs to be a direct child of the slot container, deep nesting is not allowed.
Components to migrate
Related work
Clean up