Enable JavaScript to run this app.`,
+ }}
+ />
+ {children}
+
+
+
+
+ );
+}
diff --git a/fixtures/ssr2/src/Layout.js b/fixtures/ssr2/src/Layout.js
new file mode 100644
index 00000000000..0fe908e3331
--- /dev/null
+++ b/fixtures/ssr2/src/Layout.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function Layout({children}) {
+ return {children} ;
+}
diff --git a/fixtures/ssr2/src/NavBar.js b/fixtures/ssr2/src/NavBar.js
new file mode 100644
index 00000000000..67f7288a9d5
--- /dev/null
+++ b/fixtures/ssr2/src/NavBar.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function NavBar() {
+ return (
+
+ Home
+
+ );
+}
diff --git a/fixtures/ssr2/src/Post.js b/fixtures/ssr2/src/Post.js
new file mode 100644
index 00000000000..2fb36b21c30
--- /dev/null
+++ b/fixtures/ssr2/src/Post.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function Post() {
+ return (
+ <>
+ Hello world
+
+ This demo is artificially slowed down . Open{' '}
+ server/delays.js to adjust how much different things are
+ slowed down.
+
+
+ Notice how HTML for comments "streams in" before the JS (or React) has
+ loaded on the page.
+
+
+ Also notice that the JS for comments and sidebar has been code-split,
+ but HTML for it is still included in the server output.
+
+
+ );
+}
diff --git a/fixtures/ssr2/src/Sidebar.js b/fixtures/ssr2/src/Sidebar.js
new file mode 100644
index 00000000000..0a6d16fbba1
--- /dev/null
+++ b/fixtures/ssr2/src/Sidebar.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function Sidebar() {
+ return (
+ <>
+ Archive
+
+ May 2021
+ April 2021
+ March 2021
+ February 2021
+ January 2021
+ December 2020
+ November 2020
+ October 2020
+ September 2020
+
+
+ );
+}
diff --git a/fixtures/ssr2/src/Spinner.js b/fixtures/ssr2/src/Spinner.js
new file mode 100644
index 00000000000..b91af634cbe
--- /dev/null
+++ b/fixtures/ssr2/src/Spinner.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function Spinner({active = true}) {
+ return (
+
+ );
+}
diff --git a/fixtures/ssr2/src/data.js b/fixtures/ssr2/src/data.js
new file mode 100644
index 00000000000..3826a3a53d2
--- /dev/null
+++ b/fixtures/ssr2/src/data.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {createContext, useContext} from 'react';
+
+// Note: this file does not demonstrate a real data fetching strategy.
+// We only use this to simulate data fetching happening on the server
+// while the cache is populated on the client. In a real app, you would
+// instead use a data fetching library or Server Components for this.
+
+const DataContext = createContext(null);
+
+export function DataProvider({children, data}) {
+ return {children} ;
+}
+
+// In a real implementation the data would be streamed with the HTML.
+// We haven't integrated this part yet, so we'll just use fake data.
+const fakeData = [
+ "Wait, it doesn't wait for React to load?",
+ 'How does this even work?',
+ 'I like marshmallows',
+];
+
+export function useData() {
+ const ctx = useContext(DataContext);
+ if (ctx !== null) {
+ // This context is only provided on the server.
+ // It is here to simulate a suspending data fetch.
+ ctx.read();
+ }
+ return fakeData;
+}
diff --git a/fixtures/ssr2/src/index.js b/fixtures/ssr2/src/index.js
new file mode 100644
index 00000000000..0879e98e94d
--- /dev/null
+++ b/fixtures/ssr2/src/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {createRoot} from 'react-dom';
+import App from './App';
+import {DataProvider} from './data';
+
+const root = createRoot(document, {hydrate: true});
+root.render(