static loading of markets

web/pages/index.tsx

@@ -1,15 +1,28 @@
 import React from 'react'
-import type { NextPage } from 'next'
 
 import { useUser } from '../hooks/use-user'
 import Markets from './markets'
 import LandingPage from './landing-page'
+import { Contract, listAllContracts } from '../lib/firebase/contracts'
 
-const Home: NextPage = () => {
+export async function getStaticProps() {
+  const contracts = await listAllContracts().catch((_) => [])
+
+  return {
+    props: {
+      contracts,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+const Home = (props: { contracts: Contract[] }) => {
   const user = useUser()
 
   if (user === undefined) return <></>
-  return user ? <Markets /> : <LandingPage />
+
+  return user ? <Markets contracts={props.contracts} /> : <LandingPage />
 }
 
 export default Home

web/pages/markets.tsx

@@ -1,14 +1,29 @@
 import { SearchableGrid } from '../components/contracts-list'
 import { Header } from '../components/header'
 import { useContracts } from '../hooks/use-contracts'
+import { Contract, listAllContracts } from '../lib/firebase/contracts'
 
-export default function Markets() {
+export async function getStaticProps() {
+  const contracts = await listAllContracts().catch((_) => [])
+
+  return {
+    props: {
+      contracts,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+export default function Markets(props: { contracts: Contract[] }) {
   const contracts = useContracts()
 
   return (
     <div className="max-w-4xl px-4 pb-8 mx-auto">
       <Header />
-      <SearchableGrid contracts={contracts === 'loading' ? [] : contracts} />
+      <SearchableGrid
+        contracts={contracts === 'loading' ? props.contracts || [] : contracts}
+      />
     </div>
   )
 }