리바이 개발 블로그

Posts 메인 페이지에서 매번 새로고침할때마다 리랜더링 되는 것을 방지하기 위해서 Incremental Static Regeneration (ISR) 방식을 이용하여 정적 페이지로 바꿈 (SSG - Static Site Generation)

ISR 에 대한 공식문서 -
https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration

import { getAllPostsMeta } from '@/lib/mdx';
import Categories from './_components/Categories';
import PaginationComponent from '@/components/PaginationComponent';
 
export const revalidate = 7200; // ISR
 
export default async function PostsPage() {
  const posts = await getAllPostsMeta();
 
  // 서버에서 페이지가 렌더링된 시간을 저장
  const now = new Date().toLocaleString();
 
  return (
    <main className='flex min-h-screen w-full flex-col items-center justify-center px-[5px] lg:px-0'>
      <Categories />
      <section>
        <h1 className='text-3xl font-bold'>All Posts</h1>
        <PaginationComponent posts={posts} postsPerPage={4} />
        {/* 서버에서 생성된 시간 표시 */}
        <p className='mt-4 text-sm'>Page generated at: {now}</p>
      </section>
      <div></div>
    </main>
  );
}

revalidate를 사용하여 7200초 즉, 2시간마다 랜더링이 되도록 하여 서버 과부화를 줄임