levi

리바이's Tech Blog

Tech BlogPortfolioBoard
AllActivitiesJavascriptTypeScriptNetworkNext.jsReactWoowacourseAlgorithm
COPYRIGHT ⓒ eunwoo-levi
eunwoo1341@gmail.com

📚 목차

    [Next.js]Incremental Static Regeneration (ISR)

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

    image


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

    image

    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시간마다 랜더링이 되도록 하여 서버 과부화를 줄임

    Posted innext.js
    Written byeunwoo