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

About me • Yoshitaka Terazawa • Twitter/Qiita: @locol23 • 株式会社◯る◯び
• Frontend Engineer • React界隈で活動 ◦ Meetupスタッフ、翻訳PJ参加等 • k8s勉強中 • 最近気になる ◦ Apple AirPods Pro

About me kusumoto-t • 株式会社ぐ◯な◯ • Java：5年（struts1世代） • PHP：3年 •
Python：6ヶ月 • TypeScript：6ヶ月 • Node.js：4ヶ月 • Go勉強中... • qiita:https://qiita.com/kusumoto-t ↑嫁が描いてくれた決してこんな描ける能力はない

「大人のレストランガイド」 https://nikkei.gnavi.co.jp/

SpeedCurve結果 1.0s リプレースで3秒から1秒に！

構成 • Next.js • React • Redux • TypeScript Next.jsで
SSR BFF Backend API SPA

今日言いたい事

データ設計の話キャッシュの話

データ設計の話

銀座でお店を探そう

銀座でお店を探そう { restaurants: { list: [ { id: ‘id1’, area:
‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, area: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得

やっぱり新宿で探そう

やっぱり新宿で探そう { restaurants: { list: [ { id: ‘id3’, area:
‘新宿’, name: 'ボルシチ専門店' }, { id: ‘id4’, area: ‘新宿’, name: 'クラムチャウダー専門店' } ], }, } 新宿の検索結果を取得

良いお店がないから銀座でやっぱり探そう

良いお店がないから銀座でやっぱり探そう { restaurants: { list: [ { id: ‘id1’,
place: ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, place: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得

良いお店がないから銀座でやっぱり探そう { restaurants: { list: [ { id: ‘id1’,
place: ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, place: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得同じデータを再取得していて無駄！

データの正規化で解決！

データの正規化 • データを使い回ししやすい形で保存すること ◦ 取得済みデータを使いまわし、APIコール数削減 • 詳しくはRedux公式「Normalizing State Shape」参照 https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape#normalizing-state-shape

銀座でお店を探そう

銀座でお店を探そう { areas: { 銀座: ['id1', 'id2'], }, restaurants: {
id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' } } }, 銀座の検索結果を取得

やっぱり新宿で探そう

やっぱり新宿で探そう { areas: { 銀座: ['id1', 'id2'], 新宿: [‘id3’, ‘id4’]
}, restaurants: { id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' }, id3: { id: 'id3', name: 'ボルシチ専門店' }, id4: { id: 'id4', name: 'クラムチャウダー専門店' } } }, 新宿の検索結果を取得

良いお店がないから銀座でやっぱり探そう

良いお店がないから銀座でやっぱり探そう { areas: { 銀座: ['id1', 'id2'], 新宿: [‘id3’,
‘id4’] }, restaurants: { id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' }, id3: { id: 'id3', name: 'ボルシチ専門店' }, id4: { id: 'id4', name: 'クラムチャウダー専門店' } } }, 銀座の検索結果は取得済みなので再利用

良いお店がないから銀座でやっぱり探そう銀座の検索結果は取得済みなので再利用

キャッシュの話

Varnish Cache

加速！暇だなぁ...

加速！暇だなぁ... サーバA サーバB

加速！暇だなぁ... 早えな

でも気をつけて！！

ニホンゴワカリマセン

　　公式みてね❤

まとめ

今回はデータ設計とキャッシュ設計について紹介しましたが、より詳細な点や、お話できていない他の取り組みもありますので、懇親会でお話出来ればと思います！

We’re hiring!! フロントエンド募集してます！ https://corporate.gnavi.co.jp/recruit/

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

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

More Decks by Yoshitaka Terazawa

Other Decks in Technology

Featured

Transcript