00:06
はい、9月22日、木曜日ですね。
朝9時、もうすでに17分ですね。
すみません、僕が朝寝坊してしまいました。
はい、おはようございます。ミュートキースこと熊原です。
では、本日も朝活を始めていきたいなと思います。
今日読む記事も色々探ったんですけど、
ちょっとソースコードも出てきて、読みづらいかもわからないですけど、
やっぱりNext.jsの最新版、12.3がリリースされたらしいので、
それのブログを読んでいきたいなと思います。
時間がもし余れば、先日のWWDCで公開されていた
Appleイベントの中で出てますね。
Safari 16.0、WebKitの機能のブログもあるので、
こちらも読んでいこうかなと思います。
こっちの方がちょっと長いので、もしかしたら終わらない可能性はありますけど、
今までのざっくりとした復習みたいなものですかね。
改めてちゃんと公開になったものなんだろうなっていうのを見ていこうかなと思ってます。
はい、では行きましょう。
まずはNext.js 12.3からですね。
はい、行きましょう。
ちょっとですね、昨日、久しぶりにオフラインの勉強会のイベントがあって、
そこで懇親会で楽しくお話し、飲みながら話をしたので、
喉が枯れてるんですけど申し訳ないですね。
はい、行きます。
12.3ではですね、Next.jsの品質を向上させるために、
いくつかの仮に行いましたよというふうにおっしゃってますねと。
あ、Mさんですね。おはようございます。ご参加ありがとうございます。
はい、いくつかのNext.js 12.3での更新ですけども、
一つは高速のリフレッシュ改善というのが行われましたと。
.mとかjsconfig.jsonとかtsconfig.jsonファイルというのが
ホットリロードされるようになりましたよと。
ところでリフレッシュの改善が行われましたというのが一つですね。
地味に大きいですね。
設定周りのファイルでもちゃんとホットリロードされるのは結構デカいですね。
はい、続いてTypeScriptの自動インストールですね。
というのが入りましたよと。
.tsファイルを追加してTypeScriptの設定と
Dependencyのインストールというのを自動で行うようになりましたと。
これもありがたいですね。
なるほど。ますますNext.jsが使いやすくなりましたね。
はい、続いてイメージコンポーネントですね。
画像のコンポーネントですけど。
ネクストスラッシュ、フィーチャースラッシュ、イメージというのが安定版ですね。
IsNowStableということになったので安定版になりましたよということですね。
イメージコンポーネントが安定するようになりましたよということでした。
はい、その安定と言っているのが具体的にどういうことか
多分後ほど出てくると思うので
それはちょっと読んでいこうと思います。
はい、で続いてSWC Minifierですね。
が入ったそうです。
Next.jsのコンパイラーによるミニフィケーションですね。
が安定するようになりましたよと。
SWC周りも多分サポートしているのかなと思いますね。
はい、で続いてNew Routerですね。
プラスレイアウトアップデートが行われたそうです。
レイアウトの話はずっと
03:01
Next.jsのブログでも書き続けられていたんですけど
その実装が始まって新規の説明も始まりましたよということだそうです。
アップデートしたい場合は
npm install next-at-latestとかでインストールできるのでアップデートしてくださいと。
面白いですね。
update today by runningですから。
今日アップデートしてくださいと言ってますね。
なかなか面白いなと思います。
一応アナウンシングがあって
グローバルNext.jsコミュニティのカンファレンスが
10月25日に行われるのでレジスターになるということで
まだ登録をしておいてくださいということですね。
はい、なるほど。
僕はNext.jsのカンファレンスは毎年参加応募だけは出してます。
ちゃんと見ているかというとそこは怪しいですけど。
ちなみにレジスターしておくとチケット的なものがウェブアプリとしてもらえるんですけど
それ自体も結構かっこよかったりするので
さすがだなという感じがしますね。
ねむさんも登録してみていいね。
全部英語なので大変ですけど
見る価値はあるかなと正直思っているので見てみてください。
では本文いきましょう。
Next.js コンフのほうからですね。
まずはいきましょう。
10月25日に開催されるNext.jsのグローバルコミュニティカンファレンスにまずご招待します。
Next.jsの6周年記念になります。
そして紹介します。
紹介されるもととしてはいくつかあるんですけど
リアクトサーバーコンポーネンツとかストリーミングとか
サスペンションを活用した機能の紹介をまずします。
続いてアプリケーションの最適化とスケーリングを要因するコンベンションだったりします。
続いてオープンソースのツールによりローカル開発と本番ビルドを高速化しますみたいなご紹介を
Next.jsのカンファレンスでやるそうですね。
無料チケットを請求してNext.jsとリアクトの未来を見に行きましょうみたいなことで
とにかく来てくれよっていうアナウンスをしてました。
分かりましたってことですね。
まあでもそのリアクトサーバーコンポーネンツはやっぱり
次のリアクトの目玉機能としてくるので
この話が僕もすごく興味がありますね。
ここまでできるとフロントエンドとして
ちょっとバックエンド側のことも考えなきゃいけないのって感じはしますけど
考えるっていうポジションとかですね
いわゆるバックオブフロントエンドの方々っていうのは
腕の威勢どころというか
自分の本領が発揮できるぞみたいなところが増えてくると思うんで
ここは結構いいと思いますね。
側の方とサーバーサイドの方でどこまで管理するかとか
結構領域が被り始めたりするので
その辺は協議をするときに色々コミュニケーションが別途必要になる気はしますけど
ただこと細かく、しっかりアプリケーションを制御したりとか
表現力豊かにするっていう意味で
このReactサーバーコンポーネントは僕はかなり期待してますね。
それに伏してストリーミングとサスペンスもそうですね。
この辺もどんな機能になっていくのかなっていうのはすごく気になりますね。
では続いていきましょう。
TypeScriptの自動インストールというのが入ってそうです。
Next.jsにはTypeScriptを自動的に設定するためのサポートというのが組み込まれています。
06:05
これまでは既存のプロジェクトにTypeScriptを追加する場合
必要な依存関係を手動でインストールしていましたよと。
大変だったなと思います。
今回のリリースではプロジェクトにTypeScriptが追加されると
Next.jsが自動的に検知し
必要な依存ファイルをインストールし
tsconfig.jsonファイルを追加します。
これはNextDevとNextBuildを実行したときに動作しますと言ってます。
このブログの中に実際に動作している
動画が貼られているので見てますけど
本当に追加した瞬間勝手にやってくれます。
YarnDevとかnpmRunDevとかしたときに
tsファイルがあったら勝手に依存関係とかが追加されます。
もちろんtsじゃなくてtsxでも同様ですね。
ちゃんとtsxでも追加したら
tsconfigが勝手に作られるし
パッケージ.jsonの中に勝手にモジュールがインストールされているという動画があるので
これは正直に言うと画期的ですね。
今まで手動で設定回りホゲホゲやってたっていう
あの苦労が一瞬で消え去るというのはかなりありがたいですね。
今はNext.jsからプロジェクトを作り出すときは
Next.jsのテンプレートの中からtsを含んだものを今使うのが普通だと思いますけど
既存のものに改めてtsを初めて入れるときとかですかね
にはいいと思います。
Next.jsのバージョンをアップしたときに
そういうのが入りますよというお話でした。
では続いていきましょう。
Improved Fast Refreshですね。
高速リフレッシュのさらなる改善というところです。
ローカルでの開発ワークフローにおいて
迅速なイテレーションは非常に重要になります。
Next.jsっていうのは高速リフレッシュを採用し
リアクトコンポーネントの編集を即座にフィードバックします。
これは既存のNext.jsで十分実装されていますね。
保存ボタンを押せばそのページを再読み込むすることなく
ブラウザに変更が反映されるのを確認できます。
Next.jsの12.3ではいくつかの設定ファイルが
編集時にホッとリロードされるようになりました。
これは先ほど出た通りですね。
.envとかenv.○○みたいなバリアント系のファイルと
js.config.jsonとts.config.jsonファイルですね。
これらのファイルが変更されたときも
ローカル開発サーバーで再起動する必要なく
自動的に変更が反映されるようになりました。
これも何らかんだ地味にやるときはやるんですよね。
ts.config.json.envの値ですね。
いわゆる環境変数周りはやっぱりさすがに
httpサーバー再起動しなきゃいけなかったんですけど
これが自動で反映されるようになったというのは
かなり嬉しいなと思います。
いや本当にますますNext.js
ユーザーのPiを奪いに来た感がすごいなと思います。
でもそれだけ使いやすくなったし
開発者に寄り添った機能がたくさん出てくるというのは
それは使われるよねという気はしました。
だからNextがどこまでここを追従してくるのかというのは
次のお話になると思うのでその辺気になりますね。
09:02
じゃあ続いていきましょう。
イメージコンポーネントですね。
next//feature//imageというコンポーネントが
ステーブルになりました。
安定版になりましたよということです。
Next.jsの12.2では新しいイメージコンポーネントの
実験的なプレビューというのも共有してました。
このコンポーネントは画像のスタイルというのを簡素化し
ブラウザのネイティブレイジーローディングというのを
使用してパフォーマンスを向上させるものでしたよと。
この新しいイメージコンポーネントというのは
現在は安定版で
もうエクスペリメンタルのフラグは必要なくなりましたよ
ということです。
前回のリリース以降さらに改良を加えていますと。
いくつかあるんですけど
まず親要素を画像で埋め尽くすフィルレイアウトの
レイアウトモードのサポートが追加になりましたよと。
なるほどですね。フィルレイアウトモードが追加になったんですか。
フィルレイアウトで地味に使えますからね。
これはありがたいなと思いました。
あとはブルーアッププレスホルダーというのを改良し
透明な画像で動作するようにしました。
あとはノースクリプトというのを不要にして
NextDevとNextStartみたいなコマンドで
一致させるようになりましたよということですね。
はぁはぁはぁはぁ。なるほどですね。
他には画像の読み込み中にオールドテキストを隠すことで
微妙なレイアウトシフトですね。
フォーム以外のブラウザというところの
レイアウトシフトというのを防止するようにしましたよと。
あとはオルトプロパティーはそもそも必須として
アクセシビリティを向上させましたと。
ここどうなんですかね。
オルトプロパティー必須なんですけど
でもオルトって場合によっては別に書かなくていい時もあったりするんですよね。
冗長になってしまうとか。
その直前とかのテキストとか文言の中に
すでに説明があったものをわざわざオルトのところで
もう一回説明すると困惑させたり
二度手間あったりするので
オルトつけるけど空文字列で設定したほうがいい時もあるな
というのがアクセシビリティの観点かなと思いますので。
少なくとも書かないよりは
書かないというか設定しないよりは設定したほうがいいと思います。
空でもいいですし何か適当なものでもいいですけど
観点からするオルトがないよりかは
設定としてあったほうがいいなと思うので
必須そのものに関しては僕は結構賛成派ではありますけど
中身を何にするかというのはまた別の議論がありますよというお話でした。
続いてハイドレーション前にエラーが発生した場合
オンエラープロパティというのを修正しましたということですね。
どんな修正が入ったかというのは多分出てこないかな。
もしかしたら出てくるかもしれないのでちょっと読み進めてみましょう。
続いて静的に取り込まれた画像で
ウィズプロパティのみまたはハイトプロパティのみを持つ場合の
アスペクト比というのを修正しました。
いやーこれ地味にありがてえな。
アスペクト比は毎回悩むし毎回ガチャガチャ書かなきゃいけないので
これは強いな。
不適切な設定だったり構成を使用した場合のエラーメッセージも
ちょこちょこ改善してますよということだそうです。
将来的にはそのネクストイメージっていうやつを
ネクストレガシーイメージに
ネクストフューチャーイメージをネクストイメージに解明する予定です。
その通りだと思いますね。
12:04
今もそのネクストレガシーイメージっていうのがあるんで
それをちゃんと解明する感じにするとですね。
今後そのネクストフューチャーイメージですね。
今回リリースになったイメージコンポーネントっていうのが
主流というか基本になるらしいですね。
既存のネクストイメージっていうのは
ネクストレガシーイメージっていうような
パスに変更されていくそうです。
もしそれが使いたい場合はネクストレガシーイメージっていうパスの
ところからコンポーネント引っ張ってくださいって感じだそうです。
これによって新しいネクストプロジェクトは
素晴らしい体験というのを提供し
既存のプロジェクトは私たちのネクストイメージ
コードモードっていうのを使って
簡単に移行することができるようになります。
次のメジャーバージョンアップに向けて
より詳細な情報を提供する予定ですよと言ってます。
現在の使用方法については
移行ガイドを含むドキュメントを参照してみてください
ということでした。
結構イメージまたコンポーネントって
僕らウェブエンジニアはしょっちゅう使うものなので
ここの改良が行われたのがかなり大きいというか
助かるなという感じがしますね。
すいません、時間が30分になったんですけど
今日は僕が思いっきり寝坊して
時間を押してしまったので
45分までいきたいと思います。
お時間ある方はお付き合いいただけたら幸いです。
はい、でいきましょう、続いて。
リモートパターンっていうのが
安定版になったそうですね。
リモートパターンズっていうのは
組み込みのイメージオプティマイゼーションAPI
っていうのを使用する際に
リモート画像に対してワイルドカードを
指定できるようにしてます。
ドメイン名の完全な位置のみを行う既存の
image.domainsっていう設定を超えて
より強力なマッチングを行うことができるようになりますよ。
このオプションは現在安定しており
以下の設定オプションとともに使用することができます。
以下のやつですけど
next.config.jsの中に
imagesっていうキーでオブジェクトを設定できます。
その中にリモートパターンズっていうのを
設定できるようになってます。
その中には配列で設定するんですけど
配列の中身は大体オブジェクトですね。
プロトコルにhttpsとか
必要あればhttpでもいいんでしょうけど
で、ホストネームに何たらかんたら
っていうドメイン名を設定するっていう感じですね。
リモートパターンズをここで色々設定できるようになりますよ
ってことだそうです。
続いていきましょう。続いて続いて。
これは今までのやつと大体似てる話が
ずっと続くのかなって感じですね。
続いてディスウェーブルイメージオプティマイゼーションですね。
画像最適化の無効化ってことです。
こっちも一応ステーブルになりましたよってことだそうですね。
イメージオプティマイゼーションAPIっていうのは
要求された画像を必要に応じて最適化する
サーバーを必要としますと。
サーバーを必要とするんですね。
この機能はネクストスタートで
セルフホスティングする場合や
バーセルなどのプラットフォームにデプロイする場合に最適ですと。
しかしネクストエクスポートには
画像を最適化するためのサーバーが含まれていないため
この方法では使えませんと。
以前はローダープロップを使用して
15:01
サードパーティーの画像最適化プロパイダーっていうのを
設定する必要がありましたが
現在はネクストイメージのすべてのインスタンスに対して
nextconfig.jsを使用して
画像最適化を完全に無効化することができます。
最適化を必要しないときがあるってことですねつまりは。
以前は実験的なオプションでしたけど現在は安定しており
次の設定オプションと一緒に使用できますよってことです。
同じようにnextconfig.jsファイルの中で
imagesっていうキーのオプションに
unoptimizeっていうのがあって
それをtrueにしてしまえばいいよっていうふうにおっしゃってます。
はい、なるほどでした。
続いていきましょう。
続いてswcminifierですね。
これが安定版になりましたよってことです。
next.jsの12ですね。
ではnext.jsコンパイラーの実験的な機能として
swcによるコードのミニフィケーションというのを導入しましたと。
初期の段階ではですね
swcを使ったミニフィケーションは
Tarserっていうのを使った従来のバージョンよりも7倍高速になりましたと。
今回のリリースでこの機能というのは安定し
次のnextconfig.jsのオプションでオプトインできるようになりましたと。
設定としてはnextconfig.jsファイルに
swcminifierっていうのをオプションで付け取って
それをtrueにしてしまえばいいよってことだそうです。
そんな7倍も速くなったりするんだったら
これもデフォルトでtrueでいいんじゃないかと思いますけどね。
逆にこれを使わない場合があるんですかね今後。
ちょっとわかんないですけど。
それだけ機能が良くなったんだったらとりあえずデフォルトtrueでいい気はしますけどね。
はい。
最後一言ですね。
次のメジャーバージョンではswcminifierをデフォルトにする予定です。
やっぱそうなんだ。はい。わかりました。
今はオプションで手動でやらなきゃいけないけど
次のメジャーバージョンでデフォルトtrueになるそうですね。
設定しないで内部的にデフォルトになっちゃうのかもしれないですけど
そこはちょっと更新待ちましょう。
続いていきます。
ニュールーター&レイアウトアップデートですね。
今年の初め我々は2016年にリリースされた
next.js以来最大のアップデートを導入した
レイアウトRFCというのを公開しました。
3回か4回に分けてブログ読みましたけど
結構これは議論だったと思います。
許容できる人とできない人が結構出てきたと思いますけど
ただまあまあ
next.jsが目指している構想とか設計の話でいくと
確かにそれはそうだなと思います。
後々にやられるリアクトサーバーコンポーネントを視野に入れた
設計になっているので
リアクトとちゃんと足並み揃えているという意味ではいいんですけど
今までの設計だと今までリアクトを書いてきた人たちからすると
これどうなの?みたいな
名前になっているような気がしていて
ここは僕はちょっと気になっていましたね。
私は結構新しいものが好きなので
さらっと受け入れるタイプではあるんですけど
これらの変更にはリアクトサーバーコンポーネントの上に
18:02
構築された新しいルーターが含まれます。
実装作業もすでに始まっていて
今後の機能についての詳細情報を紹介します。
1つ目はルートグループです。
レイアウトからルートを除外して
URLパスに影響を与えずに
ルートを整理するために使用します。
それをグループという風に名前を付けているのか。
それをグループという風に名前を付けているのか。
それをグループという風に名前を付けているのか。
それをグループという風に名前を付けているのか。
それをグループという風に名前を付けているのか。
分かりました。続いてインスタントローディングですね。
インスタントロード状態というのがあって
ローディングUIを簡単に追加できる
SUSPENSIONと連携した新しいファイル規約というのが入るそうですね。
続いてエラーハンドリングですね。
エラーハンドリングはネストされたエラー境界と
エラーUIを簡単に追加するための新しいファイル規約というのが
入るそうですね。
続いてテンプレート。
異なるインスタンスを作成し状態を共有しない
共有UIを追加するための新しいファイル規約です。
共有UIを追加するための新しいファイル規約です。
異なるインスタンスを作ってその状態は共有しないけど
UIは共有するのか。
というようなテンプレートができるそうです。
というようなテンプレートができるそうです。
続いてインターセプトルートとか
パラレルルート、もしくはコンディショナルルート
というものが入るそうですね。
高度なルーティングパターンの実装を可能にする新しい規約として
高度なルーティングパターンの実装を可能にする新しい規約として
インターセプトルートとパラレルルートとコンディショナルルートが入るそうですね。
名前からある程度予測はできるんですけど
名前からある程度予測はできるんですけど
複雑度が増したりとか
いろいろ頭を使わなきゃいけない設計になってるんじゃないかっていう
ちょっと感じちゃいました。
さらに別のRFCでは新しいアップディレクトリに
グローバルCSSインポートのサポートを追加することも検討しています。
これによって追加の設定なしに独自の.cssファイルを
インポートするパッケージを使用できるようになります。
これらの新機能の詳細についてはレイアウトRFCを参照くださいということで
これらの新機能の詳細についてはレイアウトRFCを参照くださいということで
一応レイアウトRFCのブログもあるのでそこを見てくださいというのですけど
一応レイアウトRFCのブログもあるのでそこを見てくださいというのですけど
過去僕が読んだ記事と同じブログな気がするので
ちょっと割愛しますね。
一応ちゃんとモチベーションとかタイミングであったりとか
いろんな観点で書かれてますね。
テーブルオブコンテンツ見てますけど
新しいのいっぱい入ってますね。僕が読んでないところがたくさん入ってます。
さっき言ったルートグループとかテンプレートとか
アドバンスルーティングパターンとか追加になっているので
すいません。これは改めてまたレイアウトRFCの
ブログの更新のところだけでもまた活用しようかなと思います。
ブログの更新のところだけでもまた活用しようかなと思います。
続いていきましょうか。
21:00
これ多分今日Safariのブログ入れなさそうですね。
その他の改善点ですね。
その他としては
Next.jsのまずBuilt-in Accessibility機能に関する
新しいドキュメントが入ったそうです。
あとはCreate Next Appのテンプレートに
この環境設定で自動的にダークモードをサポートするようになりました。
これは嬉しいですね。地味なあれですけど
なんだかんだダークモードに対応しなきゃいけないのでこれは嬉しいですね。
続いてESLintサポートを使用する場合
ソースっていうのがデフォルトのリンティングディレクトリになりました。
みんなそうだよねって感じするので
わざわざそのソースっていうのを書かなくてよくなったのはありがたいですね。
続いてNext.config.jsに
ajv。読み方はいつもわからないなと思いますけど
ajvによるスキーマ検証機能というのが追加され
設定オプションの誤用防止に役立つようになりましたよということだそうです。
続いて
Next.config.jsに実験的な設定フラグ
fallback-node-polyfills
それがフォルスなんですね。
っていうふうに設定するものが追加されて
Next.jsがブラウザ用のnode.js APIを
ポリフィリしないようになりました。
バンドルサイズが増加するような
オプションだったそうなのでこれをしないようになりましたよということです。
このオプションはNext.jsがビルド時に不要なインポートが
どこから来たかを示すエラーというのを表示するようになりますよということです。
実験的な設定フラグだった
fallback-node-polyfills
っていうのがフォルスになりましたよということだそうです。
なんだかんだバンドル結果のサイズが
デカくなってたっていうのをこれが不要になったというか
ポリフィルしないようになったっていうのは大きいですね。
ポリフィル必要な場合はその代わりに都度都度やらなきゃいけなくなった
っていう気もしますけどどうなんだろうねこれ。
以上other improvementsでした。
あとコミュニティでは
たくさんのコミュニティがばーっと張られてるんで
その辺のコミュニティを見てみてくださいということだそうです。
オーバー2000インデビジュアルデベロッパーということで
2000人以上のデベロッパーが一応Next.jsの
メンテナンスをしていますよということだそうですね。
Next.jsだけじゃなくてGoogle ChromeだったりMetaだったり
あとはバーセルのコアチームだとか
方々も含めてNext.jsはいつもメンテナンスされてますよということだそうです。
Metaも関わってるんですね。Metaの人も関わってるんだ。
これ結構面白いですね。知らなかった。
以上Nextの12.3のブログでした。
時間が中途半端なんでどうしようか悩むんですけど
Safari 16はちゃんと切り出したいので
明日改めて読もうかなと思います。
今日は今日で中途半端になる気がするんですけど
どうしようかな。
レイアウツRFC読んでいきたい感がすごくあるんで
いけるとこだけ読んで
明日その続きを読んで終わったら
Safariの記事を読もうかなと思いますので
今日はこのままNext.jsのレイアウツRFCを読んでいこうと思います。
残り5分ですけどね。
24:01
まずはルートグループというところですね。
ちょっと画像が多くて
僕しかわかんないかもしれないですけど大変申し訳ないですが
軽く読んでいこうと思います。
アプリフォルダの回送というのはそのままURLのパスに対応します。
しかしルートグループを作成することで
このパターンから脱却することができない。
ルートグループを使用すると次のことが可能になります。
1つ目はURL構造に影響を与えずにルートを整理することができる。
2つ目はレイアウトからルートセグメントを選択することができます。
レイアウトというのはレイアウトディレクトリのことかな。
3つ目はアプリケーションを分割して
複数のルートレイアウトを作成することもできます。
複数のルートレイアウトを作れる。
これはかなり面白いですね。
現場にそういうケースとかいろんなパターンケースがあっても
それに対応できるようになったって感じか。
と捉えるとかなり大きい機能だと思いますね。
続いてコンベンション、規約ですね。
フォルダー名を括弧で囲むとルートグループが作成されるようになります。
フォルダーネームを括弧みたいな形で括るといいですね。
なかなか変わった書き方しますね。
注意としてルートグループの名前はURLのパスには影響しないので
組織的な目的のためにのみ使われますよ
ということに注意してくださいということでした。
例としてレイアウトからルートを除外してみましょうという風に言っています。
レイアウトからルートを除外するには新しいルートグループ
今回の例だとショップというようなレイアウトを作成して
同じレイアウトを共有するルートをグループ
今回はアカウントとカートというものに移動するそうですね。
グループ外のルートというのはレイアウトを共有しません。
例はチェックアウトですと。
すみません、これはですね、この記事
ずっとディレクトリ構成が最初からずっとあってですね
それのコンテキストを踏まえた上での記事になっているので
この画像とかこの例はさすがに説明しづらいな
なかなか難しいですね。
あとそもそもレイアウトRFCというのがどういう機能なのかという背景まで
踏まえた上でこれを見ないと多分
なんじゃこれってなると思います。
ので、説明に関してはちょっとはっしょりますねこれは
うーん、なるほどなるほど
イグザンプルがかなりこれ続くんですね。
まあでも、一旦ね
一旦のルートグループの機能とかこういうことができるんだっていうのは
ざっくりと概念的にはわかったので
あとはその画像があってそこのサンプル見ると
なんとなくわかると思うので皆さんのほうでも見てみてください。
後ほどまたTwitterでリンク共有します。
では続いて、時間を許す限りいきますが
続いてはですね、サーバーセントリックルーティングですね。
サーバーセントリックルーティング
いきましょう。
クライアントサイドルーティングっていうのを採用しています。
初期ロード後およびその後のナビゲーションにおいて
新しいページのリソースをサーバーに要求します。
これには全てのコンポーネントのJavaScript
27:00
特定の条件下でのみ表示されるコンポーネントも含みますよと。
あとそれとプロップですね。
ゲットサーバーサイドプロップスまたはゲットスタティックプロップスによる
JSONデータっていうのが含まれます。
JavaScriptとデータの両方がサーバーから読み込まれると
この新しいモデルではNext.jsはクライアントサイドの
遷移を維持しながらサーバー中心のルーティングを使用します。
これはサーバー上で評価されるサーバーコンポーネントと
整合しています。
まだリアクトサーバーコンポーネントの話だと思います。
ナビゲーションの際にデータが取得されて
リアクトがサーバーサイドでコンポーネントをレンダリングするようになります。
サーバーからの出力はクライアントのリアクトが
DOMを更新するための特別な命令ですね。
これらの命令はレンダリングされた
サーバーコンポーネントの結果での保持しています。
つまり、結果をレンダリングするために
そのコンポーネントのJavaScriptをブラウザに読み込む必要がないことを意味します。
これがサーバーサイドでのレンダリングをするのが大きいです。
さらにルーティングのところです。
ルーティングしながらデータを取って評価をしてくれるというのが大きいです。
これは現在のクライアントコンポーネントのデフォルトとは対照的で
クライアントサイドでレンダリングするために
コンポーネントのJavaScriptがブラウザにロードされます。
リアクトサーバーコンポーネントによるサーバーセントリックルーティングの利点には
次のようなものがあります。
ルーティングではサーバーコンポーネントで使用されるのと同じリクエストを使います。
追加のサーバーリクエストはもちろん行われません。
あとはルート間のナビゲートというのは
変更されたセグメントをフェッチングしてレンダリングするだけなので
サーバーでの作業も少なくなります。
続いて新しいクライアントコンポーネントを使わないため
クライアントサイドのナビゲート後に
ブラウザに追加のJavaScriptがロードされることもありません。
ルーターは新しいストリーミングプロトコルを活用するため
全てのデータが読み込まれる前にレンダリングを開始することもできます。
ユーザーがアプリ内を移動すると
ルーターはリアクトサーバーコンポーネントのペイロードの結果を
eメモリのクライアントサイドキャッシュに保存します。
キャッシュはルートセグメントによって分割されるため
任意のレベルで無効化もできますし
同時レンダリングでも一貫性が保証されます。
つまり特定のケースでは以前に取得したセグメントのキャッシュも
再利用することができますよと。
めちゃめちゃでかい進化を遂げるなこれ。
すごいな。ご意味がなくなりました。
注意書きとして
静的生成とサーバーサイドキャッシングというのは
データフェッチを最適化するために使用することができます。
最初の読み込みは
HTMLを生成するためのサーバーサイドレンダリングを含む
別の処理になるよというのに注意してください。
クライアントサイドルーティングは
Next.jsではうまく機能していますが
ルートマップをダウンロードする必要があるため
洗剤的なルートの数が多くなるとスケールが悪くなりますよね。
それはそもそも設計の話には別に出てくる気がしますね。
全体としてリアクトサーバーコンポーネントを使用することで
30:00
ブラウザにロードしてレンダリングするコンポーネントが少なくなるため
クライアントサイドのナビゲーションとかがより高速になりますよ
というところがポイントですよということだそうです。
やっぱりリアクトサーバーコンポーネント
僕、すげえ期待してるんだよな。
どれだけ高速化するかというところがものすごく楽しみなので
その代わり、設計周りとか今のディレクトリ構成というのは
ちゃんと書き換えなきゃいけない可能性が多いので
この辺はアーリーアダプターの人たちとか
新しいもの好きな人たちがいろいろ手を触ってくれるので
その辺のブログも見たいと思いますけどね。
というところでちょっと45分もオーバーしたので
一旦今日の朝方はここで区切りたいと思います。
明日は続いてインスタントローディングステーツとか
デフォルトローディングスケルトンとか
この辺のお話をちょっとずつ読んでいきたいと思います。
ただやっぱり今回画像とかソースコードがバーっと出てくるので
耳だけで聞いてもなんちゃそれってなると思うので
ポチポチ割愛していきたいと思いますので
皆さんの方でも読んで見ていただくのが一番いいと思いますので
後ほど記事は共有したいと思います。
じゃあ今日の朝方はこちらで以上にしたいと思います。
今日も朝からたくさんの方にご参加いただき
大変にありがとうございました。また明日もよろしければご参加お願いします。
では終了します。お疲れ様でした。
