Use SSR for news

web/pages/news.tsx

@@ -1,14 +1,27 @@
-import {useEffect, useState} from "react"
-import axios from "axios"
 import {PageBase} from "web/components/page-base"
 import {SEO} from "web/components/SEO"
 import {Col} from "web/components/layout/col"
 import {Title} from "web/components/widgets/title"
-import {CompassLoadingIndicator} from "web/components/widgets/loading-indicator"
 import {githubRepoSlug} from "common/constants";
 import {CustomMarkdown} from "web/components/markdown";
 import {CustomLink} from "web/components/links";
 
+// Use SSR for SEO and better performance / caching
+export async function getStaticProps() {
+  const releases = await fetch(`https://api.github.com/repos/${githubRepoSlug}/releases`)
+    .then(r => r.json())
+    .catch(e => {
+      console.error("Failed to fetch releases", e)
+      return []
+    })
+
+  return {
+    props: {releases},
+    revalidate: 3600, // refresh every hour
+  };
+}
+
+
 type Release = {
   id: number
   name: string
@@ -18,33 +31,8 @@ type Release = {
   html_url: string
 }
 
-export default function WhatsNew() {
-  const [releases, setReleases] = useState([])
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    async function fetchReleases() {
-      try {
-        const response = await axios.get(
-          `https://api.github.com/repos/${githubRepoSlug}/releases`,
-          {
-            headers: {
-              // Optional: if hitting rate limits, use a GitHub token
-              // Authorization: `token ${process.env.REACT_APP_GITHUB_TOKEN}`
-            },
-          }
-        )
-        setReleases(response.data)
-      } catch (err) {
-        setError("Failed to fetch releases")
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchReleases()
-  }, [])
+export default function WhatsNew(props: { releases: Release[] }) {
+  const {releases} = props
 
   return (
     <PageBase trackPageView={'news'} className={'mx-4'}>
@@ -54,26 +42,25 @@ export default function WhatsNew() {
         url={`/news`}
       />
       <Title className="text-3xl">What's New</Title>
-      {loading ? <CompassLoadingIndicator/> :
-        error ? <p>{error}</p> :
-          <Col className="max-w-3xl mx-auto py-10 px-4 custom-link">
-            {releases.map((release: Release) => (
-              <div key={release.id} className="mb-10 border-b pb-6">
-                <div className="flex justify-between items-center">
-                  <h2 className="text-xl font-semibold">{release.name || release.tag_name}</h2>
-                  <span className="text-sm text-gray-500">
-                    {new Date(release.published_at).toLocaleDateString()}
+      {!releases.length ? <p>Failed to fetch releases.</p> :
+        <Col className="max-w-3xl mx-auto py-10 px-4 custom-link">
+          {releases.map((release: Release) => (
+            <div key={release.id} className="mb-10 border-b pb-6">
+              <div className="flex justify-between items-center">
+                <h2 className="text-xl font-semibold">{release.name || release.tag_name}</h2>
+                <span className="text-sm text-gray-500">
+                    {new Date(release.published_at).toISOString().split('T')[0]}
                   </span>
-                </div>
-                <div className="mt-4 mb-4 prose prose-neutral dark:prose-invert text-ink-1000">
-                  <CustomMarkdown>
-                    {formatPullLinks(release.body || "_No release notes provided._")}
-                  </CustomMarkdown>
-                </div>
-                <CustomLink href={release.html_url}>View on GitHub</CustomLink>
               </div>
-            ))}
-          </Col>
+              <div className="mt-4 mb-4 prose prose-neutral dark:prose-invert text-ink-1000">
+                <CustomMarkdown>
+                  {formatPullLinks(release.body || "_No release notes provided._")}
+                </CustomMarkdown>
+              </div>
+              <CustomLink href={release.html_url}>View on GitHub</CustomLink>
+            </div>
+          ))}
+        </Col>
       }
     </PageBase>
   )