HugoでもがんばればGatsbyみたいなことできるんでは？

Posted

今日は読みにくい文章を書くことによって人類の脳味噌を破壊しまーーーすw

blog.ojisan.io とか random.taguch.dev みたいなgatsbyのSSRやNextJSのSSRでできたサイトは一覧ページの回覧が早くていいですよね。羨しいです。僕も亜音速の世界で生きたい(!?!?!?)

しかし絶対にサーバーは持ちたくないので、最初のレンダリングはビルドしたHTMLが降ってきて、そこからJSでReactがマウントされてSPAになってページ遷移が最高の速度を人類に提供するサンタクロース(!?)になりたいです。

ここでよく考えてみると、実はSSGしてmetaタグとかを作るのは記事の個別のページでよく、一覧ページにそういうメタ情報を付ける必要はあんまりないことに気づいちゃいました。

つまり次の二つのフローをうまく動かすことができるSPAアプリケーションを作れば、hugoのまま最高の記事一覧ページ体験をプレゼントすることができるわけですね

フロー1 最初に個別ページにアクセスがくる編

  1. 回覧者がサイトに blog.himanoa.net にアクセスする

  2. GitHub Pagesが https://github.com/himanoa/testament/blob/gh-pages/68/index.html 返してブラウザに表示させる

  3. 回覧者がサイト内導線を踏んで一覧ページにアクセスする

  4. GitHub Pagesが唐突に一覧ページの顔をしたSPAを返す

  5. 回覧者がSPA上で記事のリンクをクリックする

  6. prefetchされたJSONをSPAが返して記事ページを表示する！！！！

  7. 卍 閃光の世界へようこそ 卍

フロー2 最初に記事一覧ページにくる場合

  1. GitHub Pagesが唐突に一覧ページの顔をしたSPAを返す

  2. 回覧者がSPA上で記事のリンクをクリックする

  3. prefetchされたJSONをSPAが返して記事ページを表示する！！！！

  4. 卍 閃光の世界へようこそ 卍

これはhugoのtheme機能をつかえばちょっとしたあとはちょっとした設定で実現できそうなのでそのうちやりたいですね。俺のブログ回覧者も閃光の世界に誘いたいぜ～～～～～～～～～～～～～

拍手ボタン