Skip to content

Commit f3a1495

Browse files
sebmarkbagesebmarkbage
authored
Partial Hydration (#14717)
* Basic partial hydration test * Render comments around Suspense components We need this to be able to identify how far to skip ahead if we're not going to hydrate this subtree yet. * Add DehydratedSuspenseComponent type of work Will be used for Suspense boundaries that are left with their server rendered content intact. * Add comment node as hydratable instance type as placeholder for suspense * Skip past nodes within the Suspense boundary This lets us continue hydrating sibling nodes. * A dehydrated suspense boundary comment should be considered a sibling * Retry hydrating at offscreen pri or after ping if suspended * Enter hydration state when retrying dehydrated suspense boundary * Delete all children within a dehydrated suspense boundary when it's deleted * Delete server rendered content when props change before hydration completes * Make test internal * Wrap in act * Change SSR Fixture to use Partial Hydration This requires the enableSuspenseServerRenderer flag to be manually enabled for the build to work. * Changes to any parent Context forces clearing dehydrated content We mark dehydrated boundaries as having child work, since they might have components that read from the changed context. We check this in beginWork and if it does we treat it as if the input has changed (same as if props changes). * Wrap in feature flag * Treat Suspense boundaries without fallbacks as if not-boundaries These don't come into play for purposes of hydration. * Fix clearing of nested suspense boundaries * ping -> retry Co-Authored-By: sebmarkbage <sebastian@calyptus.eu> * Typo Co-Authored-By: sebmarkbage <sebastian@calyptus.eu> * Use didReceiveUpdate instead of manually comparing props * Leave comment for why it's ok to ignore the timeout
1 parent f24a0da commit f3a1495

24 files changed

Lines changed: 1417 additions & 130 deletions

‎fixtures/ssr/src/components/App.js‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
1-
importReact,{Component}from'react';
1+
importReact,{useContext,useState,Suspense}from'react';
22

33
importChromefrom'./Chrome';
44
importPagefrom'./Page';
5+
importPage2from'./Page2';
6+
importThemefrom'./Theme';
57

6-
exportdefaultclassAppextendsComponent{
7-
render(){
8-
return(
9-
<Chrometitle="Hello World"assets={this.props.assets}>
10-
<div>
11-
<h1>Hello World</h1>
12-
<Page/>
13-
</div>
14-
</Chrome>
15-
);
16-
}
8+
functionLoadingIndicator(){
9+
lettheme=useContext(Theme);
10+
return<divclassName={theme+'-loading'}>Loading...</div>;
11+
}
12+
13+
exportdefaultfunctionApp({assets}){
14+
let[CurrentPage,switchPage]=useState(()=>Page);
15+
return(
16+
<Chrometitle="Hello World"assets={assets}>
17+
<div>
18+
<h1>Hello World</h1>
19+
<aclassName="link"onClick={()=>switchPage(()=>Page)}>
20+
Page 1
21+
</a>
22+
{' | '}
23+
<aclassName="link"onClick={()=>switchPage(()=>Page2)}>
24+
Page 2
25+
</a>
26+
<Suspensefallback={<LoadingIndicator/>}>
27+
<CurrentPage/>
28+
</Suspense>
29+
</div>
30+
</Chrome>
31+
);
1732
}

‎fixtures/ssr/src/components/Chrome.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,27 @@ body {
33
padding:0;
44
font-family: sans-serif;
55
}
6+
7+
body.light {
8+
background-color:#FFFFFF;
9+
color:#333333;
10+
}
11+
12+
body.dark {
13+
background-color:#000000;
14+
color:#CCCCCC;
15+
}
16+
17+
.light-loading {
18+
margin:10px0;
19+
padding:10px;
20+
background-color:#CCCCCC;
21+
color:#666666;
22+
}
23+
24+
.dark-loading {
25+
margin:10px0;
26+
padding:10px;
27+
background-color:#333333;
28+
color:#999999;
29+
}

‎fixtures/ssr/src/components/Chrome.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
importReact,{Component}from'react';
22

3+
importTheme,{ThemeToggleButton}from'./Theme';
4+
35
import'./Chrome.css';
46

57
exportdefaultclassChromeextendsComponent{
8+
state={theme: 'light'};
69
render(){
710
constassets=this.props.assets;
811
return(
@@ -14,13 +17,18 @@ export default class Chrome extends Component {
1417
<linkrel="stylesheet"href={assets['main.css']}/>
1518
<title>{this.props.title}</title>
1619
</head>
17-
<body>
20+
<bodyclassName={this.state.theme}>
1821
<noscript
1922
dangerouslySetInnerHTML={{
2023
__html: `<b>Enable JavaScript to run this app.</b>`,
2124
}}
2225
/>
23-
{this.props.children}
26+
<Theme.Providervalue={this.state.theme}>
27+
{this.props.children}
28+
<div>
29+
<ThemeToggleButtononChange={theme=>this.setState({theme})}/>
30+
</div>
31+
</Theme.Provider>
2432
<script
2533
dangerouslySetInnerHTML={{
2634
__html: `assetManifest = ${JSON.stringify(assets)};`,

‎fixtures/ssr/src/components/Page.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1-
.bold {
1+
.link {
22
font-weight: bold;
3+
cursor: pointer;
4+
}
5+
.light-box {
6+
margin:10px0;
7+
padding:10px;
8+
background-color:#CCCCCC;
9+
color:#333333;
10+
}
11+
.dark-box {
12+
margin:10px0;
13+
padding:10px;
14+
background-color:#333333;
15+
color:#CCCCCC;
316
}

‎fixtures/ssr/src/components/Page.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
importReact,{Component}from'react';
22

3+
importThemefrom'./Theme';
4+
importSuspendfrom'./Suspend';
5+
36
import'./Page.css';
47

58
constautofocusedInputs=[
@@ -14,17 +17,22 @@ export default class Page extends Component {
1417
};
1518
render(){
1619
constlink=(
17-
<aclassName="bold"onClick={this.handleClick}>
20+
<aclassName="link"onClick={this.handleClick}>
1821
Click Here
1922
</a>
2023
);
2124
return(
22-
<div>
23-
<psuppressHydrationWarning={true}>A random number: {Math.random()}</p>
24-
<p>Autofocus on page load: {autofocusedInputs}</p>
25-
<p>{!this.state.active ? link : 'Thanks!'}</p>
26-
{this.state.active&&<p>Autofocus on update: {autofocusedInputs}</p>}
25+
<divclassName={this.context+'-box'}>
26+
<Suspend>
27+
<psuppressHydrationWarning={true}>
28+
A random number: {Math.random()}
29+
</p>
30+
<p>Autofocus on page load: {autofocusedInputs}</p>
31+
<p>{!this.state.active ? link : 'Thanks!'}</p>
32+
{this.state.active&&<p>Autofocus on update: {autofocusedInputs}</p>}
33+
</Suspend>
2734
</div>
2835
);
2936
}
3037
}
38+
Page.contextType=Theme;

‎fixtures/ssr/src/components/Page2.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
importReact,{useContext}from'react';
2+
3+
importThemefrom'./Theme';
4+
importSuspendfrom'./Suspend';
5+
6+
import'./Page.css';
7+
8+
exportdefaultfunctionPage2(){
9+
lettheme=useContext(Theme);
10+
return(
11+
<divclassName={theme+'-box'}>
12+
<Suspend>Content of a different page</Suspend>
13+
</div>
14+
);
15+
}

‎fixtures/ssr/src/components/Suspend.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
letpromise=null;
2+
letisResolved=false;
3+
4+
exportdefaultfunctionSuspend({children}){
5+
// This will suspend the content from rendering but only on the client.
6+
// This is used to demo a slow loading app.
7+
if(typeofwindow==='object'){
8+
if(!isResolved){
9+
if(promise===null){
10+
promise=newPromise(resolve=>{
11+
setTimeout(()=>{
12+
isResolved=true;
13+
resolve();
14+
},6000);
15+
});
16+
}
17+
throwpromise;
18+
}
19+
}
20+
returnchildren;
21+
}

‎fixtures/ssr/src/components/Theme.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
importReact,{createContext,useContext,useState}from'react';
2+
3+
constTheme=createContext('light');
4+
5+
exportdefaultTheme;
6+
7+
exportfunctionThemeToggleButton({onChange}){
8+
lettheme=useContext(Theme);
9+
let[targetTheme,setTargetTheme]=useState(theme);
10+
functiontoggleTheme(){
11+
letnewTheme=theme==='light' ? 'dark' : 'light';
12+
// High pri, responsive update.
13+
setTargetTheme(newTheme);
14+
// Perform the actual theme change in a separate update.
15+
setTimeout(()=>onChange(newTheme),0);
16+
}
17+
if(targetTheme!==theme){
18+
return'Switching to '+targetTheme+'...';
19+
}
20+
return(
21+
<aclassName="link"onClick={toggleTheme}>
22+
Switch to {theme==='light' ? 'Dark' : 'Light'} theme
23+
</a>
24+
);
25+
}

‎fixtures/ssr/src/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
importReactfrom'react';
2-
import{hydrate}from'react-dom';
2+
import{unstable_createRoot}from'react-dom';
33

44
importAppfrom'./components/App';
55

6-
hydrate(<Appassets={window.assetManifest}/>,document);
6+
letroot=unstable_createRoot(document,{hydrate: true});
7+
root.render(<Appassets={window.assetManifest}/>);

0 commit comments

Comments
 (0)