Consume RSC response in the server

packages/dev/src/components/Welcome.server.jsx

@@ -1,5 +1,6 @@
 import {useShopQuery, flattenConnection, Link} from '@shopify/hydrogen';
 import gql from 'graphql-tag';
+import {Suspense} from 'react';
 
 function ExternalIcon() {
   return (
@@ -31,7 +32,20 @@ function DocsButton({url, label}) {
   );
 }
 
-function StorefrontInfo({shopName, totalProducts, totalCollections}) {
+function BoxFallback() {
+  return (
+    <div className="bg-white p-12 shadow-xl rounded-xl text-gray-900 h-60"></div>
+  );
+}
+
+function StorefrontInfo() {
+  const {data} = useShopQuery({query: QUERY});
+  const shopName = data ? data.shop.name : '';
+  const products = data && flattenConnection(data.products);
+  const collections = data && flattenConnection(data.collections);
+  const totalProducts = products && products.length;
+  const totalCollections = collections && collections.length;
+
   const pluralize = (count, noun, suffix = 's') =>
     `${count} ${noun}${count === 1 ? '' : suffix}`;
   return (
@@ -71,7 +85,14 @@ function StorefrontInfo({shopName, totalProducts, totalCollections}) {
   );
 }
 
-function TemplateLinks({firstProductPath, firstCollectionPath}) {
+function TemplateLinks() {
+  const {data} = useShopQuery({query: QUERY});
+  const products = data && flattenConnection(data.products);
+  const collections = data && flattenConnection(data.collections);
+
+  const firstProduct = products && products.length ? products[0].handle : '';
+  const firstCollection = collections[0] ? collections[0].handle : '';
+
   return (
     <div className="bg-white p-12 md:p-12 shadow-xl rounded-xl text-gray-900">
       <p className="text-md font-medium uppercase mb-4">
@@ -80,15 +101,15 @@ function TemplateLinks({firstProductPath, firstCollectionPath}) {
       <ul>
         <li className="mb-4">
           <Link
-            to={`/collections/${firstCollectionPath}`}
+            to={`/collections/${firstCollection}`}
             className="text-md font-medium text-blue-700 hover:underline"
           >
             Collection template
           </Link>
         </li>
         <li className="mb-4">
           <Link
-            to={`/products/${firstProductPath}`}
+            to={`/products/${firstProduct}`}
             className="text-md font-medium text-blue-700 hover:underline"
           >
             Product template
@@ -111,16 +132,6 @@ function TemplateLinks({firstProductPath, firstCollectionPath}) {
  * A server component that displays the content on the homepage of the Hydrogen app
  */
 export default function Welcome() {
-  const {data} = useShopQuery({query: QUERY});
-  const shopName = data ? data.shop.name : '';
-  const products = data && flattenConnection(data.products);
-  const collections = data && flattenConnection(data.collections);
-
-  const firstProduct = products && products.length ? products[0].handle : '';
-  const totalProducts = products && products.length;
-  const firstCollection = collections[0] ? collections[0].handle : '';
-  const totalCollections = collections && collections.length;
-
   return (
     <div className="text-gray-900 pt-16 rounded-[40px] my-16 px-4 xl:px-12 bg-gradient-to-b from-white -mx-4 xl:-mx-12">
       <div className="text-center mb-16">
@@ -143,15 +154,12 @@ export default function Welcome() {
         </div>
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
-        <StorefrontInfo
-          shopName={shopName}
-          totalProducts={totalProducts}
-          totalCollections={totalCollections}
-        />
-        <TemplateLinks
-          firstProductPath={firstProduct}
-          firstCollectionPath={firstCollection}
-        />
+        <Suspense fallback={<BoxFallback />}>
+          <StorefrontInfo />
+        </Suspense>
+        <Suspense fallback={<BoxFallback />}>
+          <TemplateLinks />
+        </Suspense>
       </div>
     </div>
   );

packages/dev/src/pages/index.server.jsx

@@ -11,6 +11,94 @@ import Layout from '../components/Layout.server';
 import FeaturedCollection from '../components/FeaturedCollection';
 import ProductCard from '../components/ProductCard';
 import Welcome from '../components/Welcome.server';
+import {Suspense} from 'react';
+
+export default function Index({country = {isoCode: 'US'}}) {
+  return (
+    <Layout hero={<GradientBackground />}>
+      <div className="relative mb-12">
+        <Welcome />
+        <Suspense fallback={<BoxFallback />}>
+          <FeaturedProductsBox country={country} />
+        </Suspense>
+        <Suspense fallback={<BoxFallback />}>
+          <FeaturedCollectionBox country={country} />
+        </Suspense>
+      </div>
+    </Layout>
+  );
+}
+
+function BoxFallback() {
+  return <div className="bg-white p-12 shadow-xl rounded-xl mb-10 h-40"></div>;
+}
+
+function FeaturedProductsBox({country}) {
+  const {data} = useShopQuery({
+    query: QUERY,
+    variables: {
+      country: country.isoCode,
+    },
+  });
+
+  const collections = data ? flattenConnection(data.collections) : [];
+  const featuredProductsCollection = collections[0];
+  const featuredProducts = featuredProductsCollection
+    ? flattenConnection(featuredProductsCollection.products)
+    : null;
+
+  return (
+    <div className="bg-white p-12 shadow-xl rounded-xl mb-10">
+      {featuredProductsCollection ? (
+        <>
+          <div className="flex justify-between items-center mb-8 text-md font-medium">
+            <span className="text-black uppercase">
+              {featuredProductsCollection.title}
+            </span>
+            <span className="hidden md:inline-flex">
+              <Link
+                to={`/collections/${featuredProductsCollection.handle}`}
+                className="text-blue-600 hover:underline"
+              >
+                Shop all
+              </Link>
+            </span>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
+            {featuredProducts.map((product) => (
+              <div key={product.id}>
+                <ProductCard product={product} />
+              </div>
+            ))}
+          </div>
+          <div className="md:hidden text-center">
+            <Link
+              to={`/collections/${featuredProductsCollection.handle}`}
+              className="text-blue-600"
+            >
+              Shop all
+            </Link>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function FeaturedCollectionBox({country}) {
+  const {data} = useShopQuery({
+    query: QUERY,
+    variables: {
+      country: country.isoCode,
+    },
+  });
+
+  const collections = data ? flattenConnection(data.collections) : [];
+  const featuredCollection =
+    collections && collections.length > 1 ? collections[1] : collections[0];
+
+  return <FeaturedCollection collection={featuredCollection} />;
+}
 
 function GradientBackground() {
   return (
@@ -67,66 +155,6 @@ function GradientBackground() {
   );
 }
 
-export default function Index({country = {isoCode: 'US'}}) {
-  const {data} = useShopQuery({
-    query: QUERY,
-    variables: {
-      country: country.isoCode,
-    },
-  });
-
-  const collections = data ? flattenConnection(data.collections) : [];
-  const featuredProductsCollection = collections[0];
-  const featuredProducts = featuredProductsCollection
-    ? flattenConnection(featuredProductsCollection.products)
-    : null;
-  const featuredCollection =
-    collections && collections.length > 1 ? collections[1] : collections[0];
-
-  return (
-    <Layout hero={<GradientBackground />}>
-      <div className="relative mb-12">
-        <Welcome />
-        <div className="bg-white p-12 shadow-xl rounded-xl mb-10">
-          {featuredProductsCollection ? (
-            <>
-              <div className="flex justify-between items-center mb-8 text-md font-medium">
-                <span className="text-black uppercase">
-                  {featuredProductsCollection.title}
-                </span>
-                <span className="hidden md:inline-flex">
-                  <Link
-                    to={`/collections/${featuredProductsCollection.handle}`}
-                    className="text-blue-600 hover:underline"
-                  >
-                    Shop all
-                  </Link>
-                </span>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
-                {featuredProducts.map((product) => (
-                  <div key={product.id}>
-                    <ProductCard product={product} />
-                  </div>
-                ))}
-              </div>
-              <div className="md:hidden text-center">
-                <Link
-                  to={`/collections/${featuredCollection.handle}`}
-                  className="text-blue-600"
-                >
-                  Shop all
-                </Link>
-              </div>
-            </>
-          ) : null}
-        </div>
-        <FeaturedCollection collection={featuredCollection} />
-      </div>
-    </Layout>
-  );
-}
-
 const QUERY = gql`
   query indexContent(
     $country: CountryCode

packages/hydrogen/package.json

@@ -63,7 +63,7 @@
     "@rollup/plugin-graphql": "^1.0.0",
     "@types/connect": "^3.4.34",
     "@types/graphql": "^14.5.0",
-    "@types/node": "^15.12.4",
+    "@types/node": "^16.11.7",
     "@types/node-fetch": "^2.5.9",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",

packages/hydrogen/src/entry-client.tsx

@@ -4,7 +4,7 @@ import {createRoot} from 'react-dom';
 import {BrowserRouter} from 'react-router-dom';
 import type {ClientHandler, ShopifyConfig} from './types';
 import {ErrorBoundary} from 'react-error-boundary';
-import {useServerResponse} from './framework/Hydration/Cache.client';
+import {useServerResponse} from './framework/Hydration/rsc';
 import {
   ServerStateProvider,
   ServerStateRouter,