diff --git a/pages/posts.tsx b/pages/posts.tsx
index 6fc2eff..17258b1 100644
--- a/pages/posts.tsx
+++ b/pages/posts.tsx
@@ -1,7 +1,6 @@
-import { useState, useEffect } from "react";
-
 import { useRouter } from "next/router";
 import styled from "styled-components";
+import { GetServerSidePropsContext } from "next";
 
 import ScrollPagenation from "@src/components/common/scroll-pagenation";
 import PostListItem from "@src/components/post-list/post-list-item";
@@ -10,19 +9,14 @@ import { breakpoints } from "@src/styles/theme";
 import PostService from "@src/services/post.service";
 import { Post } from "@src/types/post.type";
 
-export default function PostListPage() {
+type PostListPageProps = {
+  posts: Post[];
+};
+
+export default function PostListPage({ posts }: PostListPageProps) {
   const router = useRouter();
   const tag = String(router.query.tag);
 
-  const [posts, setPosts] = useState<Post[]>([]);
-
-  useEffect(() => {
-    (async () => {
-      const posts: Post[] = await PostService.getPosts({ tag });
-      setPosts(posts);
-    })();
-  }, [tag]);
-
   return (
     <Container>
       <Wrapper>
@@ -35,6 +29,13 @@ export default function PostListPage() {
   );
 }
 
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const tag = String(context.query.tag);
+  const posts: Post[] = await PostService.getPosts({ tag });
+
+  return { props: { posts } };
+}
+
 const Container = styled.div`
   flex: 1;