Next.JS - 증분 정적 재생성(ISR) 구현 방법

우리 모두는 동적 콘텐츠에 대한 정적 페이지를 렌더링하는 기능 때문에 Next.JS를 좋아합니다. 이전에는 새 콘텐츠가 추가되면 사이트를 완전히 다시 빌드해야 했지만 더 이상 그럴 필요가 없습니다!

소개: 증분 정적 재생 또는 ISR. ISR은 변경 사항이 감지되면 백그라운드에서 특정 페이지만 재생성하도록 허용합니다. 이 기능을 구현하는 방법에는 자동 재생성과 주문형 재생성의 두 가지가 있습니다. 두 가지 방법을 모두 다룰 것입니다.

자동 재생

자동 재생성은 다음 기능getStaticProps() 및 getStaticPaths()에 의해 처리됩니다. ISR을 구현하려면 두 줄의 코드만 걱정하면 됩니다.

/* [slug].js */

export async function getStaticProps({ params }) {
    const res = await getPost(params.slug)

    return {
        props: {
            post: res[0].fields
        },
        revalidate: 10 // Revalidate max 10 seconds
    }
}

export async function getStaticPaths() {
    const slugs = await getPostSlugs();

    const paths = slugs.map((slug) => ({
        params: { slug: slug },
    }));

    return {
        paths,
        fallback: 'blocking' // SSR page and then cache
    };
}

revalidate: 10 지시어를 getStaticProps() 에 추가했습니다. 즉, 부실 콘텐츠는 최대 10초 동안만 표시된 다음 백그라운드에서 재검증 및 재구성됩니다. 이 시간이 만료된 후 다음 새로 고침은 현재 콘텐츠를 표시합니다.
getStaticPaths() 에서 fallback 를 blocking 로 설정했습니다. 이것이 하는 일은 현재 경로가 존재하지 않는 경우 서버측 렌더링입니다. 후속 렌더링은 그때부터 캐시에서 제공됩니다.

그게 다야! 그렇게 간단합니다.

주문형 ISR

특히 새 콘텐츠를 즉시 게시하려는 경우 주문형 ISR을 고려할 수 있습니다. 전자 상거래 상점이 있고 제품 ​​가격을 변경하려고 한다고 가정해 보겠습니다. 필요에 따라 경로 또는 경로 목록을 재생성할 수 있는 API 경로를 생성합니다. 남용을 방지하기 위해 보안 API 키를 사용합니다.

내 API에 대한 코드는 다음과 같습니다.

/* revalidate.js */

export default async function handler(req, res) {
    // Get our API key from 'authorization' header
    const bearer = req.headers['authorization'];
    if (!bearer) return res.status(401).json({ message: 'Unauthorized' })
    const key = bearer.split(" ").pop();

    // Compare given key to secret key
    if (key !== process.env.REVAL_SECRET) {
        return res.status(401).json({ message: 'Unauthorized' })
    }

    // Get paths array from POST request
    const paths = req.body.paths ?? null;
    if (!paths || typeof paths !== 'array') return res.status(400).json({ message: 'Bad Request: No paths specified' })

    try {
        paths.forEach(async (p) => {
            await res.unstable_revalidate(p)
        })
        return res.json({ revalidated: true })
    } catch (err) {
        // Catch error and serve 500
        return res.status(500).send('Error revalidating')
    }
}

이제 API에 요청을 보내 이를 테스트할 수 있습니다.

/* Revalidate Request Example */

const axios = require('axios');

const postData = {
    paths: [
        '/blog',
        '/blog/post/blog-post-one',
        '/blog/post/blog-post-two'
    ]
}

const res = await axios({
    headers: {
        'Authorization': `Bearer ${process.env.REVAL_SECRET}`
    },
    method: 'POST',
    url: '/api/revalidate',
    data: postData
}).then((res) => {
    return res
}).catch((e) => {
    console.log(e);
});

그게 전부입니다. 이 새로운(같은) 기능은 Next.JS에 대한 저의 약속을 완전히 굳혔습니다. 당신도 같은 기분이길 바랍니다!

더 좋은 정보를 원하시면 Visit Our Blog .