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

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

© DMM 自己紹介 • 大坂友 • 2023年4月新卒入社 • 所属：動画配信開発部プレミアムグループブラウザチーム
• 出身：北海道 • 趣味：映画鑑賞・旅行・アニメ・趣味開発 etc 2

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

© DMM ブログの機能〜inspired Zenn〜 5 できること ⭕キーワード検索 ⭕タグ検索 ⭕記事の投稿 ⭕GitHubログイン（自分のみ）
⭕記事の削除 ⭕ダークモードできないこと ❌アイキャッチの設定 ❌記事の公開予約 ❌画像のアップロード

© DMM 使用技術 8 JSフレームワーク / 言語 Next.js / Type
Script 状態管理ライブラリ Apollo Client CSSライブラリ styled-components emotion mantine DB Supabase / Vercel postgress デプロイ先 Vercel 認証・認可 NextAuth ドメイン取得 Cloudﬂare Registrar

© DMM なぜ自作したのか？ 9 　　車輪の再開発が好き • フレームワークは中身がブラックボックスになりがち • 自作すれば、仕組みを理解しながらものづくりができる •
自作はロマンがある • Rustでマークダウンパーサーを自作して、 WASM+Nuxt3+Viteで動かしてみた • Rustで作るリアルタイムOS

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

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

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

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

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

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

© DMM Prismaについて 20 • Prismaでは、モデル間のリレーションシップを簡単に定義できる仕組みが提供されている • Nested reads
• Eager Loading • 一度のクエリで、全ての作者とそれぞれの作者が投稿した記事の情報を取得できる • リレーションのネスト構造が深すぎたり、大量のバッチ処理が必要となった場合は、N+1問題を完全に解決することが難しい

© DMM Pothos（ポトス）について 21 • コードファーストにGraphQLサーバーの開発を行うためのライブラリ • 元の名前はGiraphQL •
視認性・検索性の問題から改名された • Prismaと互換性があり、N+1問題の対策を強化することができる

© DMM supabaseについて 22 • Firebase代替として注目されているOSSのBaaS • 以下の機能を提供している • Database
• PostgreSQLベースのRDB • Authentication • Storage • Edge Functions

© DMM supabaseについて 23 • Free Plan（従量課金なし） • APIリクエストは無制限 •
500MBまでのデータベース、1GBのファイルストレージが利用可能 • 最大5GBの帯域幅 • 月間アクティブユーザーは最大50,000人まで • 同時リアルタイム接続の上限は200 • リアルタイムメッセージの上限は最大2,000,000件 • 7日間未利用の場合、サーバの一時停止 • 作成できるプロジェクト数は2つまで

© 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

© DMM prisma+supabase所見 26 • 一つの共通言語（SDL）からGraphQLのスキーマ・DBのテーブルが一気に生成できて、ER図のビジュアル化ができるため開発体験が良かった • NoSQLのFirerestoreに対して、supabaseはPostgreSQLベースな
のがうれしい • supabaseはFree planでも、個人開発の素振りに使う分にはほどよい

© DMM WASMをVercelでビルドする 27 • ビルドツールはwasm-pack を採用 • 静的アセットを生成するバンドラー •
RustのコードからTypeScriptの型定義コードまでを吐き出してくれる • 内部でwasm-bindgenを利用して、JavaScriptからRust APIを呼び出すことができる

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

© DMM ハイドレーションエラー対策 37 ハイドレーションエラーはなぜ起こるのか • サーバーから事前にレンダリングされたReactツリーと、ブラウザーでの最初のレンダリング (Hydration/ハイドレーション) 中に
レンダリングされたReactツリーの間に違いが生じたため • 今回のケースだと、classNameの不一致参考記事 • hydrateRoot – React

© DMM ハイドレーションエラー対策 38 ハイドレーションとは • サーバから受け取った「乾いたHTML」に、クライアントサイドのインタラクティブな機能を注ぎ込むことハイドレーションエラーとは •
「サーバから受け取った初期HTML」と「クライアントサイドJSが予期するHTML」が一致しない場合に起こるエラー参考記事 • 7歳娘「パパ、ReactのHydration Errorってなんで起こるの？」 - Qiita

© DMM 40 まとめ今後やりたいこと • LightHouseのスコア改善 • アプローチ→FirebaseやGoogle Analytics、New
Relicなどでモニタリング&改善の試作 • 目標→スコアオール100点 • 機能拡張 • プロフィールページの作成など

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

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

More Decks by yud0uhu

Other Decks in Technology

Featured

Transcript