Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yoshitaka Terazawa

November 01, 2019
Tweet

More Decks by Yoshitaka Terazawa

Other Decks in Technology

Transcript

  1. About me • Yoshitaka Terazawa • Twitter/Qiita: @locol23 • 株式会社◯る◯び

    • Frontend Engineer • React界隈で活動 ◦ Meetupスタッフ、翻訳PJ参加等 • k8s勉強中 • 最近気になる ◦ Apple AirPods Pro
  2. About me kusumoto-t • 株式会社ぐ◯な◯ • Java:5年(struts1世代) • PHP:3年 •

    Python:6ヶ月 • TypeScript:6ヶ月 • Node.js:4ヶ月 • Go勉強中... • qiita:https://qiita.com/kusumoto-t ↑嫁が描いてくれた 決してこんな描ける能力はない
  3. 銀座でお店を探そう { restaurants: { list: [ { id: ‘id1’, area:

    ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, area: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得
  4. やっぱり新宿で探そう { restaurants: { list: [ { id: ‘id3’, area:

    ‘新宿’, name: 'ボルシチ専門店' }, { id: ‘id4’, area: ‘新宿’, name: 'クラムチャウダー専門店' } ], }, } 新宿の検索結果を取得
  5. 良いお店がないから 銀座でやっぱり探そう { restaurants: { list: [ { id: ‘id1’,

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

    place: ‘銀座’, name: 'ポトフ専門店' }, { id: ‘id2’, place: ‘銀座’, name: 'トムヤムクン専門店' } ], }, } 銀座の検索結果を取得 同じデータを 再取得していて無駄!
  7. 銀座でお店を探そう { areas: { 銀座: ['id1', 'id2'], }, restaurants: {

    id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' } } }, 銀座の検索結果を取得
  8. やっぱり新宿で探そう { areas: { 銀座: ['id1', 'id2'], 新宿: [‘id3’, ‘id4’]

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

    ‘id4’] }, restaurants: { id1: { id: 'id1', name: 'ポトフ専門店' }, id2: { id: 'id2', name: 'トムヤムクン専門店' }, id3: { id: 'id3', name: 'ボルシチ専門店' }, id4: { id: 'id4', name: 'クラムチャウダー専門店' } } }, 銀座の検索結果は 取得済みなので再利用