페이지 이동 시간을 단축 시켜보자

// 문제가 되는 깊은 중첩 구조
<div id="level1">                 <!-- 1단계 -->
  <div id="level2">               <!-- 2단계 -->
    <div id="level3">             <!-- 3단계 -->
      <div id="level4">           <!-- 4단계 -->
        <div id="level5">         <!-- 5단계 -->
          매우 깊은 중첩
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="item">보다 단순한 구조</div>
</div>

function readMDXFile(filePath: string) {
  let rawContent = fs.readFileSync(filePath, "utf8");
  return parseFrontmatter(rawContent);
}

function browseMDXFiles(dir: string, fileList: string[] = []): string[] {
  const files = fs.readdirSync(dir);

  files.forEach((file: string) => {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);

    if (stat.isDirectory()) {
      fileList = browseMDXFiles(filePath, fileList);
    } else if (path.extname(file) === ".mdx") {
      fileList.push(filePath);
    }
  });
  return fileList;
}

export async function generateMetadata({
  params,
}: {
  params: { category: Cateogry; slug: string };
}): Promise<Partial<FrontMatter> | undefined> {
  const { category, slug } = params;
  const frontmatter = await getPostBySlug(slug);
  ...
}

async function Page({ params }: Props) {
  const { category, slug } = params;
  const frontmatter = await getPostBySlug(slug);
  ...
}

async function seedingAlgoPost() {
  const blog = await getBlog();
  ...
}

async function seedingAlgoPost(blog: any) {
  const blog = await getBlog();
  const algoPost = await blog.getAlogPost()
  ...
}

// tanstack query
const { data } = useSuspenseQuery({
  queryKey: bettingRoomQueryKey(roomId),
  queryFn: () => getBettingRoomInfo(roomId),
  staleTime: 1000 * 60 * 5, // ttl 시간을 설정
});

// swr
const { data, error } = useSWR("/api/data", fetcher, {
  refreshInterval: 3000, // ttl 시간을 설정
});