Next.jsがReactの上に敷いてくれているレールを深掘る
#React #Next.js #技術の審美眼
from
なぜReactを使用するのか
なぜNext.jsを使用するのか
@dll7: Next.jsは現代の歩く技術的負債になりかねないと思うんだけど、SSRとか要らないならVite+ReactでバックエンドはNest.jsあたりに寄せてしまったほうがマシじゃない?
@dll7: なんか、モダン開発って言うと、マイクロサービスで作ってBFFが必要そうな見せ方をしているけど、世の中のサービスの95%はモノリスのAPIとSPAで十分なはずだよ。
工数増えるだけだし初心者しか居ないチームこそ複雑なアーキテクチャは避けるべき
作りたいものに対して世の中の技術スタックは複雑になりすぎている
@takamura1227: わかりみだなぁ。Vite React(ts)で、routerとかつかわずに、マルチページにしておくくらいで、充分なことが多そう。reactも、なるべくJSXだけで薄暗いしておくのが吉。
それとは別に、Astro、Svelteがきになる。
@about_hiroppy: app routerでパフォーマンス改善のために色々複雑なことができるようになったけど、そのサービスそこまで複雑にしてチューニングする必要ある?みたいな線引きを作っておかないとただ負債になりそうな予感するんだよな
Webのパフォーマンスの話に潔癖症に近いものを感じる?
@yoshikikoji: 僕はこれからのWebサイトは二極化がどんどん進んでいくと思っていて、簡単なサイトはノーコード、大規模なサイトはNext.jsのようなフレームワークで作られていくんだろうなと思っています。そうするとNext.jsは高度な要求に答えていかなければならなくなるので、なんとなくtoo muchに感じるかもしれないです。しかしそれは大規模サイト向けに必要とされる機能かもしれないので、見ないふりをしていると大規模サイトの開発に関わることができなくなってしまうかもしれません。
#カーゴカルトプログラミング
@yoshikikoji: 少なくとも僕らが受ける案件がどんどん規模が大きくなっていっている中で、やっぱNext.jsにしておいてよかったみたいな意見は頻繁に出ます。むしろ困っていることに対してきちんと課題解決するような機能が発表されているように感じています。
@yoshikikoji: Jamstack = 静的サイトの時代はもう終わっていて、多種多様なレンダリング手段や、クライアント・エッジ・サーバーの任意の場所で最適に動かしていく…みたいなのがこれからのJamstackなのかなと思います。
→2023年以降のフロントエンド需要マッピング
@sumiren_t: Next.jsはtoo muchを唱えている人に知ってほしいのは、Core web vitalsの指標も生ReactよりNext.jsのようなプリレンダリング採用フレームワークの方が高くなりやすいということ。開発生産性だけの問題ではないです。
@takepepe: Core Web Vitals で INP が重要になってきたら Selective Hydration が自明に有利なので、それだけでも App Router に移行していかないとあかんのよね。難しいとか抜きに。
#Interaction_to_Next_Paint_(INP)
@f_subal: 「Next.js がレールを敷いてくれない機能の一覧」という文章を書いている
https://twitter.com/honey321998/status/1713537340973764827
Next.js vs Remix
Next.jsがReactの上に敷いてくれているレール
メタタグ, SSR
@_inatatsu_csg_: メタタグ要らないアプリケーションはマジでこれだと思う、メタタグがつらみになる
@leader22: BlogとかSlackでリンク貼ったのに、OGPはおろかtitleすら表示されなかったとき、もっともSPAへの憎しみを感じるわ
@uikota: 管理画面とか外部に露出しない場合、あるいは静的なサイトはそれでいいけど、SNSが主な発信源となってる以上メタタグを持たせたいのでSSRからは逃げられない
@yuta0801: Viteで真面目にSSRをやってみれば、いかにNext.jsに甘やかされていたのかがよくわかるし、軽い気持ちでViteを使おうとか思わなくなるよ
フロントエンド最適化はほぼ全てSSRの上に成り立ってるからSSRを乗り越えないと実質何もできないこともわかるし、SSRをするだけでもカスタムサーバーとルーターとサーバーバンドルが必要でフレームワークを再発明するところまでを実際にやってみると、なぜNext.jsが推奨されるかが心の底から理解できる
@yuta0801: Viteは簡単に使えて、configとplugin機構がよくできているから割と自由かつprogressiveに拡張できそうでいいじゃんって思ってもSSRをしとうとした途端、何もかも足りなくなるので、アプリケーション開発に使うツールとして完全にレイヤーが異なるもの
関連
vite-plugin-ssr
SSRをするだけでもカスタムサーバーとルーターとサーバーバンドルが必要
アプリケーション開発に使うツールとして完全にレイヤーが異なる
@mizchi: 古のSSR自作勢としてはSSRフルスクラッチはフレームワーク自作と同じぐらいの罪の重さがある
SSRフルスクラッチはフレームワーク自作と同じぐらいの罪の重さ
Navigation State
scrollRestorationやNavigation API, History APIを内包したルーターが必要
Nextの場合はnext/routerがプリフェッチなどの機能を持つ
パフォーマンス
Pre-rendering、Selective Hydrationの恩恵により素のReactよりもパフォーマンスアップが見込める
Selective Hydrationのメリットがわかりづらい
最適化されたバンドラがCode Splitting, minifyなどの面倒を見てくれる
Next.jsのwebpackは3000行オーバー
Optimized Package Imports
i18n
Next.jsのi18n
学習ハードル
Next.jsやApp Routerは機能が全部盛り
作りたいものに対して理解しなければならないメンタルモデルは比較的大きい
破壊的変更の管理コストやサンクコストへの懸念
まあ、エンジニアとして生きるための必要経費とは思うkoushisa.icon
安定依存の原則(SDP)
App Routerは現代的なプロダクション構築に必要な機能を網羅している
App Router(appDir)への反応
Next.jsはtoo much?
アーキテクチャ特性(品質特性)のトレードオフ次第
特にパフォーマンス要件が重視されるのであれば十分にペイするはず
プラグイン開発とかならPreactとかSvelteで良いのはそう
収束
パフォーマンスについての関心がキーポイントなのは間違いない
基本的に多くのフロントエンドエンジニアにとってそれなりのコストを払ってようやく成すことができる最適化が事前に施されている
アプリケーションアーキテクチャではなく、あくまでもユーザーがリクエストを送ってサーバーからレスポンスが返却される領域に関して期待している形。
その部分をそれぞれの現場で半端に最適化するのはナンセンスなので、突き詰めるつもりがなければ素直に Next.js が良い。
SSR需要に答えたいだけであればNext.js以外の選択肢もある
Remix, Astroなど
大は小を兼ねるのトレードオフ
学習ハードルが高いのは否めない
けれどもApp Routerでなんでも出来るというのは大きな意味があるし、最適化についての悩みも減る
Next.js Learn Courseを一通りやったら覚えられると思う
learn once and write everywhere
一度覚えてしまえばハイパフォーマンスなWebアプリをフルスタック(言語統一開発)で同じ技術を利用して作れる
どうでもいいことは流行に従い、重大なことは標準に従い、ドメインのことは自ら設計する
フレームワーク乗り換える必要なし系の意見がもう少し欲しい
構成例
いまNext.jsで新規サービスを立ち上げるときの観点(Router・CSS・認証・監視など/2023年末)
【Next.js】AppRouter beta時代の技術構成・選定・トラブルシューティングログ