このサイトのテーマ『SWELL』を見てみる >>

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

こんにちは。takabeeです。

 

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

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

 


Nuxt初心者
Nuxt.jsのSSRってどんな仕組みなの??ライフサイクルフックについて公式ドキュメントとか解説記事とか読んでもまったく理解できない!!
これです。まじで。
SSRって、これからはじめて触れる人には難しすぎるんですよね。

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

①まず全体像から把握して、
②次にライフサイクルフックを紐解いて、
③最後に実際に認証機能を作っていく

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

 

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

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

 

ネコ大先生
コメントこの記事は【約8分】で読めるニャ。
目次

Nuxt.jsとは?

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

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

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

あわせて読みたい
Nuxt.jsとは?超シンプルなTODOアプリを作りながらサクッと理解しよう!【メチャクチャ簡単です】 こんにちは。takabeeです。   今回はNuxt.jsをTODOアプリを作りながらサクッと理解してしまおう、という記事です。 この記事を見てくれている方は、 Nuxt初心者 Nu...

 

 

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

SSRを理解するにあたって、3つのステップが必要です。
【STEP1】Nuxt.jsの仕組みをザックリ理解しよう!
【STEP2】SSRのライフサイクルフックを理解しよう!
【STEP3】実際に認証機能を作ってみよう!
なぜこのステップが必要かというと、実際にコードを書く前に、SSRをザックリ理解した方が、圧倒的に吸収力が違うからです。
なのであせらず、SSRの全体像の把握から入りましょう。

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

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

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

 

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

 

あわせて読みたい
SPA・SSR・SSGを5分で理解できるように解説してみた。【これで解決】 こんにちは。takabeeです。   今回はNuxt.jsのSPA, SSR, SSGの違いについて、世界一わかりやすく解説していく記事です。 Nuxt.jsを勉強し始めたばかりの方は、 初...

 

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

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

 

Takabee
はじめに全体像を把握することで、あとからの理解度が段違いに跳ね上がります。

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

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

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

答えはこちら。

 

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

 

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

 

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

 

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

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

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

 

Takabee
各フックの実行タイミングを意識しながら、各適切なコーディングをしていきましょう。
各フックの概要と、適切なコーディングについては、こちらをご覧ください。
あわせて読みたい
Nuxt.jsのライフサイクルフックを丁寧に解説してみた。   今回はNuxt.jsのライフサイクルフックを丁寧に解説します。 Nuxt.jsはじめたばかりの方は、間違いなくといっていいほどライフサイクルフックでつまづくと思いま...

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

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

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

 

・Firebase Authenticationで認証機能を実装
・ログインしたユーザーはトップページに遷移し、ログインしていないユーザーはログインページにリダイレクトさせる

 

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

あわせて読みたい
【12000字で徹底解説】Nuxt.jsで認証機能を実装しよう【SSR入門】 こんにちは。takabeeです。   Nuxt.jsを始めたばかりの人にとって、よくありがちな悩みがこちら。 Takabee Nuxt.jsの認証機能を作るのが難しい!ていうかSSRがそも...

 

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

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

 

Takabee
実際に手を動かしながら、少しずつ覚えていこう!

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

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

 

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

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

 

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

とくに、初めての方は成功体験がまだあまりないので、簡単に挫折してしまいます。
ここでしっかり踏ん張って、次のステップに進みましょう!
では、また次の記事でお会いしましょう。
ネコ大先生
最後まで読んでくれて、ありがとうニャ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Webエンジニア兼ブロガー。Nuxt.js, Wordpress, SEO対策などの案件を承っております。
お仕事の依頼はこちらから。
https://www.lancers.jp/profile/takabeee

コメント

コメントする

目次
閉じる