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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

今日言いたい事

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

データ設計の話

Slide 10

Slide 10 text

銀座でお店を探そう

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

やっぱり新宿で探そう

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

データの正規化で解決！

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

銀座でお店を探そう

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

やっぱり新宿で探そう

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

キャッシュの話

Slide 27

Slide 27 text

Varnish Cache

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

加速！暇だなぁ...

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

でも気をつけて！！

Slide 33

Slide 33 text

ニホンゴワカリマセン

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

　　公式みてね❤

Slide 36

Slide 36 text

まとめ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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