참치코더의 꿈 메모장

Next.js / ISR(Incremental Static Regeneration), 메타데이터 설정법 정리 본문

Next.js

Next.js / ISR(Incremental Static Regeneration), 메타데이터 설정법 정리

참치깡 2025. 11. 11. 23:54
728x90

제미나이가 생성한 Next.js 이미지

 

ISR(Incremental Static Regeneration)

 

- Next.js의 페이지 모드(pages/ 디렉터리 기반 라우팅)에서 정적페이지(SSG)를 일정 주기로 

  자동으로 다시 생성하는 방식이다.

 

- SSR과 SSG의 단점을 모두 상회하는 방식이다.

 

- 빌드 타임에 만든 정적 페이지를, 요청이 들어올때 또는 일정 주기마다 다시 생성 해서 최신 데이터로 

  유지하는 방식이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
export default function Home({time}: {time: string}){
    return (
        <div>
            <h1> ISR 테스트 페이지</h1>
            <p>현재 시간: {time}</p>
            <p>{10초마다 자동 갱신}</p>
        </div>
    );
}
 
export const getStaticProps: GetStaticProps = async () => {
    const time = new Date().toLocalString();
 
    return {
        props : { time },
        revalidate: 10, // 10초마다 재생성
    };
};
 
/*
    1. getStaticProps가 있는 페이지는 빌드 시점에 정적 HTML로 만들어진다.
    2. revalidate 속성을 지정하면, 지정된 초가 지나면 다음 요청 시점에 백그라운드에서 새 HTML을 생성한다.
    3. 그동안은 이전 캐시된 HTML을 보여주고,
    4. 새로 생성된 HTML이 완성되면 교체된다.
*/
 cs

 

메타데이터 사용법

 

- Head 태그와 meta 태그를 이용한다면 검색엔진을 최적화하여 보다 좋은 사용자 친화적 

  웹 페이지를 제작할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import Head from "next/head";
import { GetStaticProps } from "next";
 
 
export default function Home({post}: {post: any}){
    return (
        <>
            <Head>
                <title>{post.title} | My Blog</title>
                <meta name="description" content={post.summary} />
                <meta property="og:title" content={post.title} />
                <meta property="og:description" content={post.summary} />
                <meta property="og:image" content="/thumbnail.png"/>
            </Head>
        </>
    );
}
 
export const getStaticProps: GetStaticProps = async () => {
    
    const post = {
        title : "메타태그 사용하기",
        summary : "좋아요 좋아요",
        content : "깔깔...",
    };
 
    return {
        props: { post },
        revalidate: 60, // 1분 마다 갱신을 한다.
    }
};
 
/*
    Head 태그랑 meta 태그로 SEO 검색엔진을 최적화 할 수 있다.
   Next.js의 강점!!
*/
 cs

 

 

728x90
저작자표시 비영리 (새창열림)

'Next.js' 카테고리의 다른 글

React / useEffect의 3가지 기능  (0) 2025.11.15
Next.js / pages 라우팅 공통 레이아웃 & 개별 레이아웃 적용 방법  (0) 2025.11.14
Next.js / SSG(Static Site Generation) 미니 정리  (0) 2025.11.07
Next.js / 정적 메타 데이터 VS 동적 메타 데이터 비교  (0) 2025.10.10
Next.js / Suspense 사용법(각 컴포넌트 캐시 할당 및 병렬 출력), Error 페이지 만드는 방법 정리 (코드 위주)  (0) 2025.10.06
'Next.js' Related Articles more
Comments