diff --git a/client/src/app/(home)/components/Loading/index.stories.tsx b/client/src/app/(home)/components/Loading/index.stories.tsx
deleted file mode 100644
index 01126e8b..00000000
--- a/client/src/app/(home)/components/Loading/index.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Loading from './index';
-
-const meta: Meta<typeof Loading> = {
-  title: 'Components/home/Loading',
-  component: Loading,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-    componentSubtitle: '메인 페이지 로딩 시 보여지는 로딩 컴포넌트입니다.',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Loading>;
-
-export const Primary: Story = {};
diff --git a/client/src/app/(home)/components/PostsBox/index.tsx b/client/src/app/(home)/components/PostsBox/index.tsx
index 81e4e05a..85f2f3d4 100644
--- a/client/src/app/(home)/components/PostsBox/index.tsx
+++ b/client/src/app/(home)/components/PostsBox/index.tsx
@@ -6,8 +6,12 @@ import { IPostInformation } from '@/types';
 import { PostSummary } from '@/components/Post';
 import { LoadingIcon } from '@/components';
 
-function PostsBox() {
-  const { datas, hasNextPage } = useScroll();
+interface PostsBoxProps {
+  initialData?: { data: IPostInformation[]; nextPageParms?: string };
+}
+
+function PostsBox({ initialData }: PostsBoxProps) {
+  const { datas, hasNextPage } = useScroll({ initialData });
 
   return (
     <>
diff --git a/client/src/app/(home)/components/index.tsx b/client/src/app/(home)/components/index.tsx
index dfeddbb0..7f8f7fb9 100644
--- a/client/src/app/(home)/components/index.tsx
+++ b/client/src/app/(home)/components/index.tsx
@@ -1,3 +1,2 @@
-export { default as Loading } from './Loading';
 export { default as PostsBox } from './PostsBox';
 export { default as WritePostButton } from './WritePostButton';
diff --git a/client/src/app/(home)/hooks/useScroll.ts b/client/src/app/(home)/hooks/useScroll.ts
index ba54319a..e35eb3fb 100644
--- a/client/src/app/(home)/hooks/useScroll.ts
+++ b/client/src/app/(home)/hooks/useScroll.ts
@@ -1,11 +1,17 @@
 'use client';
 
 import getAllPosts from '@/service/post/getAllPosts';
+import { IPostInformation } from '@/types';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 
-function useScroll() {
+function useScroll({
+  initialData,
+}: {
+  initialData?: { data: IPostInformation[]; nextPageParms?: string };
+}) {
   const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
+    ...(!!initialData && initialData),
     queryKey: ['projects'],
     queryFn: getAllPosts,
     getNextPageParam: (lastPage) => lastPage?.nextPageParms,
diff --git a/client/src/app/(home)/components/Loading/index.tsx b/client/src/app/(home)/loading.tsx
similarity index 90%
rename from client/src/app/(home)/components/Loading/index.tsx
rename to client/src/app/(home)/loading.tsx
index e4dabd86..aec52441 100644
--- a/client/src/app/(home)/components/Loading/index.tsx
+++ b/client/src/app/(home)/loading.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import Skeleton from '../../../../components/Skeleton';
+import { Skeleton } from '@/components';
 
 function Loading() {
   return (
diff --git a/client/src/app/(home)/page.tsx b/client/src/app/(home)/page.tsx
index a8c2dd12..134ed685 100644
--- a/client/src/app/(home)/page.tsx
+++ b/client/src/app/(home)/page.tsx
@@ -1,19 +1,23 @@
 //core
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 
 //components
 import { Advertisement } from '@/components';
+import Loading from './loading';
 
 //third party
-import { Loading, PostsBox, WritePostButton } from './components';
+import { PostsBox, WritePostButton } from './components';
+import getAllPosts from '@/service/post/getAllPosts';
+
+export default async function Home() {
+  const data = await getAllPosts({});
 
-export default function Home() {
   return (
     <div className="flex justify-between max-w-5xl mx-auto">
       <div className="flex flex-col w-full gap-3 md:w-8/12">
         <WritePostButton />
         <Suspense fallback={<Loading />}>
-          <PostsBox />
+          <PostsBox initialData={data} />
         </Suspense>
       </div>
       <Advertisement />
diff --git a/client/src/app/board/components/Loading/index.tsx b/client/src/app/board/[id]/loading.tsx
similarity index 88%
rename from client/src/app/board/components/Loading/index.tsx
rename to client/src/app/board/[id]/loading.tsx
index ab7c25c7..5394d0b2 100644
--- a/client/src/app/board/components/Loading/index.tsx
+++ b/client/src/app/board/[id]/loading.tsx
@@ -1,5 +1,5 @@
+import { Skeleton } from '@/components';
 import React from 'react';
-import Skeleton from '../../../../components/Skeleton';
 
 function Loading() {
   return (
diff --git a/client/src/app/board/[id]/page.tsx b/client/src/app/board/[id]/page.tsx
index db973f5f..e37f73a8 100644
--- a/client/src/app/board/[id]/page.tsx
+++ b/client/src/app/board/[id]/page.tsx
@@ -2,7 +2,8 @@
 import React, { Suspense } from 'react';
 
 //components
-import { Loading, PostContent } from '@/app/board/components';
+import { PostContent } from '@/app/board/components';
+import Loading from './loading';
 
 //types
 import { postManager } from '@/service/post';
diff --git a/client/src/app/board/components/index.tsx b/client/src/app/board/components/index.tsx
index 25a3b508..5d3007ae 100644
--- a/client/src/app/board/components/index.tsx
+++ b/client/src/app/board/components/index.tsx
@@ -1,3 +1,2 @@
 export { default as PostContent } from './PostContent';
-export { default as Loading } from './Loading';
 export { default as PostDetail } from './PostDetail';