Next.jsとnow.shでブログを新しく作り替えた

2019/12/14

Blog

Programming

JavaScript

React

asdfasdfasdfasdf## 作り替えに至った経緯

Next.js 9 7月8日Next.jsのv9リリースが発表されました。

実はこのブログの前身もNext.jsで書かれていて書いた当時はまだv8でした。でv9リリースからおよそ5ヶ月が経ってやっと、重い腰を上げて自分のブログのアップデートを試みました。ですが蓋を開けるとあら不思議、あまりのクソコードぷりになかなか作業が進まない。具体的に言ってしまうと@ts-ignoreとanyのオンパレードで下手したらJSのまま作業するよりも酷い代物が出来上がっていました。そんなものをアップデートしようとしても全然コンパイルが通らず、しかもバカ遅い。 27-1 ちなみにこれが書き換える前のlighthouseのスコア、無慈悲な0点に涙を禁じ得ません。そしてもう何もかもが無理になり一から作り直してしまうことにしました()

やったこと

ここからだらだらと箇条書きになります。

SSRした

実は以前のブログはstatic file exportしたものを一々FTPしてました(ぇ Next.jsのSSR (with rehydration) はTTFBがちょっと辛いというのはありましたが、以前のぐっちゃぐちゃになっていたものに比べるとかなり早くなりました。 (~~それでもまだ速さが物足りないしブログにSSRはミスマッチな気がするからGatsbyに乗り換えたい~~)

ダークモードに対応した

スマホやブラウザのダークモード、ライトモードそれぞれによって微妙に異なる配色を採用するようにしています。 cssのprefers-color-schemeというメディアクエリで対応できたので、そこでcss変数作ってよしなにやりました。 prefers-*はユーザーの閲覧環境に関するメディアクエリで、まだ実装はされてない(はず)ですけど今後はアニメーションの動きを減らすか否か、コントラストが高いか低いかというのにも対応できるようになるっぽい？

画像の遅延読み込み

ブログのコンテンツ一覧のページのアイキャッチ?画像の読み込みがボトルネックになっていたので、低解像度のデフォルトとなる画像をあらかじめ読み込んで表示させておき、Intersection Observer APIというターゲットとなる要素について、それが指定された要素あるいはビューポートと交差するたびに呼ばれるコールバック関数を定められるAPIを用いています。僕はuseEffect(componentDidMound)の中で、windowのloadイベントでIntersectionObserverを定め〜って感じの実装にしました。これにより、ファーストビューではブログのアイキャッチ画像は低解像度のものが表示され、帯域の節約になりもちろんロード時間も減ります。そして下にスクロールしてそれが表示される！！ってなると(ビューポートと交差すると)新たに普通の解像度のその記事のアイキャッチ画像が読み込まれ差し込まれるという具合です。僕の場合これがかなり速度に貢献した。

webフォントとの別れ

Unicode-rangeで帯域減らしたといえど4.7MBは辛かった、以上

animationをkeyframesで表現

以前はAnt Motionのtween oneというライブラリを用いてアニメーションを表現していたけれど、僕のCSS習熟度が上がりこれ別にkeyframesで表現できるくねってなった、あとはやるだけ。ちなみにトップページの惑星の公転周期っぽいアニメーションは

<div className="target_x">
  <div className="target_y">
    <Target />
  </div>
</div>

みたいな感じで二つのdivでラッピングして、target_{x|y}にそれぞれx軸,y軸方向のtransformを与えて、animation-timing-functionにease-in-outを与えてあげると、x軸方向、y軸方向に同時にease-in-outに動き〜となってその二つの動きが合成されて円周上を回転する(語彙力) あとはz-indexの魔法をかけておしまい。