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

SSR以後の世界へ / techcamp05

Yuichi Goto
November 20, 2018

SSR以後の世界へ / techcamp05

第5回開発合宿(2018/11/20)

Yuichi Goto

November 20, 2018
Tweet

More Decks by Yuichi Goto

Other Decks in Programming

Transcript

  1. なぜSSR基盤を導入するのか • 一般的によく言われる目的: • SPAにおけるSEO対策のため • First Meaningful Paintの高速化のため •

    ピクスタでの目的: 既存のSEO面での要求を満たし ながら、エンジニアとデザイナーの職務の境界線を 変更するため !4
  2. 職務の境界線の変更 現在 デザイン マークアップ JavaScript バックエンド !5 目指したい状態 デザイン マークアップ

    JavaScript バックエンド ! デザイナー ! エンジニア ! デザイナー ! エンジニア こうすることでコンポーネントという 再利用可能な単位を導入できる
  3. SSR(Server Side Rendering)とは • 狭義の意味では、ブラウザ向けのコードをサーバー 側で実行し、HTMLを生成して返す手法のこと • 実現のための手段(Reactの場合) • Next.js:

    ZEIT製のWebアプリケーションフレーム ワークで、ReactのSSRを始め多くの機能を持つ • Hypernova: Airbnb製のSSR用のフレームワーク !8
  4. アーキテクチャの違い Next.js !9 Hypernova Browser Next.js API Server (e.g. Rails)

    Data Sever-rendered
 HTML + assets Request data
 (if needed) Request page Browser Rails Hypernova Sever-rendered
 HTML HTML + assets Request SSR Request page
  5. 合宿前にやったこと 1. 技術スタックをモダンな?感じにする • CoffeeScript → TypeScript • Browserify →

    webpack 2. Hypernovaを導入する 3. 既存のSlimで書かれたViewを雑にReact側に移す !13
  6. 参考: ディレクトリ構成(一部抜粋) !16 frontend/src !"" components # !"" atoms #

    # $"" FontAwesomeIcon.tsx # !"" molecules # # $"" Map.tsx # !"" organisms # # $"" ContactUs.tsx # $"" templates # $"" DefaultLayout.tsx !"" images !"" lib # $"" hypernova-react.ts !"" pages # !"" access.tsx # !"" contact-us # # $"" index.tsx # !"" index.tsx # $"" privacy_policy.tsx $"" typings $"" images.d.ts このへんはAtomic Designの 分け方を参考にしている このへんはNext.jsの 構成を参考にしている