Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜
Search
Hayato Yokoyama
November 12, 2024
Programming
0
86
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜
Hayato Yokoyama
November 12, 2024
Tweet
Share
More Decks by Hayato Yokoyama
See All by Hayato Yokoyama
フロントエンドテストを書きやすくするために工夫したこと
hayato_yokoyama
1
76
Other Decks in Programming
See All in Programming
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
240
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
0
210
DMMオンラインサロンアプリのSwift化
hayatan
0
250
Amazon Bedrock Multi Agentsを試してきた
tm2
1
220
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
260
ATDDで素早く安定した デリバリを実現しよう!
tonnsama
1
2.4k
React 19でお手軽にCSS-in-JSを自作する
yukukotani
5
600
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
1
3.2k
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
190
Package Traits
ikesyo
2
230
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
140
Moscow Python Meetup №97. Константин Крестников (Техлид команды GigaChain (SberDevices)). GigaChain: Новые инструменты для разработки агентов на примере агента техподдержки
moscowdjango
PRO
0
100
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
The Cult of Friendly URLs
andyhume
78
6.2k
Become a Pro
speakerdeck
PRO
26
5.1k
Automating Front-end Workflow
addyosmani
1367
200k
Faster Mobile Websites
deanohume
305
30k
Site-Speed That Sticks
csswizardry
3
300
The World Runs on Bad Software
bkeepers
PRO
67
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Designing for Performance
lara
604
68k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜 2024/11/12 ディップ株式会社 横山
隼
自己紹介 • ディップ株式会社 • 2022年新卒入社 • スポットバイトルWEB・アプリの開発 • フロントエンド 大好き
横山 隼
みなさん、GraphQL 聞いたこと・使ったことありますか?
GraphQLを使うと フロントエンドの都合で必要なデータを リクエスト 1回(少数)で過不足なく取れる
GraphQLとは? 簡単に3ステップで 1. スキーマ定義 a. フロントエンドとバックエンドのインターフェースとなるデータ構造を定義 2. リゾルバ作成 a. バックエンドで定義したスキーマのデータを実際に操作・取得する関数を作成
3. クエリ実行 a. フロントエンドでどんなデータが欲しいかを書いて、リクエスト
採用してみた • スキーマ駆動開発でFE・BE間の連携がスムーズになる • 過不足なくデータフェッチ • スキーマからのコード生成で型安全 …etc チームで技術選定する際もこんな感じのことを考え採用
ぶっちゃけノリ(絶対にそんなこと言うな)
ちょっと後悔(もっと言うな)
スポットバイトルWEBで Next.js AppRouter に GraphQL を使ってみて、 感じた光と闇をお話します。
型安全 最高! • 型安全 ◦ APIリクエストする際の引数の型や返り値の型、 子コンポーネントに渡す Propsの型、 • GraphQL-Codegen
+ フラグメントコロケーション で実現 ◦ Quramyさん Fragment Composition of GraphQL ◦ GraphQL-Codegen 公式サイト
プロダクトの変化 • プロダクトは生き物 • GraphQLを使うほどにレスポンスが複雑じゃないかも🤔
GraphQL vs Next.js StreamingSSR 「1回で過不足なく取ってこれる」 は「なにか 1つが重いと全体が遅れる」 • Next.js的にはStreamingSSRしてほしい ◦
できた部分から順次ブラウザに送って先に表示するという思想 • GraphQLでは一発で取れるけど、部分的な遅延読み込みが難しい ◦ 「一部だけ遅延させ、他の部分を先に表示」が難しい ◦ 限定的だけどできなくはない( @defer ディレクティブ)
知見不足からの学び • 開発当初 Next.js AppRouter × GraphQLの知見や情報が少なかった • Next.js AppRouter
や GraphQL は何を解決しようとしていて、 我々は何を解決したかったのか →ここをしっかり考える必要あった • ノリで選んだツケが回ってきた でもチームでサポートし合って素早い開発ができた
最後に • GraphQL × Next.jsは課題もあるけど、 GraphQLならではの開発体験の良さもある(僕は好き) • 今後、良い手法が確立されて タイミングがあえば、リプレイスするかも (また、みなさんにシェアします)
https://zenn.dev/h_yokoyama/articles/nextjs-fetch-colocation ぶっちゃけ 次はAppRouterとGraphQLは 併用したくない みたいなことが書いてます
ご清聴、ありがとうございました 🍡