Refactor: 포트폴리오 상세 페이지 ssr으로 리팩토링

src/app/(portfolio)/[username]/page.tsx

@@ -1,6 +1,12 @@
 import Portfolio from '@/containers/portfolio/Portfolio'
 import { fetchPortfolio } from '@/fetch/fetchPortfolio'
 import { removeTagsText } from '@/lib/utils'
+import { getPortfolio } from '@/services/portfolio'
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from '@tanstack/react-query'
 import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
@@ -51,6 +57,23 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   return metadata
 }
 
-export default function UserPage({ params }: { params: { username: string } }) {
-  return <Portfolio username={params.username} />
+export default async function UserPage({
+  params,
+}: {
+  params: { username: string }
+}) {
+  const queryClient = new QueryClient()
+
+  await queryClient.prefetchQuery({
+    queryKey: ['portfolio', params.username],
+    queryFn: () => getPortfolio(params.username),
+    staleTime: 60 * 1000,
+  })
+
+  const dehydratedState = dehydrate(queryClient)
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <Portfolio username={params.username} />
+    </HydrationBoundary>
+  )
 }

src/containers/portfolio/Portfolio.tsx

@@ -12,12 +12,13 @@ interface PortfolioProps {
 }
 
 export default function Portfolio({ username }: PortfolioProps) {
-  const { data, isLoading } = usePortfolioQuery(username)
-  const { data: currentUser, isLoading: isLoadingCurrentUser } = useAuthQuery()
+  const { data } = usePortfolioQuery(username)
+  const { data: currentUser } = useAuthQuery()
 
-  if (isLoading || isLoadingCurrentUser || !data) {
+  if (!data) {
     return null
   }
+
   return (
     <>
       <PortfolioLayout>

src/hooks/queries/portfolio.ts

@@ -51,6 +51,7 @@ export const usePortfolioQuery = (username: string) => {
     queryKey: ['portfolio', username],
     queryFn: () => getPortfolio(username),
     enabled: !!username,
+    staleTime: 60 * 1000,
   })
 }