refactor: implement server-side rendering for auth-dependent pages

2 files changed, 91 insertions, 74 deletions

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f75e6ed..e8f4138 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,31 +1,14 @@
-"use client"
-
 import Link from "next/link"
-import { useSession, signOut } from "next-auth/react"
+import { getServerSession } from "next-auth"
+import { LogIn } from "lucide-react"
+
 import { Button } from "@/components/ui/button"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { LogIn, Settings, LogOut } from "lucide-react"
 import { ThemeToggle } from "@/components/ThemeToggle"
+import { UserNav } from "@/components/UserNav"
+import { authOptions } from "@/lib/auth"
 
-export default function Navbar() {
-  const { data: session, status } = useSession()
-
-  const getInitials = (name: string) => {
-    return name
-      .split(' ')
-      .map(word => word[0])
-      .join('')
-      .toUpperCase()
-      .slice(0, 2)
-  }
+export default async function Navbar() {
+  const session = await getServerSession(authOptions)
 
   return (
     <nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -39,56 +22,8 @@ export default function Navbar() {
         
         <div className="flex items-center space-x-4">
           <ThemeToggle />
-          {status === "loading" ? (
-            <div className="flex items-center space-x-2">
-              <div className="w-16 h-4 bg-muted animate-pulse rounded hidden sm:block" />
-              <div className="w-8 h-8 rounded-full bg-muted animate-pulse" />
-            </div>
-          ) : session ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="relative h-10 w-auto px-2 rounded-full">
-                  <div className="flex items-center space-x-2">
-                    <span className="text-sm font-medium hidden sm:block">
-                      {session.user?.name}
-                    </span>
-                    <Avatar className="h-8 w-8">
-                      <AvatarImage src={session.user?.image || ""} alt={session.user?.name || ""} />
-                      <AvatarFallback className="text-xs">
-                        {session.user?.name ? getInitials(session.user.name) : "U"}
-                      </AvatarFallback>
-                    </Avatar>
-                  </div>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent className="w-56" align="end" forceMount>
-                <DropdownMenuLabel className="font-normal">
-                  <div className="flex flex-col space-y-1">
-                    <p className="text-sm font-medium leading-none">
-                      {session.user?.name}
-                    </p>
-                    <p className="text-xs leading-none text-muted-foreground">
-                      {session.user?.email}
-                    </p>
-                  </div>
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem asChild>
-                  <Link href="/settings" className="w-full cursor-pointer">
-                    <Settings className="mr-2 h-4 w-4" />
-                    Settings
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem 
-                  className="cursor-pointer text-destructive hover:text-destructive focus:text-destructive"
-                  onClick={() => signOut()}
-                >
-                  <LogOut className="mr-2 h-4 w-4 text-destructive" />
-                  Log out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+          {session?.user ? (
+            <UserNav user={session.user} />
           ) : (
             <Button asChild>
               <Link href="/login">
diff --git a/src/components/UserNav.tsx b/src/components/UserNav.tsx
new file mode 100644
index 0000000..e11cad7
--- /dev/null
+++ b/src/components/UserNav.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import Link from "next/link"
+import { signOut } from "next-auth/react"
+import { LogOut, Settings } from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface UserNavProps {
+  user: {
+    name?: string | null
+    email?: string | null
+    image?: string | null
+  }
+}
+
+export function UserNav({ user }: UserNavProps) {
+  const getInitials = (name: string) => {
+    return name
+      .split(' ')
+      .map(word => word[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2)
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="relative h-10 w-auto px-2 rounded-full">
+          <div className="flex items-center space-x-2">
+            <span className="text-sm font-medium hidden sm:block">
+              {user.name}
+            </span>
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={user.image || ""} alt={user.name || ""} />
+              <AvatarFallback className="text-xs">
+                {user.name ? getInitials(user.name) : "U"}
+              </AvatarFallback>
+            </Avatar>
+          </div>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel className="font-normal">
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {user.name}
+            </p>
+            <p className="text-xs leading-none text-muted-foreground">
+              {user.email}
+            </p>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="/settings" className="w-full cursor-pointer">
+            <Settings className="mr-2 h-4 w-4" />
+            Settings
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem 
+          className="cursor-pointer text-destructive hover:text-destructive focus:text-destructive"
+          onClick={() => signOut()}
+        >
+          <LogOut className="mr-2 h-4 w-4 text-destructive" />
+          Log out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}