feat: implement prefetching for boards

codeit-bootcamp-frontend · Oct 26, 2024 · fec9eea · fec9eea
1 parent 23bb578
commit fec9eea
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/components/boards/BoardList.tsx b/components/boards/BoardList.tsx
@@ -11,8 +11,8 @@ import sortIcon from "@/public/ic_sort.svg";
 import Container from "../layout/Container";
 import { ArticleProps } from "@/types/articleTypes";
 
-const BoardList = () => {
-  const [boards, setBoards] = useState([]);
+const BoardList = ({ initialBoards }: { initialBoards: ArticleProps[] }) => {
+  const [boards, setBoards] = useState(initialBoards);
   const [order, setOrder] = useState("recent");
   const router = useRouter();
   const { keyword } = router.query;

diff --git a/pages/boards.tsx b/pages/boards.tsx
@@ -1,11 +1,24 @@
 import BestBoards from "@/components/boards/BestBoards";
 import BoardList from "@/components/boards/BoardList";
+import { fetchData } from "@/lib/fetchData";
+import { ArticleProps } from "@/types/articleTypes";
 
-const Boards = () => {
+export const getStaticProps = async () => {
+  const BASE_URL = "https://panda-market-api.vercel.app/articles";
+  const { list } = await fetchData(BASE_URL);
+
+  return {
+    props: {
+      initialBoards: list,
+    },
+  };
+};
+
+const Boards = ({ initialBoards }: { initialBoards: ArticleProps[] }) => {
   return (
     <>
       <BestBoards />
-      <BoardList />
+      <BoardList initialBoards={initialBoards} />
     </>
   );
 };