implement ssr

apps/frontend/src/pages/home.tsx

@@ -3,15 +3,21 @@ import PostRow from "../components/postRow";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../providers/AuthProvider";
+import { useSsrData } from "../ssr/context";
 import type { Post } from "../utils/types";
 
 export default function Home() {
-  const [posts, setPosts] = useState<Post[] | null>(null);
-  const [loaded, setLoaded] = useState<boolean>(false);
+  const ssr = useSsrData("home");
+  const [seededByServer] = useState<boolean>(() => ssr !== null);
+  const [posts, setPosts] = useState<Post[] | null>(ssr?.posts ?? null);
+  const [loaded, setLoaded] = useState<boolean>(seededByServer);
   const auth = useAuth();
   const navigate = useNavigate();
 
   useEffect(() => {
+    // Already rendered on the server with the post list baked in.
+    if (seededByServer) return;
+
     fetch("/api/posts", {
       method: "GET",
       credentials: "include",
@@ -25,7 +31,7 @@ export default function Home() {
         setLoaded(true);
       }
     });
-  }, []);
+  }, [seededByServer]);
 
   const PostList = () => {
     const mappedPosts = posts?.map((v, k) => {

apps/frontend/src/pages/post.tsx

@@ -2,16 +2,23 @@ import Layout from "../components/layout";
 import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { useAuth } from "../providers/AuthProvider";
+import { useSsrData } from "../ssr/context";
+import FormattedDate from "../components/formattedDate";
 import type { Post } from "../utils/types";
 import Markdown from "react-markdown";
 
 export default function Post() {
-  const [post, setPost] = useState<Post | null>(null);
+  const ssr = useSsrData("post");
+  const [seededByServer] = useState<boolean>(() => ssr !== null);
+  const [post, setPost] = useState<Post | null>(ssr?.post ?? null);
   const params = useParams();
   const navigate = useNavigate();
   const auth = useAuth();
 
   useEffect(() => {
+    // Already rendered on the server with the post baked in.
+    if (seededByServer) return;
+
     if (params.slug) {
       fetch("/api/posts/" + params.slug, {
         method: "GET",
@@ -25,7 +32,7 @@ export default function Post() {
         }
       });
     }
-  }, []);
+  }, [seededByServer, params.slug]);
 
   function deletePost() {
     if (!auth.user || !post) return;
@@ -63,9 +70,12 @@ export default function Post() {
           </div>
 
           <p className="text-sm opacity-50">
-            Posted {new Date(post.createdAt).toLocaleString()}{" "}
-            {post.updatedAt !== post.createdAt &&
-              "- updated on " + new Date(post.updatedAt).toLocaleString()}
+            Posted <FormattedDate value={post.createdAt} />{" "}
+            {post.updatedAt !== post.createdAt && (
+              <>
+                - updated on <FormattedDate value={post.updatedAt} />
+              </>
+            )}
           </p>
           {auth.user && (
             <div className="inline-block space-x-2">