Reactでリプレースして爆速になったのでちょっと仕組み公開

「大人のレストランガイド」をSSR+BFF(Next.js+React+Redux+TypeScript)で
リプレースした際の取り組みについて一部公開します

Transcript

1. Reactで リプレースして 爆速になったので ちょっと仕組み公開
2. About me • Yoshitaka Terazawa • Twitter/Qiita: @locol23 • 株式会社◯る◯び • Frontend Engineer • React界隈で活動 ◦ Meetupスタッフ、翻訳PJ参加等 • k8s勉強中 • 最近気になる ◦ Apple AirPods Pro
3. About me kusumoto-t • 株式会社ぐ◯な◯ • Java：5年（struts1世代） • PHP：3年 • Python：6ヶ月 • TypeScript：6ヶ月 • Node.js：4ヶ月 • Go勉強中... • qiita:https://qiita.com/kusumoto-t ↑嫁が描いてくれた 決してこんな描ける能力はない
4. 「大人のレストランガイド」 https://nikkei.gnavi.co.jp/
5. SpeedCurve結果 1.0s リプレースで3秒から1秒に！
6. 構成 • Next.js • React • Redux • TypeScript Next.jsで SSR BFF Backend API SPA
7. 今日言いたい事
8. データ設計の話 キャッシュの話
9. データ設計の話
10. 銀座でお店を探そう
11. 銀座でお店を探そう { restaurants: { list: [ { id: ‘id1’, area: ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, area: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得
12. やっぱり新宿で探そう
13. やっぱり新宿で探そう { restaurants: { list: [ { id: ‘id3’, area: ‘新宿’, name: 'ボルシチ専門店' }, { id: ‘id4’, area: ‘新宿’, name: 'クラムチャウダー専門店' } ], }, } 新宿の検索結果を取得
14. 良いお店がないから 銀座でやっぱり探そう
15. 良いお店がないから 銀座でやっぱり探そう { restaurants: { list: [ { id: ‘id1’, place: ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, place: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得
16. 良いお店がないから 銀座でやっぱり探そう { restaurants: { list: [ { id: ‘id1’, place: ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, place: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得 同じデータを 再取得していて無駄！
17. データの 正規化で解決！
18. データの正規化 • データを使い回ししやすい形で保存すること ◦ 取得済みデータを使いまわし、APIコール数削減 • 詳しくはRedux公式「Normalizing State Shape」参照 https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#normalizing-state-shape
19. 銀座でお店を探そう
20. 銀座でお店を探そう { areas: { 銀座: ['id1', 'id2'], }, restaurants: { id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' } } }, 銀座の検索結果を取得
21. やっぱり新宿で探そう
22. やっぱり新宿で探そう { areas: { 銀座: ['id1', 'id2'], 新宿: [‘id3’, ‘id4’] }, restaurants: { id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' }, id3: { id: 'id3', name: 'ボルシチ専門店' }, id4: { id: 'id4', name: 'クラムチャウダー専門店' } } }, 新宿の検索結果を取得
23. 良いお店がないから 銀座でやっぱり探そう
24. 良いお店がないから 銀座でやっぱり探そう { areas: { 銀座: ['id1', 'id2'], 新宿: [‘id3’, ‘id4’] }, restaurants: { id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' }, id3: { id: 'id3', name: 'ボルシチ専門店' }, id4: { id: 'id4', name: 'クラムチャウダー専門店' } } }, 銀座の検索結果は 取得済みなので再利用
25. 良いお店がないから 銀座でやっぱり探そう 銀座の検索結果は 取得済みなので再利用
26. キャッシュの話
27. Varnish Cache
29. 加速！ 暇だなぁ...
30. 加速！ 暇だなぁ... サーバA サーバB
31. 加速！ 暇だなぁ... 早えな
32. でも気をつけて！！
33. ニホンゴ ワカリマセン
35. 　　公式みてね❤
36. まとめ
37. 今回はデータ設計とキャッシュ設計について 紹介しましたが、より詳細な点や、 お話できていない他の取り組みもありますので、 懇親会でお話出来ればと思います！
38. We’re hiring!! フロントエンド募集してま す！ https://corporate.gnavi.co.jp/recruit/