diff --git a/apps/jurumarble/src/app/main/containers/HydratedHotDrinkContainer.tsx b/apps/jurumarble/src/app/main/containers/HydratedHotDrinkContainer.tsx
new file mode 100644
index 00000000..6a5f69ac
--- /dev/null
+++ b/apps/jurumarble/src/app/main/containers/HydratedHotDrinkContainer.tsx
@@ -0,0 +1,17 @@
+import { dehydrate } from "@tanstack/query-core";
+import { getHotDrinkList } from "lib/apis/vote/getHotDrinkList";
+import getQueryClient from "src/modules/getQueryClient";
+import HydrateOnClient from "src/modules/hydrateOnClient";
+import HotDrinkContainer from "../components/HotDrinkContainer";
+import { hotDrinkListQueryKey } from "../services/queryKey";
+
+export const HydratedHotDrinkContainer = async () => {
+  const qc = getQueryClient();
+  await qc.prefetchQuery([hotDrinkListQueryKey], getHotDrinkList);
+  const dehydratedState = dehydrate(qc);
+  return (
+    <HydrateOnClient state={dehydratedState}>
+      <HotDrinkContainer />
+    </HydrateOnClient>
+  );
+};
diff --git a/apps/jurumarble/src/app/main/services/queryKey.ts b/apps/jurumarble/src/app/main/services/queryKey.ts
index b141f098..24c5e757 100644
--- a/apps/jurumarble/src/app/main/services/queryKey.ts
+++ b/apps/jurumarble/src/app/main/services/queryKey.ts
@@ -1 +1,2 @@
 export const hotDrinkVoteQueryKey = "hotDrinkVote";
+export const hotDrinkListQueryKey = "searchDrinkList";
diff --git a/apps/jurumarble/src/app/main/services/useGetHotDrinkListService.ts b/apps/jurumarble/src/app/main/services/useGetHotDrinkListService.ts
index 090aa9b7..087dbddf 100644
--- a/apps/jurumarble/src/app/main/services/useGetHotDrinkListService.ts
+++ b/apps/jurumarble/src/app/main/services/useGetHotDrinkListService.ts
@@ -1,11 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import { getHotDrinkList } from "lib/apis/drink";
 import { queryKeys } from "lib/queryKeys";
-
-const getQueryKey = () => [queryKeys.SEARCH_DRINK_LIST];
+import { hotDrinkListQueryKey } from "./queryKey";
 
 export default function useGetHotDrinkListService() {
-  const { data } = useQuery(getQueryKey(), getHotDrinkList);
+  const { data } = useQuery([hotDrinkListQueryKey], getHotDrinkList);
 
   return { data };
 }
diff --git a/apps/jurumarble/src/app/page.tsx b/apps/jurumarble/src/app/page.tsx
index 165c3c7d..57d1c69c 100644
--- a/apps/jurumarble/src/app/page.tsx
+++ b/apps/jurumarble/src/app/page.tsx
@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import { getClassNames } from "lib/styles/getClassNames";
 import styles from "./page.module.css";
 import { HydratedDrinkVoteContainer } from "./main/containers/HydratedDrinkVoteContainer";
+import { HydratedHotDrinkContainer } from "./main/containers/HydratedHotDrinkContainer";
 
 const DynamicHotDrinkContainer = dynamic(() => import("./main/components/HotDrinkContainer"), {
   ssr: false,
@@ -34,7 +35,8 @@ function MainPage() {
       <section className={cx("main-top-section")}>
         <DynamicBanner />
         <DynamicSearchInputWrapper />
-        <DynamicHotDrinkContainer />
+        {/* @ts-expect-error Server Component */}
+        <HydratedHotDrinkContainer />
       </section>
       <div className={cx("main-divide-line")} />
       <section className={cx("main-bottom-section")}>
diff --git a/apps/jurumarble/src/lib/apis/vote/getHotDrinkList.ts b/apps/jurumarble/src/lib/apis/vote/getHotDrinkList.ts
new file mode 100644
index 00000000..71235d2f
--- /dev/null
+++ b/apps/jurumarble/src/lib/apis/vote/getHotDrinkList.ts
@@ -0,0 +1,13 @@
+import { SERVER_URL } from "lib/env";
+
+export interface GetHotDrinkResponse {
+  drinkId: number;
+  name: string;
+  manufactureAddress: string;
+  image: string;
+}
+export const getHotDrinkList = async () => {
+  const res = await fetch(`${SERVER_URL}api/drinks/hot`);
+  const data = await res.json();
+  return data as GetHotDrinkResponse[];
+};