Update Frontend automatically when CMS content is update

what i wanted to do

i wanted to make Frontend app automatically updated when the content in headless CMS is updated.

possible methods

1. Use cache: ‘no-store’ → slow performance
2. Use ISR, revalidate every n seconds → unnecessary
3. On-demand Revalidation

i tried third.

On-demand Revalidation

I created Strapi webhook and wrote api/revalidate/route.ts, which revalides the corresponding path.

but the problem was that most of the frontend app slugs dont match its collection type api endpoint. i had to map ALL the api and slug like this.

const apiToFrontendMapping: Record<ApiPath, (slug: string) => string> = {
	"/api/department-introduction?": (slug: string) => `/mission/${slug}`,
	"/api/curriculum": (slug: string) => `/curriculum/${slug}`,
	"/api/courses?pagination[pageSize]=50": (slug: string) => `/curriculum/${slug}`,
	...
};

i felt this isnt right.

Use Vercel Deploy hook

every time user make change in the content → vercel redeploys. How to use Deploy Hooks with Vercel and a Headless CMS Trigger Deployments Using Vercel Deploy Hook and Strapi Webhook

1. in Vercel, generate Deploy Hook and copy the URL
2. in Strapi, create Webhook and paste the URL.
3. test.

it worked well. every time i create, edit, unpublish, publish, delete, Vercel immediately re-deployed the frontend app. and only the page with changed content took loading time.

예측하지 못한 부작용

후에 로그인/회원가입 기능을 만지느라 회원가입을 했다가 user를 지웠다가 반복했는데 그럴 때마다 나도 모르게 계속 deploy가 돼가지고 하루 deployment 한계가 떴다.

Resource is limited - try again in 2 hours (more than 100, code: "api-deployments-free-per-day").