Closed2024/01/24にクローズ5

「フロントエンドの技術選定 ~2023を振り返る~ Lunch LT」に参加してみた🌟

ピン留めされたアイテム

まさぴょん🐱

「フロントエンドの技術選定 ~2023を振り返る~ Lunch LT」に参加しました🌟

感想

みんな App Router 採用すると、機能不足などで困る。。。
- これからの機能追加、サポートに期待。。。
Next.jsと比較した上で、Remixを推している会社が思ったより多い (4社中2社)
- Web標準API の重視が魅力的
- State管理の課題を解決するフローなどが魅力的

まさぴょん🐱

LT①「僕はWeb標準との触れ合い方をRemixに教わった」

なぜ、Remixを採用したのか？

チームとしては、Next.jsに慣れているが、Remixを採用した。
Remixは、Web標準をベースに使うようなフレームワーク
RemixやNext.js, React が終わっても、Web標準は終わらない！

Remix の特徴

Loader -> Action -> Component のフローが循環する。
- 非同期通信に関して、考える必要がほぼなくなる。
ファイルシステム・Routing
事業にエキサイトしたいタイプにおすすめのフレームワーク

Remixでは、状態管理があまり必要なくなる

Loader -> Action -> Component のフローで、解決する。
LoaderからのFetchデータがそのままComponentに降ってくる。

Remixの裏事情

React Router の Teamによる開発
- React Router の時のような破壊的変更を、Remix にも加えないか心配。。。
Shopify に買収されている
- Shopifyによる圧力・監視効果(？)によるのか、破壊的変更などは、特にない。

LT関連資料

まさぴょん🐱

LT②「React ViteからNext.jsへ切り替えたプロセスとApp Router化のボトルネック」

LTテーマは、2つ

React Vite から Next.js に移行したプロセス
App Router化のボトルネック

React Vite時代に、速度的な課題があった

FCP
LCP

React Vite から Next.js に乗り換えた件

React Vite 時代の FCP課題

Next.js の採用による解決

Next.jsでは、pageごとにビルドされるので、チャンク戦略の

React Vite から Next.js に移行する際の作業について

並行運用で、STGにDeployして、開発を進めました。
Test環境(STG)をそれぞれ、作成しました。

開発を止めない
オンボーディングの時間を取れる
じっくりQAできる
移行を中断できる(もしもの場合)

App Router化のボトルネック

App Router化のボトルネックは、Routing

App Router では、サポートされていない機能が一番の要因
- ブラウザバックなどのHistory系の機能など
- pushStateサポートなども来ており、今後の Next.jsに期待。

LT関連資料

まさぴょん🐱

LT③「一休レストランで Next.js App Router から Remix に乗り換えた話」

App Router を捨てて、Remixに乗り換えた話
Nuxt v2 から Next.js App Router でリニューアルしたばかりのシステムを 2ヶ月ぐらいでRemixに乗り換え。

Nuxt v2 から Next.js App Router でリニューアルの意志決定

React Server Component

Next.js App Routerで実装した際の問題点

History API の state を操作できない。
- 最近の機能追加で、解決済み。
Cache-Control ヘッダーを自由に設定できない。
継続的なUpdateに懸念を覚えた。

Remix の選定理由

History API の state を操作できる。
Cache-Control ヘッダーを自由に設定できる。
継続的なUpdateに安心感がある。
Web標準API の重視が魅力的だった。

予期していなかった、乗り換え効果

メモリの使用量が、1/4に
コンテナ起動時間が、1/2に

LT関連資料

まさぴょん🐱

LT④「Next.js App Router を例に考える、技術との距離感と技術選定」

開発スタート時の意志決定

Next.js を使う！
App Router を使う！
App Router への深入りはしない！
- App Routerは、一歩引いて、使う。
- Server Component は、ごく一部だけ。
- キャッシュ系や、高度なルーティングなどをNext.jsの独自機能で使わない。

意志決定時に重視したこと

追加学習コストを下げる
Bet Technology but 撤退可能な状態でいる
- 撤退可能な状態( 依存度を下げる ) を作る。
- あとで、剥がせるようにする。

プロダクトは、どうなった？

問題なく、リリースできた。
リリース直前に、App Router から Pages Router に移行
- App Router だと必要な機能が実装できなかったため。
  - navigationのキャンセルができなかった。
- 深入りしていなかったので、移行自体はすぐに完了。
- 撤退しやすいようにしておいて、よかっった。
- App Router に戻れないか、チャンスを伺い中。

LT関連資料

このスクラップは2024/01/24にクローズされました