Site cover image
easy-notion-blog v0.6 アップデート内容の紹介

easy-notion-blog のバージョン 0.6.2 を先日リリースしました。

この記事ではバージョン 0.5.1 からの変更内容を紹介します。

Notion API から取得した画像 URL は AWS S3 の Signed URL で、期限付きのため ISR とは非常に相性が悪くなっていました。

つまり、ビルドから時間が経って URL の期限が切れると画像が切れてしまうという問題がありました。

この問題を解決するため、ビルド時に画像をローカルの public/notion-images/ に保存し、個別記事ページではローカルを参照するように変更しました。

これによってビルドの時間はかかるようになってしまいますが、画像が切れる問題は完全に解決しました。

Bulleted List および Numbered List において、ネスト(入れ子)をサポートしました。

ただし、親ブロックと子ブロックの種類が同じでないと表示できないようになっています。

つまり、親ブロックが Bulleted List で子ブロックが Numbered List の場合は表示できません。

Bulleted List にネストできるのは Bulleted List だけになります。

余談ですが、Notion ではリストに対してリスト以外のブロックをネストすることができます。

やり方は、一度リストブロックでネストした後、ブロック種を変更するとできます。

これは HTML を書いたことのある人にはわかると思いますが、非常に頭の痛い問題です。

あまりそういう使い方をする人はいないのでは?ということで今回は対応していません。

そもそも Notion では HTML のリスト要素を使っていなかったので頑張った方だと思います 🙄

easy-notion-blog を Twitter などでシェアした際に、デフォルトで表示される OG画像を設定しました。

Image in a image block

こちらは easy-notion-blog ユーザーの horomi さんが作ってくれました。ありがとうございます。

少し宣伝ですが先日 Twitter にコミュニティ機能が実装されたので easy-notion-blog コミュニティを作りました。

上記の OG画像のやりとりや、ユーザー同士のサポートも行なっているので、興味のある方はご参加ください。

ページ生成時にNotion API を直列でリクエストしていたのを、並列でリクエストするようにしてパフォーマンスを改善しました。

const posts = await getPosts()
const firstPost = await getFirstPost()
const rankedPosts = await getRankedPosts()
const tags = await getAllTags()
改善前
const [posts, firstPost, rankedPosts, tags] = await Promise.all([
  getPosts(),
  getFirstPost(),
  getRankedPosts(),
  getAllTags(),
])
改善後

改善前は1つずつ直列のリクエストしていたのを Promise.all を使って同時並列にリクエストするように変更したので、かなり速くなっているはずです。

デメリットとしては、同時にリクエストするので Notion API の Rate Limit が気になるところでしょうか。

ISR の revalidate を 300s もしくは 600s 程度にして様子を見ていただくのが良いかと思います。

Notion API のバージョンが 2022-02-22 になったので、API クライアントをバージョンアップしました。

主な変更は、各ブロックのレスポンスが text から rich_text に変わった点です。

ちなみに Notion API の正式版が先日発表されました。今後どう変わっていくのか注目ですね。

バージョンアップとは異なりますが、Vercel ではなく Google Cloud Run へのデプロイ方法を Wiki に記載しました。

Vercel の Hobby プランを超過してしまう見込みのある個人ユーザーや、そもそも Hobby プランの対象外となる企業にとっては Vercel 以外の選択肢が欲しいところかと思います。

こちらについては後日詳しく紹介記事を書きたいと思います。

以上です。

この記事では先日リリースした easy-notion-blog のバージョン 0.6.2 のアップデート内容を紹介しました。

Thank you!
Thank you!
URLをコピーしました

コメントを送る

コメントはブログオーナーのみ閲覧できます