Next.js で CMS を使わないでブログ作成。
Daiki Sakumaこれの続きを書いてく。
Daiki Sakuma自分のプロジェクトで使おうとするとModule not found: Can't resolve 'fs'が出てしまう。これはブラウザ上のランタイムには fs がないからでバックエンドのランタイムなら大丈夫ってのはわかるけど、nextjs の blog-starter では fs module 使えてる。getStaticProps で呼び出してるからなのかな。この関数は SSG の際に使えるものでビルド時間に pre-render する。
Daiki SakumagetStaticProps で呼び出してるからだった。
Daiki SakumaISR について少しまとめる。
ISR はビルド時に pre-render されたページへのリクエストがあったとき、初めにキャッシュされたページが表示されて、その間にバックグラウンドでビルドして後から表示してる。
これを使うメリットして LCP が改善すると思われる。Largest Contentful Paint は、ページの読み込みの際にメインコンテンツが読み込まれるまでの時間を示すもの。前は FCP があったらしいが、読み込みの際のごく初期の部分しか考慮できず、読み込みのインジケーターなどが表示される場合、ユーザーにとってあまり意味がないらしい。ここでの意味がないというのは読み込みのインジケーターのことを指しているのではなく、あくまでユーザ体験を中心としたパフォーマンスを測定する際のというコンテキストである。
Daiki Sakumaremark とかで markdownToHTML をするけど、nextjs で @next/mdx があるからコンパイルを明記せずに mdx でブログ作成できないかなと考えてみた。
思い浮かんだのは、public 配下に posts/1.mdx 的なのを置いて、pages 配下の [id].tsx で useRouter 使って dynamic import で実装する。
Daiki Sakuma下記画像がページ遷移のボタンクリックしてから dynamic import して描画されるまでのパフォーマンス。70ms ぐらいかかってる。nextjs の dynamic import は React.lazy を使用していて、ページのレンダリングに必要な JavaScript の量を減らして、最初の読み込みパフォーマンスを向上させる。また、コンポーネントやライブラリは、それらが使用されるときにのみインポートされ、JavaScriptバンドルに含まれる。また、Suspense と組み合わせて使用すると、Suspense の境界が解決されるまでコンポーネントのハイドレーションを遅らせることができる。
Daiki Sakuma下記画像は md ファイルを remark でコンパイルした場合を測定したもの。合計 400ms ぐらいかかってる。体感でも明らかに少し遅いと感じることができた。
