adobe / adobe/react-spectrum

Support server-side rendering components with defaultOpen={true}

Open
#6,243 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

Components that are portaled into i.e. `document.body`, such as Modal, do not support server-side rendering.

### 🤔 Expected Behavior?

That portaled components can be server-side rendered.

### 😯 Current Behavior

Portaled components are not server-side rendered.

### 💁 Possible Solution

Provide an option to potentially bypass the useIsSSR() check for portals for components that rely on portals.

### 🔦 Context

I noticed that when defaultOpen={true} for modals, they are not server-side rendered. For a login dialog for example, it would be useful to have it server-side rendered should a user not be authenticated and to have its event listeners etc. attached when hydration occurs.

### 💻 Examples

_No response_

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by tracing the portal components that use the useIsSSR() check, then follow the Modal path when defaultOpen={true}. Confirm the existing SSR and hydration behavior before deciding how the proposed opt-out should work; done means an initially open portaled component renders on the server and attaches its event listeners during hydration.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.