✨ fetch 함수로 ISR 설정

src/app/api/users/route.ts

@@ -1,11 +1,21 @@
 import { NextResponse } from 'next/server'
-import { apiServer } from '@/lib/axiosSever'
+import { Environment } from '@/config/environments'
 
 export async function GET(_request: Request) {
   try {
-    const { data } = await apiServer.get(`/users/get-users`)
+    const allUserRes = await fetch(`${Environment.baseUrl()}/users/get-users`, {
+      next: {
+        revalidate: 5,
+      },
+    })
 
-    return new Response(JSON.stringify(data))
+    if (allUserRes.ok) {
+      const allUser = await allUserRes.json()
+
+      return new Response(JSON.stringify(allUser))
+    }
+
+    return new Response(JSON.stringify(allUserRes))
   } catch (error: any) {
     return NextResponse.json(
       { error: error.response.data.message },

src/components/molcules/EditNamesForm/EditNamesform.tsx

@@ -33,9 +33,10 @@ const EditNamesform = ({ fullName }: NameProps) => {
           setCurrentName(data.fullName)
           notify('success', '닉네임이 수정되었습니다.')
           setValue('fullName', '')
-          location.reload()
         } catch (error) {
           notify('error', '닉네임 수정에 실패했습니다.')
+        } finally {
+          location.reload()
         }
       })}
       style={{ display: 'flex', justifyContent: 'space-between' }}

src/components/organisms/NavBar/UserList/HydratedUserList.tsx

@@ -5,7 +5,9 @@ import UserList from './UserList'
 
 export default async function HydratedUserList() {
   const queryClient = getQueryClient()
-  await queryClient.prefetchQuery(['getAllUsers'], getAllUsers)
+  await queryClient.prefetchQuery(['getAllUsers'], getAllUsers, {
+    staleTime: Infinity,
+  })
   const dehydratedState = dehydrate(queryClient)
 
   return (

src/components/organisms/NavBar/UserList/UserList.tsx

@@ -5,11 +5,12 @@ import Avatar from '@/components/atoms/Avatar'
 import { Text } from '@/components/atoms/Text'
 import APP_PATH from '@/config/paths'
 import useFollow from '@/hooks/useFollow'
-import useGetAllUsers from '@/queries/users'
+import { useGetAllUsers } from '@/queries/users'
 import { UserSummary } from '@/types/user'
 
 export default function UserList() {
   const { data } = useGetAllUsers()
+
   return (
     <>
       <div className="nav-title">
@@ -21,7 +22,9 @@ export default function UserList() {
         </div>
       </div>
       <ul className="avatar-list">
-        {data?.map((user) => <UserListItem key={user._id} userData={user} />)}
+        {data?.map((user: UserSummary) => (
+          <UserListItem key={user._id} userData={user} />
+        ))}
       </ul>
     </>
   )

src/queries/users/index.ts

@@ -1,23 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
-import { useCurrentUser } from '@/hooks/useCurrentUser'
 import { getAllUsers } from '@/services/user'
-import { UserSummary } from '@/types/user'
 
-const useGetAllUsers = () => {
-  const { currentUser } = useCurrentUser()
+export const useGetAllUsers = () => {
   return useQuery({
-    queryKey: [
-      'getAllUsers',
-      currentUser?._id,
-      currentUser?.coverImage,
-      currentUser?.fullName,
-      currentUser?.name,
-    ],
-    queryFn: async () => {
-      const data: UserSummary[] = await getAllUsers()
-      return data
-    },
+    queryKey: ['getAllUsers'],
+    queryFn: getAllUsers,
   })
 }
-
-export default useGetAllUsers