6.7 MB から 19 KB へ:React インボックスのカーソルベースページネーションと仮想化
約 20,000 件の会話を一度に読み込んでいた B2B SaaS のインボックスを再構築した方法 — React Query によるカーソルベースのページネーション、TanStack Virtual によるリスト仮想化、そして各判断のトレードオフ。リクエストあたりのペイロード:約 6.7 MB から約 19 KB へ(約 1/400)。
約 20,000 件の会話を一度に読み込んでいた B2B SaaS のインボックスを再構築した方法 — React Query によるカーソルベースのページネーション、TanStack Virtual によるリスト仮想化、そして各判断のトレードオフ。リクエストあたりのペイロード:約 6.7 MB から約 19 KB へ(約 1/400)。
Shadcn UI、Tailwind CSS、React を活用してスケーラブルなデザインシステムを構築する方法に関する実践ガイド — モダンなアプリケーションで視覚的な一貫性と生産性を確保します。
ドロップシッピング SaaS の PIX チェックアウトで QR コードのコンポーネントが壊れる一方、バックエンドは 200 を返していた — ログ 1 行も残さずに売上が漏れていたのです。セッションコンテキストを伴うフロントエンド計装、決済フローで意図的に捕捉しなかったもの、そして今も残るギャップ。
Mercado Livre、Shopee、Asaas、Mercado Pago との連携を備えたドロップシッピング SaaS プラットフォームをスケールさせる際のアーキテクチャ、技術的判断、そして実際の課題。
Prisma モデル 95 個、マルチテナント + マルチ支店、RAG と Whisper を備えた WhatsApp の AI、v1→v2 の段階的移行、フォールバック付きの電子インボイス発行。
実際に課金せずに webhook、冪等性、PIX、複数ゲートウェイ(Stripe、Asaas、Mercado Pago)をテストする方法 — サンドボックス、モック、契約テスト、レジリエンステスト。
PostgreSQL を活用してマルチテナント SaaS アプリケーションを構築する方法に関する実践ガイド — データの分離、データベースモデリング、アーキテクチャのベストプラクティスを取り上げます。
本番環境での決済 Webhook の受信をどのように構成するか — 署名検証、冪等性、非同期処理、リコンシリエーション、そして実際の障害への対処。