Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜

1. Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜 2024/11/12 ディップ株式会社 横山 隼
2. 自己紹介 • ディップ株式会社 • 2022年新卒入社 • スポットバイトルWEB・アプリの開発 • フロントエンド 大好き 横山 隼
3. みなさん、GraphQL 聞いたこと・使ったことありますか？
4. GraphQLを使うと フロントエンドの都合で必要なデータを リクエスト 1回（少数）で過不足なく取れる
5. GraphQLとは？ 簡単に3ステップで 1. スキーマ定義 a. フロントエンドとバックエンドのインターフェースとなるデータ構造を定義 2. リゾルバ作成 a. バックエンドで定義したスキーマのデータを実際に操作・取得する関数を作成 3. クエリ実行 a. フロントエンドでどんなデータが欲しいかを書いて、リクエスト
6. 採用してみた • スキーマ駆動開発でFE・BE間の連携がスムーズになる • 過不足なくデータフェッチ • スキーマからのコード生成で型安全 …etc チームで技術選定する際もこんな感じのことを考え採用
7. ぶっちゃけノリ（絶対にそんなこと言うな）
8. ちょっと後悔（もっと言うな）
9. スポットバイトルWEBで Next.js AppRouter に GraphQL を使ってみて、 感じた光と闇をお話します。
10. 型安全 最高！ • 型安全 ◦ APIリクエストする際の引数の型や返り値の型、 子コンポーネントに渡す Propsの型、 • GraphQL-Codegen + フラグメントコロケーション で実現 ◦ Quramyさん Fragment Composition of GraphQL ◦ GraphQL-Codegen 公式サイト
11. プロダクトの変化 • プロダクトは生き物 • GraphQLを使うほどにレスポンスが複雑じゃないかも🤔
12. GraphQL vs Next.js StreamingSSR 「1回で過不足なく取ってこれる」 は「なにか 1つが重いと全体が遅れる」 • Next.js的にはStreamingSSRしてほしい ◦ できた部分から順次ブラウザに送って先に表示するという思想 • GraphQLでは一発で取れるけど、部分的な遅延読み込みが難しい ◦ 「一部だけ遅延させ、他の部分を先に表示」が難しい ◦ 限定的だけどできなくはない（ @defer ディレクティブ）
13. 知見不足からの学び • 開発当初 Next.js AppRouter × GraphQLの知見や情報が少なかった • Next.js AppRouter や GraphQL は何を解決しようとしていて、 我々は何を解決したかったのか →ここをしっかり考える必要あった • ノリで選んだツケが回ってきた でもチームでサポートし合って素早い開発ができた
14. 最後に • GraphQL × Next.jsは課題もあるけど、 GraphQLならではの開発体験の良さもある（僕は好き） • 今後、良い手法が確立されて タイミングがあえば、リプレイスするかも （また、みなさんにシェアします）
15. https://zenn.dev/h_yokoyama/articles/nextjs-fetch-colocation ぶっちゃけ 次はAppRouterとGraphQLは 併用したくない みたいなことが書いてます
16. ご清聴、ありがとうございました 🍡