Nuxt.jsのSSRを認証機能を作りながら理解しよう！【これで完璧】

こんにちは。takabeeです。

 

今回はNuxt.jsのライフサイクルフックを含めて、SSRについてしっかり理解できるように解説していく記事です。

Nuxt.jsで始めてSSRについて触れる方は、間違いなくこんな問題にぶち当たります。

 

でも大丈夫。今回の記事ではNuxt.jsのSSRについて、

というステップバイステップでわかりやすく解説していきます。

 

しかも画像、イラスト多めの出血大サービスになっています。

なので安心して読み進めていきましょう！

 

Nuxt.jsとは？

もしかするとこの記事を読んでいる方の中には、「Nuxt.jsについてあんまりよく知らない」という方もいるかもしれません。

そういう方はこちらの記事を5分くらい眺めてから、こちらに戻ってきてください。

ここから先の理解度が4割ほど変わります。

 

 

SSRをサクッと理解しよう！

【STEP1】SSRの仕組みをザックリ理解しよう！

はい、ではさっそくSTEP1から始めていきます。

ここではSSRとはなんぞや？を簡単に理解していくのですが、やることは1つだけ。

 

こちらの記事を5分だけみてください。

 

 

だれでも5分でSSRを理解できるように、画像やイラストをふんだんに使って解説しました。

SPAとSSGとの違いもしっかり解説しているので、5分だけ眺めて戻ってきてください。

 

【STEP2】SSRのライフサイクルフックを理解しよう！

【STEP1】でSSRについてザックリと理解できた方は、これからSSRを深く理解していきましょう。

 

おさらいですが、SSRとはサーバー側でレンダリングをすることです。

ではこのレンダリングの間で、一体何が起こっているのでしょうか？

 

サーバー側でレンダリングされるときには何が起こっているのか？

 

これを理解するのに、「ライフサイクルフック」というものを理解する必要があります。

 

ライフサイクルフックは、Nuxt.jsがSSRでページをレンダリングするときにこんな手順でやりますよー、という流れです。

 

このライフサイクルフックは実際にはこんな感じになってます。

長いですが、あとから詳しく説明するので、いまは10秒くらいさっと眺めればOKです。

 

実際のSSRのライフサイクルフック。Nuxt公式サイトから出典。

 

SSRを理解する上で大切なのは、ライフサイクルフックのうち、どこからどこまでがサーバーやクライアントで行われるのかということです。

答えはこちら。

 

サーバー側とクライアント側で行われる主なフック

 

色々省略しましたが、サーバー側とクライアント側で行われる主なフックとしてはこんな感じです。

 

リクエストがきて１度だけサーバー側でそれぞれのフックが行われ、レンダリング済みのアプリをレスポンスとして返します。

 

そのあとはサーバーにリクエストがいかない限りは、クライアントで処理を続けることになります。

ちなみにサーバーにリクエストが飛ぶのは、たとえばページを更新したときとかです。

初めにリクエストが来たときのみサーバー側でレンダリング処理が行われる。レスポンス後はリクエストが飛ばない限りはクライアント側で処理される。

 

【STEP3】実際に認証機能を作ってみよう！

言葉だけでは少し分かりづらいかもしれないので、実際にコーディングしていきましょう！

今回作る目標物はこんな感じ。

 

 

実際のコーディングは、めちゃくちゃボリュームを盛り込んで解説したこちらの記事をご覧ください。

 

総文字数12000字、作成時間12時間の記事で、画像やイラストを盛りに盛って作り上げました。

あなたのNuxtライフに絶対に役立つこと間違いなしです。

 

まとめ：SSRははじめは理解しにくい

ここまで、お疲れ様でした。

 

SSRはとくにNuxt.js初心者がつまづきやすいところです。

なぜならVue.jsでもあまりSSRとか変わることがないから。

 

しかしここで諦めずに、地道に理解していってください。