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
610
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
32
Introduction to Scrum
locol23
0
240
ざっくりReact Fiberまとめ
locol23
0
240
Other Decks in Technology
See All in Technology
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
230
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
株式会社EventHub・エンジニア採用資料
eventhub
0
2.9k
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
260
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
260
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
グイグイ系QAマネージャーの仕事
sadonosake
0
340
OSTという文化を組織に根付かせてみた
sansantech
PRO
2
390
Next.js のページ遷移を全力で止める
ypresto
7
3.3k
実務における脅威モデリングを考えよう
nikinusu
0
630
App Router を実プロダクトで採用して見えてきた勘所をちょっとだけ紹介
marokanatani
1
930
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
Navigating Team Friction
lara
183
13k
It's Worth the Effort
3n
182
27k
RailsConf 2023
tenderlove
28
810
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Facilitating Awesome Meetings
lara
49
5.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Practical Orchestrator
shlominoach
185
10k
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/