Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話

yud0uhu
September 12, 2023
Technology
0
1k

Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話

Think ! FrontEnd by DMM #5 の登壇資料です。
https://dmm.connpass.com/event/291641/

yud0uhu

September 12, 2023
Tweet

More Decks by yud0uhu

See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
230
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
4.9k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.5k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.3k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
890
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
67
ブログを自作した話
yud0uhu
1
18
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
23
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
23

Other Decks in Technology

See All in Technology
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
380
[Ruby] Develop a Morse Code Learning Gem & Beep from Strings
oguressive
1
170
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
.NET 9 のパフォーマンス改善
nenonaninu
0
1k
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
160
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
460
Fanstaの１年を大解剖！ 一人SREはどこまでできるのか！？
syossan27
2
170
Qiita埋め込み用スライド
naoki_0531
0
5.1k
podman_update_2024-12
orimanabu
1
280
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
250
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
17
13k

Featured

See All Featured
Documentation Writing (for coders)
carmenintech
66
4.5k
Code Review Best Practice
trishagee
65
17k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.4k
Docker and Python
trallard
42
3.1k
Raft: Consensus for Rubyists
vanstee
137
6.7k
Music & Morning Musume
bryan
46
6.2k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Mobile First: as difficult as doing things right
swwweet
222
9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k

Transcript

  1. Next.js×Prisma×GraphQL×Supabase (+WASM)でブログを⾃作した話 ⼤坂 友

  2. © DMM 自己紹介 • 大坂 友 • 2023年4月新卒入社 • 所属：動画配信開発部プレミアムグループブラウザチーム

    • 出身：北海道 • 趣味：映画鑑賞・旅行・アニメ・趣味開発 etc 2

  3. © DMM 今日お話すること・しないこと お話すること • なぜ自作したのか • 使用技術の紹介 ⭕フロントエンド、BFF、WASM ❌マークダウンパーサーの仕組みについて

    3

  4. © DMM 作ったもの 4

  5. © DMM ブログの機能〜inspired Zenn〜 5 できること ⭕キーワード検索 ⭕タグ検索 ⭕記事の投稿 ⭕GitHubログイン（自分のみ）

    ⭕記事の削除 ⭕ダークモード できないこと ❌アイキャッチの設定 ❌記事の公開予約 ❌画像のアップロード

  6. © DMM 6 つくったもの yud0uhu.work

  7. © DMM 使用技術 7

  8. © DMM 使用技術 8 JSフレームワーク / 言語 Next.js / Type

    Script 状態管理ライブラリ Apollo Client CSSライブラリ styled-components emotion mantine DB Supabase / Vercel postgress デプロイ先 Vercel 認証・認可 NextAuth ドメイン取得 Cloudflare Registrar

  9. © DMM なぜ自作したのか？ 9 　　車輪の再開発が好き • フレームワークは中身がブラックボックスになりがち • 自作すれば、仕組みを理解しながらものづくりができる •

    自作はロマンがある • Rustでマークダウンパーサーを自作して、 WASM+Nuxt3+Viteで動かしてみた • Rustで作るリアルタイムOS

  10. © DMM ライブラリ選定について 10 コードファースト • 言語固有のコードで SDL(schema.prisma)を書いて、 スキーマ定義ファイル (graphql.schema)を生成する方

    法 スキーマファースト • スキーマ定義ファイル (graphql.schema)から SDL(schema.prisma)を生成す る方法

  11. © DMM ライブラリ選定について 11 コードファースト • 言語固有のコードで SDL(schema.prisma)を書いて、 スキーマ定義ファイル (graphql.schema)を生成する方

    法 スキーマファースト • スキーマ定義ファイル (graphql.schema)から SDL(schema.prisma)を生成す る方法

  12. © DMM GraphQLのN+1問題 12 • サーバ実装で発生しがちなパフォーマンス上の課題 • GraphQLの強みは、クライアントが必要なデータのみをリクエスト し、一度に取得できること •

    この特性が原因で、N+1問題が発生する

  13. © DMM GraphQLのN+1問題 13 以下のようなスキーマについて考える

  14. © DMM GraphQLのN+1問題 14 以下のようなスキーマについて考える

  15. © DMM GraphQLのN+1問題 15 以下のようなSQLクエリが発行される

  16. © DMM GraphQLのN+1問題 16 • 1回のリクエストで、全ての作者を取得するクエリ（authors）が実 行される（1回のリクエスト） • 各作者ごとに、その作者が投稿した記事を取得するために個別のク エリpostsが発行される（5回のリクエスト）

    計6回のリクエストが行われる（N+1）

  17. © DMM GraphQLのN+1問題 17 • スケジューラでクエリのバッチ処理を効率化する • キャッシュを活用してデータの再取得を最小限にする • N+1問題を考慮したORMを用いて解決する

    etc

  18. © DMM GraphQLのN+1問題 18 • スケジューラでクエリのバッチ処理を効率化する • キャッシュを活用してデータの再取得を最小限にする • N+1問題を考慮したORMを用いて解決する

    etc

  19. © DMM Prismaについて 19 • Graphqlと高い親和性を持つORM

  20. © DMM Prismaについて 20 • Prismaでは、モデル間のリレーションシップを簡単に定義できる仕 組みが提供されている • Nested reads

    • Eager Loading • 一度のクエリで、全ての作者とそれぞれの作者が投稿した記事の情 報を取得できる • リレーションのネスト構造が深すぎたり、大量のバッチ処理が必要 となった場合は、N+1問題を完全に解決することが難しい

  21. © DMM Pothos（ポトス）について 21 • コードファーストにGraphQLサーバーの開発を行うためのライブラ リ • 元の名前はGiraphQL •

    視認性・検索性の問題から改名された • Prismaと互換性があり、N+1問題の対策を強化することができる

  22. © DMM supabaseについて 22 • Firebase代替として注目されているOSSのBaaS • 以下の機能を提供している • Database

    • PostgreSQLベースのRDB • Authentication • Storage • Edge Functions

  23. © DMM supabaseについて 23 • Free Plan（従量課金なし） • APIリクエストは無制限 •

    500MBまでのデータベース、1GBのファイルストレージが利用 可能 • 最大5GBの帯域幅 • 月間アクティブユーザーは最大50,000人まで • 同時リアルタイム接続の上限は200 • リアルタイムメッセージの上限は最大2,000,000件 • 7日間未利用の場合、サーバの一時停止 • 作成できるプロジェクト数は2つまで

  24. © DMM supabaseについて 24 • Vercel Postgres(hobbby plan)との比較 supabse free

    plan vercel postgres 1ヶ月のAPIリクエスト数 無制限 30,000 1ヶ月のストレージ容量 1GB 256 MB 1ヶ月のデータ転送量 5GB 256 MB 作成できるデータベース数 1 2

  25. © DMM supabaseについて 25 schema.prisma Schema Visualizer

  26. © DMM prisma+supabase所見 26 • 一つの共通言語（SDL）からGraphQLのスキーマ・DBのテーブルが 一気に生成できて、ER図のビジュアル化ができるため開発体験が良 かった • NoSQLのFirerestoreに対して、supabaseはPostgreSQLベースな

    のがうれしい • supabaseはFree planでも、個人開発の素振りに使う分にはほどよ い

  27. © DMM WASMをVercelでビルドする 27 • ビルドツールはwasm-pack を採用 • 静的アセットを生成するバンドラー •

    RustのコードからTypeScriptの型定義コードまでを吐き出 してくれる • 内部でwasm-bindgenを利用して、JavaScriptからRust APIを 呼び出すことができる

  28. © DMM WASMをVercelでビルドする 28 WASMとPrismaのビルドの設定を行う手順 1. npx prisma generateを行うビルドスクリプトを書く 2.

    vercel.jsonでそれを実行するように設定する

  29. © DMM WASMをVercelでビルドする 29 WASMとPrismaのビルドの設定を行う手順 1. npx prisma generateを行うビルドスクリプトを書く 2.

    vercel.jsonでそれを実行するように設定する

  30. © DMM WASMをVercelでビルドする 30 3. Vercelでビルドする

  31. © DMM Appendix 31

  32. © DMM アクセシビリティ対策 32 • Next.jsのHTMLタグに動的にlangを設定する

  33. © DMM アクセシビリティ対策 33 • Next.jsのpagesコンポーネントは、デフォルトで<head>タグと <body>タグを定義してくれる • そのため、_document.jsを作成し、デフォルトのDocumentをオー バーライドしてカスタマイズする

  34. © DMM アクセシビリティ対策 34 • 今回はEmotionとstyled-componentsを使用しているため、以下の ドキュメントを参考にrenderPageのカスタマイズを行う • Routing: Custom

    Document | Next.js

  35. © DMM アクセシビリティ対策 35 スコアが改善された🎉

  36. © DMM ハイドレーションエラー対策 36

  37. © DMM ハイドレーションエラー対策 37 ハイドレーションエラーはなぜ起こるのか • サーバーから事前にレンダリングされたReactツリーと、ブラウ ザーでの最初のレンダリング (Hydration/ハイドレーション) 中に

    レンダリングされたReactツリーの間に違いが生じたため • 今回のケースだと、classNameの不一致 参考記事 • hydrateRoot – React

  38. © DMM ハイドレーションエラー対策 38 ハイドレーションとは • サーバから受け取った「乾いたHTML」に、クライアントサイドの インタラクティブな機能を注ぎ込むこと ハイドレーションエラーとは •

    「サーバから受け取った初期HTML」と「クライアントサイドJSが 予期するHTML」が一致しない場合に起こるエラー 参考記事 • 7歳娘「パパ、ReactのHydration Errorってなんで起こるの？」 - Qiita

  39. © DMM ハイドレーションエラー対策 39 対策：Pre-rendering and Data Fetching | Learn

    Next.js を参考に、 フックを使用してレンダリングのタイミングを意図的に制御

  40. © DMM 40 まとめ 今後やりたいこと • LightHouseのスコア改善 • アプローチ→FirebaseやGoogle Analytics、New

    Relicなどで モニタリング&改善の試作 • 目標→スコアオール100点 • 機能拡張 • プロフィールページの作成など

  41. © DMM ご静聴ありがとうございました🎉