✨ 스레드 프리페칭

- 메시지 프리페칭 로직을 마운트 이후로 변경, (서버사이드 시점에서 스레드 프리페칭이 되었는지 알 방도가 없음)

Author: fecapark

src/apis/keys.ts

@@ -1,3 +1,7 @@
 export const getMessagesQueryKey = (threadId: string) => {
   return ['messages', threadId]
 }
+
+export const getThreadsQueryKey = (channelId: string) => {
+  return ['threads', channelId]
+}

src/app/archives/[channelId]/components/ChannelPanel.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { ChannelItem } from '@/apis/channels'
+import { getMessagesQueryKey, getThreadsQueryKey } from '@/apis/keys'
+import { getMessages } from '@/apis/messages'
+import { getThreads } from '@/apis/threads'
+import { SlackThreadLinkItem } from '@/app/archives/[channelId]/components/SlackThreadLinkItem'
+import { ArchivePannel } from '@/app/archives/components/ArchivePannel'
+import { SidebarChannelIcon } from '@/app/archives/components/Icons/SidebarChannelIcon'
+import { getQueryClient } from '@/utils/query'
+import { useSuspenseQuery } from '@tanstack/react-query'
+
+interface ChannelPanelProps {
+  channel: ChannelItem
+}
+
+export const ChannelPanel = ({ channel }: ChannelPanelProps) => {
+  const { data: threads } = useSuspenseQuery({
+    queryKey: getThreadsQueryKey(channel.id),
+    queryFn: async () => getThreads(channel.id),
+  })
+
+  useEffect(() => {
+    const prefetchMessages = async () => {
+      const queryClient = getQueryClient()
+      await Promise.all(
+        threads.map((thread) =>
+          queryClient.prefetchQuery({
+            queryKey: getMessagesQueryKey(thread.head.ts),
+            queryFn: () => getMessages(thread.head.ts),
+          })
+        )
+      )
+    }
+    prefetchMessages()
+  }, [threads])
+
+  return (
+    <ArchivePannel
+      className="absolute z-[1] w-full md:static"
+      closeLink="/archives"
+      description={channel.description}
+      title={
+        <div className="flex items-center">
+          <SidebarChannelIcon className="mr-1 size-4" /> {channel.name}
+        </div>
+      }
+    >
+      <div className="flex h-0 grow flex-col overflow-y-auto">
+        {threads.map(({ head, archivedAt, metadata }, index) => (
+          <SlackThreadLinkItem
+            archivedAt={archivedAt}
+            head={head}
+            isFirstItem={index === 0}
+            key={head.ts}
+            metadata={metadata}
+          />
+        ))}
+      </div>
+    </ArchivePannel>
+  )
+}

src/app/archives/[channelId]/layout.tsx

@@ -1,68 +1,20 @@
 import { getChannel } from '@/apis/channels'
-import { getMessagesQueryKey } from '@/apis/keys'
-import { getMessages } from '@/apis/messages'
-import { getThreads } from '@/apis/threads'
-import { SlackThreadLinkItem } from '@/app/archives/[channelId]/components/SlackThreadLinkItem'
-import { ArchivePannel } from '@/app/archives/components/ArchivePannel'
-import { SidebarChannelIcon } from '@/app/archives/components/Icons/SidebarChannelIcon'
-import { compareSlackTimestampDesc } from '@/utils/date'
-import { withDehydratedState } from '@/utils/query'
-import { HydrationBoundary, QueryClient } from '@tanstack/react-query'
+import { ChannelPanel } from '@/app/archives/[channelId]/components/ChannelPanel'
 
 interface ChannelLayoutProps {
   params: Promise<{
     channelId: string
   }>
 }
 
-const fetchChannelPageData = withDehydratedState(
-  async ({ queryClient, channelId }: { channelId: string; queryClient: QueryClient }) => {
-    const [channel, threads] = await Promise.all([getChannel(channelId), getThreads(channelId)])
-    await Promise.all(
-      threads.map((thread) =>
-        queryClient.prefetchQuery({
-          queryKey: getMessagesQueryKey(thread.head.ts),
-          queryFn: () => getMessages(thread.head.ts),
-        })
-      )
-    )
-
-    return {
-      channel,
-      threads: threads.toSorted((a, b) => compareSlackTimestampDesc(a.head.ts, b.head.ts)),
-    }
-  }
-)
-
 const ChannelLayout = async ({ params, children }: React.PropsWithChildren<ChannelLayoutProps>) => {
   const { channelId } = await params
-  const { dehydratedState, channel, threads } = await fetchChannelPageData({ channelId })
+  const channel = await getChannel(channelId)
 
   return (
     <div className="relative flex items-center gap-2">
-      <ArchivePannel
-        className="absolute z-[1] w-full md:static"
-        closeLink="/archives"
-        description={channel.description}
-        title={
-          <div className="flex items-center">
-            <SidebarChannelIcon className="mr-1 size-4" /> {channel.name}
-          </div>
-        }
-      >
-        <div className="flex h-0 grow flex-col overflow-y-auto">
-          {threads.map(({ head, archivedAt, metadata }, index) => (
-            <SlackThreadLinkItem
-              archivedAt={archivedAt}
-              head={head}
-              isFirstItem={index === 0}
-              key={head.ts}
-              metadata={metadata}
-            />
-          ))}
-        </div>
-      </ArchivePannel>
-      <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+      <ChannelPanel channel={channel} />
+      {children}
     </div>
   )
 }

src/app/archives/layout.tsx

@@ -1,10 +1,30 @@
 import { getChannels } from '@/apis/channels'
+import { getThreadsQueryKey } from '@/apis/keys'
+import { getThreads } from '@/apis/threads'
 import { ArchivePannel } from '@/app/archives/components/ArchivePannel'
 import { SidebarChannelItem } from '@/app/archives/components/SidebarChannelItem'
+import { withDehydratedState } from '@/utils/query'
+import { HydrationBoundary } from '@tanstack/react-query'
 
-const ArchivesLayout = async ({ children }: React.PropsWithChildren<unknown>) => {
+const fetchArchivesPageData = withDehydratedState(async ({ queryClient }) => {
   const channels = await getChannels()
 
+  await Promise.all(
+    channels.map((channel) =>
+      queryClient.prefetchQuery({
+        queryKey: getThreadsQueryKey(channel.id),
+        queryFn: () => getThreads(channel.id),
+      })
+    )
+  )
+
+  return {
+    channels,
+  }
+})
+const ArchivesLayout = async ({ children }: React.PropsWithChildren<unknown>) => {
+  const { channels, dehydratedState } = await fetchArchivesPageData()
+
   return (
     <div className="relative grid h-full grid-cols-[1fr] grid-rows-[1fr] gap-2 overflow-hidden px-0 py-2 md:grid-cols-[320px_1fr] md:px-5">
       <ArchivePannel className="absolute z-[1] w-full md:static" title="채널">
@@ -14,7 +34,7 @@ const ArchivesLayout = async ({ children }: React.PropsWithChildren<unknown>) =>
           ))}
         </div>
       </ArchivePannel>
-      {children}
+      <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
     </div>
   )
 }