SSRの話

kahirokunn

たまにQiitaで記事投稿してます.

最近やってること

・「コンピュータシステムの理論と実装

・Rustで「atcoder」入門中

今のSPA

  • ReactやVue等のライブラリを利用
  • リッチなUIをたった1ファイルのJsで表現
  • 1ファイルのJsで表現できるので、静的なhtmlとセットで簡単に配信できるので楽

※ 今のページに必要なJsコードだけを呼び出す方法もある

※ 昔のSPAはやったことないのでよくわかりません

SPAでよくある質問😗

  • Vuex使っとけばいいの?🤔
  • どうコードを書くのが正解なのかわからない。🤔

せっかくなのでVuexがあると明確に助かるケースを1つ紹介する

Vuexの特徴

  • 単一状態木のメンテが可能
  • 単一状態木の状態をVueに反映してくれる

※ 単一状態木とは、超簡単に言えば状態が詰まったobjectです

SSR

  • サーバー側でHTMLを生成して返す
  • Jsを埋め込む事により、リッチなUIを表現
  • ページ変える度にサーバーに新たなHtmlを要求

Laravel, Rails, Django...etc

代表例

Vueのレンダリングをユーザー端末ではなく、従来のSSRの様にサーバー側でできるだけHTML生成してから返す

Vueのファーストペイントを早くする方法の1つを紹介

DEMO

※ first paintまで。jsは動かない

ただのHTMLであり、JSがないので当然動かない

ここから普通のSPAの様に操作させれる様にする為の機能がVueにはあるので、それを活用

※ hydrationとかと呼ばれる機能

DEMO

仕組み

構造が同じなのでフロントでVueをhydration

※ 構造が違ったらhydrationに失敗する

課題

  • サーバーからフロントにUIのデータを渡す必要がある

解決手段の一つでVuexのstate tree等が便利

サーバー側でstoreのstateをwindowにjsonシリアライズして埋め込んで、front側でそれを元にstoreの状態を復元

 

store.stateをwindowに注入

windowからstore.stateを復元

ありがとうございました!

SSRの話

By kahirokunn

Loading comments...

More from kahirokunn