ブログをNext.js14(App Router)でリファクタリングしました
タイトルの通り、ブログをNext.jsのPage RouterからApp Routerにリファクタリング、＋レイアウトの微修正を行いました。一番の変更点は、Server Component(RSC)とSuspenseを利用したことです。その際の注意点と備忘録を残します。
目次
CSS周りの注意点
CSS-in-JSにとってServer Componentsはまだ早い？
この記事で一番伝えたいことです。Server Componentに対してCSS-in-JSを使うには、まだ全然技術が足りていない印象を受けました。以下詳しく記載します。
Server Componentでstyled-componentsは使えない
このブログは以前はstyled-componentsでデザインを当てていましたが、執筆時点で、styled-componentがRSCに対応していませんでした(そもそも対応するのか?)。
Client Componentsを利用するくらいならばApp Routerで書き直す必要性もだいぶ薄れるので、採用を見送ることに。
しかしできるだけCSS-in-JSでコーディングしたかったため、RSC対応でMeta社製のStyleXを使用してみましたが、正直、使用感は悪かったです。まだオープンソースとして公開されて半年も経っていないので仕方ない部分もありますが。
StyleXの問題点
まず、StyleXでは複雑なセレクタが利用できません。例えば、「> *」や「~ *」といった子孫セレクタ、兄弟セレクタがありません。StyleXのドキュメントによると、そもそもの設計思想で、このような複雑なセレクタは混乱の元ととして、使用をあえて禁じています。将来的にも組み込まれる予定は今のところなさそうです。
ですのでちょっとこったCSSを当てたい部分は、結局CSS Modulesでデザインファイルを別途用意することとなりました。
また、開発サーバでホットリロードがおこらず、エラーとなることが多々。
Githubのissuesでもこの問題に直面している方がおりました。
これが原因で、何度もキャッシュをクリアして開発サーバを建て直すはめになりました。DXは結構悪かったです。
(StyleXはしばらく使わなさそうです。)
他にもCSS-in-JSがいくつかありましたが、Meta社製ということで利用したし、エラーが出た頃にはもう遅かったです。
コードハイライトもRSCで行う
コードハイライタにPrismを用いているのですが、記事の文章を一括でPrismを適用させるhigirightAll()関数はClient Componentsでしか使えなかったため、コードの部分のみ抽出して部分的にPrismを適用させるよう変更しました。
結局パフォーマンスは上がったのか
劇的な変化はありませんでした。(そもそも、自動広告を入れているため、Layout Shiftも起こるし色々と重くなる)。
ただ、Private Directoryを用いてページとコンポーネントをコロケーションさせたので、AppRouterのほうがコード管理はしやすくなりました。
パフォーマンスに関してはこれからチューニングを続けていきます。
まとめ
RSCやSuspenseのおかげパフォーマンスも向上し、DXもよく、コード管理も楽になりました。しかしCSS-in-JS対応はまだ技術が多くありません。しばらくはTailwind CSSとCSS Module(Sass)の2つの柱で開発することになりそうです。
最新の記事
カテゴリー一覧
アーカイブ