VELTRA Engineering
Published in

VELTRA Engineering

😲Nuxt.jsのSSRの挙動に驚いた!

付録:すぐに試せるサンプルアプリ✨

サンプルアプリ

作ったアプリはHerokuで公開しています。

トップページ

  • <a> タグを使ったリンク

SSRページ

  • バックエンドAPI:/backend (Basic認証あり)

アクセス方法による挙動の違い

🙂直接アクセスした場合

まず、SSRページに直接アクセスした場合の挙動を見てみましょう。ブラウザの開発者ツールで見ると、下記のリクエストが実行されていることが分かります。

😲<nuxt-link>で遷移した場合

次に、<nuxt-link> リンクでSSRページに遷移した場合の挙動を見てみます。

😲<a>で遷移した場合

最後に、<a> リンクでSSRページに遷移した場合の挙動を見てみます。

おわりに

サンプルアプリの実装を通じて、Nuxt.jsの下記の挙動が理解できました。

  • 直接アクセスするとSSRされる
  • <nuxt-link> で遷移するとSSRされない
  • <a> で遷移するとSSRされる

--

--

Posts from the VELTRA Engineering team. www.veltra.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Takashi Iwamoto

インフラエンジニア@ENECHANGE。約20年のWeb開発、AWS Japanでの技術サポートを経て現職。技術的負債の返済が大好物。情報処理技術者試験の現行全区分に合格済み。JAPAN MENSA会員。