Next.js]ISR 주문형 재검증

ISR을 사용하지 못하는 페이지는?

• 커뮤니티 (게시글, 수정, 댓글)
• 최신데이터 보기 어려움
  
• 불필요한 페이지 재생성
• 사용자가 수정했던 말든 계속 60초마다 재생성 -> 너무 불필요!
  

그냥 SSR로 처리하면 되는거 아님?

• 사람이 많이 들어오면 과부하가 올수있어 정적랜더링이 좋음

요청을 받을때마다 페이지를 다시 생성하는 ISR

🤓On-Demand ISR

• 페이지 업데이트를 자유롭게!
  

실습!

BEFORE

  return {
    props: {
      allBooks,
      recoBooks,
    },
    //ISR 몇 초마다 재생성할지
   revalidate: 3,
    
  };
};

AFTER
0. revalidate: 3 삭제

  return {
    props: {
      allBooks,
      recoBooks,
    },
XXXXXXX
    
  };
};

1. 새로운 파일 만들기:
   

[api/revalidate.ts]
import { NextApiRequest, NextApiResponse } from "next";

//새로운 라우터
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    //인덱스 페이지 캐시를 삭제하고 다시 렌더링
    await res.revalidate("/");
    return res.json({ revalidate: true });
  } catch (e) {
    res.status(500).send("Revlidate Failed");
  }
}

• 사용자가 요청했거나 움직임이 있으면 새로 랜더링된다.