fix: prerender homepage content

Author: aurorascharff

src/components/Layout/HomeContent.js

@@ -9,6 +9,8 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
+'use client';
+
 import {
   createContext,
   memo,
@@ -89,24 +91,30 @@ function FullBleed({children}) {
 }
 
 function CurrentTime() {
-  const [date, setDate] = useState(new Date());
-  const currentTime = date.toLocaleTimeString([], {
-    hour: 'numeric',
-    minute: 'numeric',
-  });
+  const [date, setDate] = useState(null);
+
   useEffect(() => {
     const msPerMinute = 60 * 1000;
-    let nextMinute = Math.floor(+date / msPerMinute + 1) * msPerMinute;
 
-    const timeout = setTimeout(() => {
-      if (Date.now() > nextMinute) {
-        setDate(new Date());
-      }
-    }, nextMinute - Date.now());
-    return () => clearTimeout(timeout);
-  }, [date]);
+    function updateDate() {
+      setDate(new Date());
+    }
+
+    updateDate();
+    const interval = setInterval(updateDate, msPerMinute);
+    return () => clearInterval(interval);
+  }, []);
 
-  return <span suppressHydrationWarning>{currentTime}</span>;
+  const currentTime = date?.toLocaleTimeString([], {
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+
+  return (
+    <span className={date === null ? 'invisible' : undefined}>
+      {currentTime ?? '00:00'}
+    </span>
+  );
 }
 
 const blogSidebar = sidebarBlog.routes[1];
@@ -2367,23 +2375,38 @@ function fetchConf(slug) {
   if (confCache.has(slug)) {
     return confCache.get(slug);
   }
+  const isInitialConference = slug === 'react-conf-2021';
+  let initialValue;
   const promise = new Promise((resolve) => {
-    setTimeout(() => {
+    const complete = (value) => {
+      initialValue = value;
+      resolve(value);
+    };
+    const load = () => {
       if (slug === 'react-conf-2021') {
-        resolve({
+        complete({
           id: 0,
           cover: reactConf2021Cover,
           name: 'React Conf 2021',
         });
       } else if (slug === 'react-conf-2019') {
-        resolve({
+        complete({
           id: 1,
           cover: reactConf2019Cover,
           name: 'React Conf 2019',
         });
       }
-    }, loadConfDelay);
+    };
+    if (isInitialConference) {
+      load();
+    } else {
+      setTimeout(load, loadConfDelay);
+    }
   });
+  if (isInitialConference) {
+    promise.status = 'fulfilled';
+    promise.value = initialValue;
+  }
   confCache.set(slug, promise);
   return promise;
 }
@@ -2392,10 +2415,16 @@ function fetchTalks(confId) {
   if (talksCache.has(confId)) {
     return talksCache.get(confId);
   }
+  const isInitialConference = confId === 0;
+  let initialValue;
   const promise = new Promise((resolve) => {
-    setTimeout(() => {
+    const complete = (value) => {
+      initialValue = value;
+      resolve(value);
+    };
+    const load = () => {
       if (confId === 0) {
-        resolve([
+        complete([
           {
             id: 'conf-2021-0',
             title: 'React 18 Keynote',
@@ -2577,7 +2606,7 @@ function fetchTalks(confId) {
           },
         ]);
       } else if (confId === 1) {
-        resolve([
+        complete([
           {
             id: 'conf-2019-0',
             title: 'Keynote (Part 1)',
@@ -2774,8 +2803,17 @@ function fetchTalks(confId) {
           },
         ]);
       }
-    }, loadTalksDelay);
+    };
+    if (isInitialConference) {
+      load();
+    } else {
+      setTimeout(load, loadTalksDelay);
+    }
   });
+  if (isInitialConference) {
+    promise.status = 'fulfilled';
+    promise.value = initialValue;
+  }
   talksCache.set(confId, promise);
   return promise;
 }

src/components/Layout/Page.tsx

@@ -11,7 +11,6 @@
 
 'use client';
 
-import {Suspense} from 'react';
 import * as React from 'react';
 import dynamic from 'next/dynamic';
 import {SidebarNav} from './SidebarNav';
@@ -154,34 +153,31 @@ export function Page({
             </div>
           </div>
         )}
-        {/* No fallback UI so need to be careful not to suspend directly inside. */}
-        <Suspense fallback={null}>
-          <main className="min-w-0 isolate">
-            <article
-              className="font-normal break-words text-primary dark:text-primary-dark"
-              key={pathname}>
-              {content}
-            </article>
+        <main className="min-w-0 isolate">
+          <article
+            className="font-normal break-words text-primary dark:text-primary-dark"
+            key={pathname}>
+            {content}
+          </article>
+          <div
+            className={cn(
+              'self-stretch w-full',
+              isHomePage && 'bg-wash dark:bg-gray-95 mt-[-1px]'
+            )}>
+            {!isHomePage && (
+              <div className="w-full px-5 pt-10 mx-auto sm:px-12 md:px-12 md:pt-12 lg:pt-10">
+                <hr className="mx-auto max-w-7xl border-border dark:border-border-dark" />
+              </div>
+            )}
             <div
               className={cn(
-                'self-stretch w-full',
-                isHomePage && 'bg-wash dark:bg-gray-95 mt-[-1px]'
+                'py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14',
+                isHomePage && 'lg:pt-0'
               )}>
-              {!isHomePage && (
-                <div className="w-full px-5 pt-10 mx-auto sm:px-12 md:px-12 md:pt-12 lg:pt-10">
-                  <hr className="mx-auto max-w-7xl border-border dark:border-border-dark" />
-                </div>
-              )}
-              <div
-                className={cn(
-                  'py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14',
-                  isHomePage && 'lg:pt-0'
-                )}>
-                <Footer />
-              </div>
+              <Footer />
             </div>
-          </main>
-        </Suspense>
+          </div>
+        </main>
         <div className="hidden -mt-16 lg:max-w-custom-xs 2xl:block">
           {showToc && toc.length > 0 && <Toc headings={toc} key={pathname} />}
         </div>