UserPage: Load user with getStatic props

web/pages/[username]/index.tsx

@@ -1,30 +1,45 @@
 import { useRouter } from 'next/router'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 
 import { getUserByUsername, User } from 'web/lib/firebase/users'
 import { UserPage } from 'web/components/user-page'
 import { useUser } from 'web/hooks/use-user'
 import Custom404 from '../404'
 import { useTracking } from 'web/hooks/use-tracking'
+import { fromPropz, usePropz } from 'web/hooks/use-propz'
+
+export const getStaticProps = fromPropz(getStaticPropz)
+export async function getStaticPropz(props: { params: { username: string } }) {
+  const { username } = props.params
+  const user = await getUserByUsername(username)
+
+  return {
+    props: {
+      user,
+    },
+
+    revalidate: 60, // regenerate after a minute
+  }
+}
+
+export async function getStaticPaths() {
+  return { paths: [], fallback: 'blocking' }
+}
+
+export default function UserProfile(props: { user: User | null }) {
+  props = usePropz(props, getStaticPropz) ?? { user: undefined }
+  const { user } = props
 
-export default function UserProfile() {
   const router = useRouter()
-  const [user, setUser] = useState<User | null | 'loading'>('loading')
   const { username, tab } = router.query as {
     username: string
     tab?: string | undefined
   }
-  useEffect(() => {
-    if (username) {
-      getUserByUsername(username).then(setUser)
-    }
-  }, [username])
-
   const currentUser = useUser()
 
   useTracking('view user profile', { username })
 
-  if (user === 'loading') return <div />
+  if (user === undefined) return <div />
 
   return user ? (
     <UserPage