fix ISR -> SSR because images uploaded in Notion were expired 1 hour.

Author: samuraikun

pages/articles/[slug].tsx

@@ -4,35 +4,35 @@ import Layout from '@/components/Layout'
 import { ArticleProps, Params } from '@/types/types'
 import { fetchBlocksByPageId, fetchPages } from '@/utils/notion'
 import { getText } from '@/utils/property'
-import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
+import { GetServerSideProps, GetStaticPaths, GetStaticProps, NextPage } from 'next'
 import NotionBlocks from 'notion-block-renderer'
 import { monokai } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 
-export const getStaticPaths: GetStaticPaths = async () => {
-  const { results } = await fetchPages({})
-  const paths = results.map((page: any) => {
-    return {
-      params: {
-        slug: getText(page.properties.slug.rich_text)
-      }
-    }
-  })
-  return {
-    paths: paths,
-    fallback: 'blocking' // Notionからのデータ取得が完了してからレンダリングするようブロッキングする
-  }
-}
+// NOTE: Notion内にあるImageは有効期限が1時間のため、ISRではなくSSRで都度データを取得する
+// export const getStaticPaths: GetStaticPaths = async () => {
+//   const { results } = await fetchPages({})
+//   const paths = results.map((page: any) => {
+//     return {
+//       params: {
+//         slug: getText(page.properties.slug.rich_text)
+//       }
+//     }
+//   })
+//   return {
+//     paths: paths,
+//     fallback: 'blocking' // Notionからのデータ取得が完了してからレンダリングするようブロッキングする
+//   }
+// }
 
-export const getStaticProps: GetStaticProps = async (ctx) => {
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const { slug } = ctx.params as Params
   const { results } = await fetchPages({ slug: slug })
   const page = results[0]
   const pageId = page.id
   const { results: blocks } = await fetchBlocksByPageId(pageId)
 
   return {
-    props: { page, blocks },
-    revalidate: 10
+    props: { page, blocks }
   }
 }
 

pages/index.tsx

@@ -2,16 +2,15 @@ import Layout from '@/components/Layout'
 import { siteConfig } from '@/site.config'
 import Card from '@/components/Card'
 import { fetchPages } from '@/utils/notion'
-import { GetStaticProps, NextPage } from 'next'
+import { GetServerSideProps, NextPage } from 'next'
 import { IndexProps } from '@/types/types'
 
-export const getStaticProps: GetStaticProps = async () => {
+export const getServerSideProps: GetServerSideProps = async () => {
   const { results } = await fetchPages({})
   return {
     props: {
       pages: results ? results : []
     },
-    revalidate: 10 // ISRを実行するために必要な設定。指定した秒数が経過したらfetchが走り、記事に差分があれば再ビルド
   }
 }
 

pages/tags/[tag].tsx

@@ -1,41 +1,42 @@
 import Layout from '@/components/Layout'
 import Card from '@/components/Card'
 import { fetchPages } from '@/utils/notion'
-import { GetStaticPaths, GetStaticProps, NextPage } from 'next'
+import { GetServerSideProps, GetStaticPaths, GetStaticProps, NextPage } from 'next'
 import { IndexProps, Params, TagProps } from '@/types/types'
 import { getMultiSelect } from '@/utils/property'
 
-export const getStaticPaths: GetStaticPaths = async () => {
-  const { results }: { results: Record<string, any>[] } = await fetchPages({})
+// NOTE: Notion内にあるImageは有効期限が1時間のため、ISRではなくSSRで都度データを取得する
+// export const getStaticPaths: GetStaticPaths = async () => {
+//   const { results }: { results: Record<string, any>[] } = await fetchPages({})
 
-  const pathSet: Set<string> = new Set()
-  for(const page of results) {
-    for (const tag of getMultiSelect(page.properties.tags.multi_select)) {
-      pathSet.add(tag)
-    }
-  }
+//   const pathSet: Set<string> = new Set()
+//   for(const page of results) {
+//     for (const tag of getMultiSelect(page.properties.tags.multi_select)) {
+//       pathSet.add(tag)
+//     }
+//   }
 
-  const paths = Array.from(pathSet).map(tag => {
-    return {
-      params: { tag }
-    }
-  })
+//   const paths = Array.from(pathSet).map(tag => {
+//     return {
+//       params: { tag }
+//     }
+//   })
 
-  return {
-    paths: paths,
-    fallback: 'blocking' // Notionからのデータ取得が完了してからレンダリングするようブロッキングする
-  }
-}
+//   return {
+//     paths: paths,
+//     fallback: 'blocking' // Notionからのデータ取得が完了してからレンダリングするようブロッキングする
+//   }
+// }
 
-export const getStaticProps: GetStaticProps = async (ctx) => {
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const { tag } = ctx.params as Params
   const { results } = await fetchPages({ tag })
   return {
     props: {
       pages: results ? results : [],
       tag: tag
-    },
-    revalidate: 10 // ISRを実行するために必要な設定。指定した秒数が経過したらfetchが走り、記事に差分があれば再ビルド
+    }
+    // revalidate: 10 // ISRを実行するために必要な設定。指定した秒数が経過したらfetchが走り、記事に差分があれば再ビルド
   }
 }