Next.JS로 [crud] dynamic rendering

현재 코딩애플님의 nextjs강의를 들으면서 공부를 하고 있습니다.

Route (app)                                Size     First Load JS
┌ ○ /                                      176 B          79.8 kB
├ ○ /api/hello                             0 B                0 B
├ λ /detail/[...id]                        4.96 kB        79.1 kB
├ λ /edit/[...id]                          137 B          74.2 kB
├ ○ /favicon.ico                           0 B                0 B
├ ○ /list                                  1.22 kB        80.8 kB
└ ○ /write                                 2.29 kB        76.4 kB

현재 crud를 만들어보고 있는데
npm run build를 하고 start를 입력후 실행을 했을때 그리고 글을 하나 만들어 봤을때,
글 작성후 바로 글 리스트에 생기지가 않고, 새로고침을 해야 나오게 되는데

이게 List페이지가 정적인 렌더링을 하기에 그렇다.
이걸 다이나믹 렌더링으로 바꿔줘야 내가 원하는 동작이 나오게 된다.

방법은 간단하다.

/** @format */
import React from "react";

import clientPromise from "@/utils/database";
import ListItem, { ListProps } from "./ListItem";

export const dynamic = "force-dynamic";

const List = async () => {
  const db = (await clientPromise).db("board");
  const result = (await db.collection("post").find().toArray()) as ListProps[];
  return (
    <div className="w-screen h-screen p-5">
      <ListItem result={result} />
    </div>
  );
};

export default List;

이게 내가 공부하면서 기억하고 복습하면서 다시 만든 부분인데

export const dynamic = "force-dynamic";

이 구문 하나를 써넣으면

Route (app)                                Size     First Load JS
┌ ○ /                                      176 B          79.8 kB
├ ○ /api/hello                             0 B                0 B
├ λ /detail/[...id]                        4.96 kB        79.1 kB
├ λ /edit/[...id]                          137 B          74.2 kB
├ ○ /favicon.ico                           0 B                0 B
├ λ /list                                  1.22 kB        80.8 kB
└ ○ /write                                 2.29 kB        76.4 kB

여기서 동그라미는 정적인 렌더링
람다는 다이나믹 렌더링이다. list페이지 렌더링 방식이 바뀌었음을 알수가 있다.

만약 여기서 정적인 렌더링으로 바꾸고 싶다.

export const dynamic = "force-static";

으로 바꾸면 된다.