Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactでリプレースして爆速になったのでちょっと仕組み公開
Search
Yoshitaka Terazawa
November 01, 2019
Technology
0
670
Reactでリプレースして爆速になったのでちょっと仕組み公開
「大人のレストランガイド」をSSR+BFF(Next.js+React+Redux+TypeScript)で
リプレースした際の取り組みについて一部公開します
Yoshitaka Terazawa
November 01, 2019
Tweet
Share
More Decks by Yoshitaka Terazawa
See All by Yoshitaka Terazawa
Introduction to React
locol23
0
36
Introduction to Scrum
locol23
0
250
ざっくりReact Fiberまとめ
locol23
0
250
Other Decks in Technology
See All in Technology
EDRの検知の仕組みと検知回避について
chayakonanaika
8
4.2k
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
1
470
AIエージェント元年
shukob
0
140
Windows の新しい管理者保護モード
murachiakira
0
190
遷移の高速化 ヤフートップの試行錯誤
narirou
5
820
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
200
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
18k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
150
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
250
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
260
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Speed Design
sergeychernyshev
27
800
Typedesign – Prime Four
hannesfritz
40
2.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
500
Building Your Own Lightsaber
phodgson
104
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Making Projects Easy
brettharned
116
6k
Transcript
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
None
加速! 暇だなぁ...
加速! 暇だなぁ... サーバA サーバB
加速! 暇だなぁ... 早えな
でも気をつけて!!
ニホンゴ ワカリマセン
None
公式みてね❤
まとめ
今回はデータ設計とキャッシュ設計について 紹介しましたが、より詳細な点や、 お話できていない他の取り組みもありますので、 懇親会でお話出来ればと思います!
We’re hiring!! フロントエンド募集してま す! https://corporate.gnavi.co.jp/recruit/