revalidateの処理修正 (#86)

WakuwakuP · May 29, 2024 · 2ddeed7 · 2ddeed7
2 parents 9db91ec + 38385c9
commit 2ddeed7
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 49 deletions.
diff --git a/src/app/api/revalidate/route.ts b/src/app/api/revalidate/route.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { revalidatePath } from 'next/cache'
+import { revalidatePath, revalidateTag } from 'next/cache'
 
 export const revalidate = 0
 
@@ -11,21 +11,22 @@ export async function POST(request: Request) {
   if (data.id === undefined) return new Response(null, { status: 400 })
 
   // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-  revalidatePath(`/content/detail/${data.id}`)
-  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-  console.log(`revalidate: /content/detail/${data.id}`)
-
-  revalidatePath('/')
-  revalidatePath('/feed')
-  revalidatePath('/content/latest/page', 'page')
-  revalidatePath('/content/latest/[page]/page', 'page')
-  revalidatePath('/content/category/[categoryId]/page', 'page')
-  revalidatePath('/content/category/[categoryId]/[page]/page', 'page')
+  revalidatePath(`/content/detail/${data.id}`, 'page')
 
+  revalidateTag('home')
   console.log('revalidate: /')
+
+  revalidateTag('feed')
   console.log('revalidate: /feed')
+
+  revalidateTag('contents-latest')
   console.log('revalidate: /content/latest/*')
+
+  revalidateTag('contents-category')
   console.log('revalidate: /content/category/*')
 
+  revalidateTag(`content-detail-${data.id}`)
+  console.log(`revalidate: /content/detail/${data.id}`)
+
   return new Response(null, { status: 200 })
 }
diff --git a/src/app/content/category/[categoryId]/[page]/page.tsx b/src/app/content/category/[categoryId]/[page]/page.tsx
@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache'
 import { notFound } from 'next/navigation'
 
 import { ContentLatest } from 'components/templates'
@@ -12,12 +13,8 @@ export async function generateMetadata({ params: { categoryId } }: { params: { c
   }
 }
 
-export default async function ContentsCategory({
-  params: { categoryId, page },
-}: {
-  params: { categoryId: string; page: string }
-}) {
-  const data = await client.get({
+const getContentsCategory = async (categoryId: string, page: string) => {
+  return await client.get({
     endpoint: 'contents',
     queries: {
       filters: `category[contains]${categoryId},contentsCategory[contains]article`,
@@ -26,6 +23,26 @@ export default async function ContentsCategory({
       limit: PAGE_LIMIT,
     },
   })
+}
+
+const getCacheContentsCategory = (categoryId: string, page: string) =>
+  unstable_cache(
+    async () => {
+      return await getContentsCategory(categoryId, page)
+    },
+    [`contents-category-${categoryId}-page-${page}`],
+    {
+      tags: ['contents-category'],
+    },
+  )
+
+export default async function ContentsCategory({
+  params: { categoryId, page },
+}: {
+  params: { categoryId: string; page: string }
+}) {
+  const getContentsCategory = getCacheContentsCategory(categoryId, page)
+  const data = await getContentsCategory()
 
   if (!data || data.contents.length === 0) {
     notFound()

diff --git a/src/app/content/category/[categoryId]/page.tsx b/src/app/content/category/[categoryId]/page.tsx
@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache'
 import { notFound } from 'next/navigation'
 
 import { ContentLatest } from 'components/templates'
@@ -12,15 +13,31 @@ export async function generateMetadata({ params: { categoryId } }: { params: { c
   }
 }
 
-export default async function ContentsCategory({ params: { categoryId } }: { params: { categoryId: string } }) {
-  const data = await client.get({
+const getContentsCategory = async (categoryId: string) => {
+  return await client.get({
     endpoint: 'contents',
     queries: {
       filters: `category[contains]${categoryId},contentsCategory[contains]article`,
       orders: '-publishedAt',
       limit: PAGE_LIMIT,
     },
   })
+}
+
+const cachedGetContentsCategory = (categoryId: string) =>
+  unstable_cache(
+    async () => {
+      return await getContentsCategory(categoryId)
+    },
+    [`contents-category-${categoryId}-page-1`],
+    {
+      tags: ['contents-category'],
+    },
+  )
+
+export default async function ContentsCategory({ params: { categoryId } }: { params: { categoryId: string } }) {
+  const getContentsCategory = cachedGetContentsCategory(categoryId)
+  const data = await getContentsCategory()
   const contents = data.contents
   const totalCount = data.totalCount
   const totalPage = Math.ceil(totalCount / PAGE_LIMIT)

diff --git a/src/app/content/detail/[id]/page.tsx b/src/app/content/detail/[id]/page.tsx
@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache'
 import { notFound } from 'next/navigation'
 
 import * as cheerio from 'cheerio'
@@ -12,16 +13,31 @@ import type { CreateTableOfContentsOptions } from 'microcms-richedit-processer/l
 
 export const revalidate = 600
 
-export async function generateMetadata({ params: { id } }: { params: { id: string } }) {
-  const BASE_URL = process.env.BASE_URL
-  const SITE_TITLE = process.env.SITE_TITLE
-
-  const content = await client
+const getContentDetail = async (id: string) => {
+  return await client
     .get({
       endpoint: 'contents',
       contentId: id,
     })
     .catch(() => undefined)
+}
+
+const cachedGetContentDetail = (id: string) =>
+  unstable_cache(
+    async () => {
+      return await getContentDetail(id)
+    },
+    [`content-detail-${id}`],
+    {
+      tags: [`content-detail-${id}`],
+    },
+  )
+
+export async function generateMetadata({ params: { id } }: { params: { id: string } }) {
+  const BASE_URL = process.env.BASE_URL
+  const SITE_TITLE = process.env.SITE_TITLE
+
+  const content = await getContentDetail(id)
 
   if (content == null) {
     return {}
@@ -45,12 +61,9 @@ export async function generateMetadata({ params: { id } }: { params: { id: strin
 }
 
 export default async function ContentDetailPage({ params: { id } }: { params: { id: string } }) {
-  const content = await client
-    .get({
-      endpoint: 'contents',
-      contentId: id,
-    })
-    .catch(() => undefined)
+  const getContentDetail = cachedGetContentDetail(id)
+
+  const content = await getContentDetail()
 
   if (content == null) {
     notFound()

diff --git a/src/app/content/latest/[page]/page.tsx b/src/app/content/latest/[page]/page.tsx
@@ -1,3 +1,4 @@
+import { unstable_cache } from 'next/cache'
 import { notFound } from 'next/navigation'
 
 import { ContentLatest } from 'components/templates'
@@ -10,8 +11,8 @@ export const metadata = {
   title: 'Latest',
 }
 
-export default async function ContentLatestPage({ params: { page } }: { params: { page: string } }) {
-  const data = await client
+const getContentLatest = async (page: string) => {
+  return await client
     .get({
       endpoint: 'contents',
       queries: {
@@ -22,8 +23,24 @@ export default async function ContentLatestPage({ params: { page } }: { params:
       },
     })
     .catch(() => undefined)
+}
+
+const cachedGetContentLatest = (page: string) =>
+  unstable_cache(
+    async () => {
+      return await getContentLatest(page)
+    },
+    [`contents-latest-page-${page}`],
+    {
+      tags: ['contents-latest'],
+    },
+  )
+
+export default async function ContentLatestPage({ params: { page } }: { params: { page: string } }) {
+  const getContentLatest = cachedGetContentLatest(page)
+  const data = await getContentLatest()
 
-  if (!data || data.contents.length === 0) {
+  if (!data || !data.contents || data.contents.length === 0) {
     notFound()
   }
 

diff --git a/src/app/content/latest/page.tsx b/src/app/content/latest/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import { unstable_cache } from 'next/cache'
 import { notFound } from 'next/navigation'
 
 import { ContentLatest } from 'components/templates'
@@ -11,8 +12,8 @@ export const metadata: Metadata = {
   title: 'Latest',
 }
 
-export default async function ContentLatestPage() {
-  const data = await client
+const getContentLatest = async () => {
+  return await client
     .get({
       endpoint: 'contents',
       queries: {
@@ -22,8 +23,25 @@ export default async function ContentLatestPage() {
       },
     })
     .catch(() => undefined)
+}
+
+const cachedGetContentLatest = () =>
+  unstable_cache(
+    async () => {
+      return await getContentLatest()
+    },
+    ['contents-latest-page-1'],
+    {
+      tags: ['contents-latest'],
+    },
+  )
+
+export default async function ContentLatestPage() {
+  const getContentLatest = cachedGetContentLatest()
+
+  const data = await getContentLatest()
 
-  if (!data || data.contents.length === 0) {
+  if (!data || !data.contents || data.contents.length === 0) {
     notFound()
   }
 

diff --git a/src/app/feed/route.ts b/src/app/feed/route.ts
@@ -1,17 +1,21 @@
+import { unstable_cache } from 'next/cache'
+
 import RSS from 'rss'
 
 import { client } from 'libs/client'
 
 import type { Content } from 'types'
 
-export const revalidate = 300
+export const revalidate = 0
 
 if (!process.env.BASE_URL) {
   throw new Error('BASE_URL is not set')
 }
 
 const BASE_URL = process.env.BASE_URL
 
+const getCache = unstable_cache(generateFeedXml, ['contents', 'contentsCategory', 'article'], { tags: ['feed'] })
+
 async function generateFeedXml() {
   const feed = new RSS({
     title: 'Miyulab Blog',
@@ -42,12 +46,12 @@ async function generateFeedXml() {
 }
 
 export async function GET() {
-  const xml = await generateFeedXml()
+  const xml = await getCache()
 
   return new Response(xml, {
     status: 200,
     headers: {
-      'Cache-Control': 's-maxage=3600, stale-while-revalidate',
+      'Cache-Control': 's-maxage=600, stale-while-revalidate',
       'Content-Type': 'text/xml',
     },
   })

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,19 +1,36 @@
+import { unstable_cache } from 'next/cache'
+
 import { Home } from 'components/templates'
 import { client } from 'libs/client'
 
 export const revalidate = 600
 
+const getHomeContents = async () => {
+  return await client.get({
+    endpoint: 'contents',
+    queries: {
+      filters: 'contentsCategory[contains]article',
+      orders: '-publishedAt',
+      limit: 2,
+    },
+  })
+}
+
+const useCacheGetHomeContents = () =>
+  unstable_cache(
+    async () => {
+      return await getHomeContents()
+    },
+    ['home'],
+    {
+      tags: ['home'],
+    },
+  )
+
 export default async function HomePage() {
-  const contents = (
-    await client.get({
-      endpoint: 'contents',
-      queries: {
-        filters: 'contentsCategory[contains]article',
-        orders: '-publishedAt',
-        limit: 2,
-      },
-    })
-  ).contents
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const cacheGetHomeContents = useCacheGetHomeContents()
+  const contents = (await cacheGetHomeContents()).contents
   const category = await client.get({ endpoint: 'categories' })
 
   const props = {