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

比較サイトの検索改善(SPA から SSR に変換)

gree_tech
November 11, 2021

比較サイトの検索改善(SPA から SSR に変換)

GREE Tech Conference 2021 で発表された資料です。
https://techcon.gree.jp/2021/session/Session-3

gree_tech

November 11, 2021
Tweet

More Decks by gree_tech

Other Decks in Technology

Transcript

  1. • 名前 • 天野 桂輔 • 担当 • サーバーサイドエンジニア •

    Ruby on Rails、Nuxt.js • 経歴 • 2013- グリー株式会社 • GREE Platform 部に所属 • 2020- アウモ株式会社 • 比較サイト、aRM※の開発担当 ※CRMツール 自己紹介 2
  2. 6 Web記事 カテゴリ 技術スタック プログラム言語 / FW Ruby / Ruby

    on Rails インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB 監視 Datadog, Papertrail, PagerDuty 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch コード管理 GitHub Web記事 SEOに最適化された コンテンツ制作 Web記事
  3. 7 App Web記事 カテゴリ 技術スタック プログラム言語 / FW Ruby /

    Ruby on Rails, Swift, Kotlin, Python インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB, FireStore Database 監視 Datadog, Papertrail, PagerDuty, Firebase 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch 機械学習 SageMaker, fastText コード管理 GitHub 位置情報、閲覧傾向を利用 レコメンドシステム App
  4. 8 Web施設 Web記事 カテゴリ 技術スタック プログラム言語 / FW Ruby /

    Ruby on Rails, Vue.js, Nuxt.js インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB 監視 Datadog, Papertrail, PagerDuty, Sentry 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch コード管理 GitHub Web施設 ユーザーの口コミを活用 おでかけCGM
  5. 10 施設情報を提供するサービス 比較サイトとは? • 施設 • 基本情報、写真、口コミ • 検索 •

    ジャンル×エリア×カテゴリで施設を検索 ホテル グルメ レジャー・観光 チラシ・ショッピング
  6. 13 Single Page Application SPA ページ遷移することなく同一のページ内でコンテンツのみ切り替 え サーバー ELB クライアント

    ①リクエスト ③レスポンス ②コンテンツ生 成 ④JSをブラウザで実行 ※2回目以降は差分のみリクエスト するため処理が早い
  7. 23 Server Side Rendering SSR Webページのレンダリングをブラウザの代わりにサーバ上で行う サーバー ELB クライアント ①リクエスト

    ③レスポンス ②コンテンツ生 成 ・HTML生成 ・JS実行 ※ Node.js必要 ④コンテンツ表 示 ※画面の表示において有用な アプリケーションの機能
  8. 27 仕様変更 • 検索処理 • Vue components 内 mounted 時に実行

    • しかも、ジャンル毎に似たような処理がある... mounted () { return this.search() }, search () { const page = this.$route.query.page || 1 : 検索パラメータ設定 : this.searchGourmetAction({ searchQuery, page }) // store経由でAPIリクエスト } 変更前
  9. 28 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData()

    created() fetch() mounted() validate() ・初回アクセス時に実行される ・ストアに事前にデータを格納する ☆ page components のみ利用可能 ★ 全ての Vue components で利用可能 ・条件の設定やチェックを行う ・page リダイレクトに利用 ☆ 動的ルーティングのパラメータを検証 Vuex store component data ☆ page レンダリング前にデータを取得 ★ Vue インスタンスが生成されたときに呼び出される ★ Vue インスタンスが生成された後に呼び出される ★ DOM がレンダリングされたときに呼び出される
  10. 29 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData()

    created() fetch() mounted() validate() DOM がレンダリングされた後に検索
  11. 30 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData()

    created() fetch() mounted() validate() page レンダリング前に検 索
  12. 31 ① 検索処理の移行 仕様変更 • 検索処理 • page components 内

    fetch 時に実行 • page 全てに同様の処理を置くのは微妙なので... async fetch ({ app, route }) { return await Promise.all([ app.$categorySearch({ route }) ]) },
  13. 32 ② 検索処理の共通化 仕様変更 • plugin 利用 • ジャンル毎の検索処理を共通化 export

    default ({ store, req }, inject) => { inject('categorySearch', async ({ route }) => { const page = route.query.page || 1 switch (process.host) { case process.env.GOURMET_DOMAIN: : 検索パラメータ設置 : await store.dispatch('gourmetSearch/searchGourmetAction', { searchQuery, page }) break : } }) } ※ ブラウザ環境に帰属するオブジェクト(window, document)にはアクセス不可
  14. 40 NuxtJS • SSR導入は困難ではない • Node.js サーバー環境を準備 • Nuxt Life

    Cycle 理解 ※クライアント、サーバーの処理 • 同様の課題があるサービスに有用 • ページ単位で導入も可能
  15. 42