GREE Tech Conference 2021 で発表された資料です。 https://techcon.gree.jp/2021/session/Session-3
比較サイトの検索改善（SPAからSSRに変換）アウモ株式会社 サーバーサイドエンジニア 天野桂輔
View Slide
• 名前• 天野 桂輔• 担当• サーバーサイドエンジニア• Ruby on Rails、Nuxt.js• 経歴• 2013- グリー株式会社• GREE Platform 部に所属• 2020- アウモ株式会社• 比較サイト、aRM※の開発担当 ※CRMツール自己紹介2
aumoはご存知ですか？ⓘ Start presenting to display the poll results on this slide.
4aumoってどんなサービス？国内最大級のおでかけ情報サービス1300万 500万月間ユーザー数 アプリDL数50万掲載記事数 総口コミ数50万掲載メディア数500
5aumoってどんなサービス？Web記事SEOに最適化されたコンテンツ制作Web記事Web記事 Web記事位置情報、閲覧傾向を利用レコメンドシステムAppユーザーの口コミを活用おでかけCGMWeb施設
6Web記事カテゴリ 技術スタックプログラム言語 / FW Ruby / Ruby on Railsインフラ AWSデータベースMySQL, Redis, Memcached,DynamoDB監視 Datadog, Papertrail, PagerDuty分析 Bigquery, PoT ※社内分析ツール検索エンジン ElasticSearchコード管理 GitHubWeb記事SEOに最適化されたコンテンツ制作Web記事
7AppWeb記事カテゴリ 技術スタックプログラム言語 / FWRuby / Ruby on Rails, Swift, Kotlin,Pythonインフラ AWSデータベースMySQL, Redis, Memcached,DynamoDB, FireStore Database監視Datadog, Papertrail, PagerDuty,Firebase分析 Bigquery, PoT ※社内分析ツール検索エンジン ElasticSearch機械学習 SageMaker, fastTextコード管理 GitHub位置情報、閲覧傾向を利用レコメンドシステムApp
8Web施設Web記事カテゴリ 技術スタックプログラム言語 / FW Ruby / Ruby on Rails, Vue.js, Nuxt.jsインフラ AWSデータベースMySQL, Redis, Memcached,DynamoDB監視Datadog, Papertrail, PagerDuty,Sentry分析 Bigquery, PoT ※社内分析ツール検索エンジン ElasticSearchコード管理 GitHubWeb施設ユーザーの口コミを活用おでかけCGM
9比較サイトとは？Web記事 Web記事位置情報、閲覧傾向を利用レコメンドシステムAppユーザーの口コミを活用おでかけCGMWeb施設Web記事SEOに最適化されたコンテンツ制作Web記事
10施設情報を提供するサービス比較サイトとは？• 施設• 基本情報、写真、口コミ• 検索• ジャンル×エリア×カテゴリで施設を検索ホテル グルメ レジャー・観光 チラシ・ショッピング
11構成フロントエンド バックエンドELB同一インスタンスに搭載サブドメイン
12当初のフロントエンド設計UXを優先したSPAという方法を採用
13Single Page ApplicationSPAページ遷移することなく同一のページ内でコンテンツのみ切り替え サーバーELBクライアント①リクエスト③レスポンス②コンテンツ生成④JSをブラウザで実行※2回目以降は差分のみリクエストするため処理が早い
14SPA• メリット• 2回目以降は差分のデータのみを要求するため早い• デメリット• 初回のページ読み込みが遅いSingle Page Application
15比較サイトの成長に伴い、初回読み込みの遅延が顕著に。。。
16特に、施設の検索が遅い
17検索の課題• コンテンツ表示までの速度• 検索エンジン最適化（SEO）対策
18検索の課題• コンテンツ表示までの速度• 検索エンジン最適化（SEO）対策
19コンテンツ表示までの速度検索の課題• コンテンツ生成が非同期• レンダリングに時間がかかる
20検索の課題• コンテンツ表示までの速度• 検索エンジン最適化（SEO）対策
21検索エンジン最適化（SEO）対策検索の課題• コンテンツ生成が非同期で評価できない• Web記事はSEOに強い• ノウハウを共有したいWeb記事SEOに最適化されたコンテンツ制作Web記事
22検索の課題• コンテンツ表示までの速度• 検索エンジン最適化（SEO）対策解決策：SPAからSSR（同期生成）に仕様変更
23Server Side RenderingSSRWebページのレンダリングをブラウザの代わりにサーバ上で行うサーバーELBクライアント①リクエスト③レスポンス②コンテンツ生成・HTML生成・JS実行※ Node.js必要④コンテンツ表示※画面の表示において有用なアプリケーションの機能
24SSR• メリット• 画面の表示が早い• デメリット• サーバー側の負荷が高い• Node.js サーバー環境が必要Server Side Rendering
25つまり
26SPAからSSR（同期生成）に仕様を変更することで• コンテンツ表示までの速度• 検索エンジン最適化（SEO）対策を改善できる
27仕様変更• 検索処理• Vue components 内 mounted 時に実行• しかも、ジャンル毎に似たような処理がある...mounted () {return this.search()},search () {const page = this.$route.query.page || 1:検索パラメータ設定:this.searchGourmetAction({ searchQuery, page }) // store経由でAPIリクエスト}変更前
28Life CycleNuxtJS nuxtServerInitRouteMiddlewarefetch()asyncData()created()fetch()mounted()validate()・初回アクセス時に実行される・ストアに事前にデータを格納する☆ page components のみ利用可能★ 全ての Vue components で利用可能・条件の設定やチェックを行う・page リダイレクトに利用☆ 動的ルーティングのパラメータを検証Vuex storecomponent data☆ page レンダリング前にデータを取得★ Vue インスタンスが生成されたときに呼び出される★ Vue インスタンスが生成された後に呼び出される★ DOM がレンダリングされたときに呼び出される
29Life CycleNuxtJS nuxtServerInitRouteMiddlewarefetch()asyncData()created()fetch()mounted()validate()DOM がレンダリングされた後に検索
30Life CycleNuxtJS nuxtServerInitRouteMiddlewarefetch()asyncData()created()fetch()mounted()validate()page レンダリング前に検索
31① 検索処理の移行仕様変更• 検索処理• page components 内 fetch 時に実行• page 全てに同様の処理を置くのは微妙なので...async fetch ({ app, route }) {return await Promise.all([app.$categorySearch({ route })])},
32② 検索処理の共通化仕様変更• plugin 利用• ジャンル毎の検索処理を共通化export default ({ store, req }, inject) => {inject('categorySearch', async ({ route }) => {const page = route.query.page || 1switch (process.host) {case process.env.GOURMET_DOMAIN::検索パラメータ設置:await store.dispatch('gourmetSearch/searchGourmetAction', { searchQuery, page })break:}})}※ ブラウザ環境に帰属するオブジェクト（window, document）にはアクセス不可
33③ 検索ページ導線を変更仕様変更• 検索ページへの遷移処理を修正• によるページ遷移はクライアント側で実行• ブラウザをハード再読み込みしてサーバーへリクエスト
34まとめ
35改善項目• コンテンツ表示までの速度• 検索エンジン最適化（SEO）対策
36改善項目• コンテンツ表示までの速度• リクエストからコンテンツ表示までの速度：55~62%⬇• 検索エンジン最適化（SEO）対策
37改善項目• コンテンツ表示までの速度• 検索エンジン最適化（SEO）対策• 初回読み込み時に全てのコンテンツを生成
38改善項目• コンテンツ表示までの速度• リクエストからコンテンツ表示までの速度：55~62%⬇• 検索エンジン最適化（SEO）対策• 初回読み込み時に全てのコンテンツを生成
39学び
40NuxtJS• SSR導入は困難ではない• Node.js サーバー環境を準備• Nuxt Life Cycle 理解 ※クライアント、サーバーの処理• 同様の課題があるサービスに有用• ページ単位で導入も可能
41引き続きより良いサービス作りを心掛けていきますこれからもaumoを宜しくお願いしますmm
42
gree_tech
joker1007
cybozuinsideout
aki_iinuma
orgachem
sansantech
tsukubachallenge
mosa_siru
kazuhitotakahashi
dahatake
minorun365
tkhresk
iamshunta
addyosmani
jonyablonski
smashingmag
rocio
jmmastey
dougneiner
brianwarren
davidbonilla
trishagee
deanohume
jcasabona