[Nuxt.js] SPAについての理解 SSGとの違い

Question

SPAがよく理解できません。
現在、nuxtのSSGモード(?)でサイトを構築しており、nuxt.configのgenerateのrouteでルーティングの設定をして、build generateした時に静的なファイルを生成するようにしていますが、一方でSPAだと、静的なファイルを生成しなくとも、テンプレート的な .vueがあればそれをjsでレンダリングしてくれるのでしょうか？

と言うのも、訳あって静的なファイルのスラッグを伏せなきゃいけなくなってしまい（クイズのような問題サイトを制作しており、そのページの答えが、次の問題のページのスラッグになっていると言う仕様のため）、SSGだとソースコード見たときにバレてしまうなと今更気付きました。
全てのデータは定数管理ファイルに納めていて、アクセスしたページのスラッグからオブジェクトを取り出して読み込んでいます。

3Dオブジェクトをクリックするとページ遷移するようにしているので、<NuxtLink to="">なども使わないし、、
SPAだと、generateの設定を省けば大丈夫だったりするんでしょうか（そんなはずはないか..）、想像で質問してしまいごめんなさい。
どなたかご教授いただけると幸いです。

追記

yarn generate してdistファイルをコマンド http-server ./dist -o -p 8888 してローカルで確認してみましたが、configのgenerateの設定書かなくても任意のスラッグでアクセスしたらちゃんと表示されました。
しかしコンソールには404 Not Found エラーが出てしまいました。

それと、なぜかCSSやglbファイルが_nuxtの中にごちゃ混ぜに入っていました。

Answer 1

誰もコメントしないようなので少し。
答えではないですがコメントを。

yarn generate すると静的なHTMLができるのではなく静的なJavaScript（Vue)ファイルやHTMLなどの塊ができます。

この静的ファイルを作る目的はNode.jsサーバーではなくても、場所借りサーバーならどこにでも設置（Deploy)できるので便利だからです。

この（サイトを維持してくれる）ホスティングサーバーと、ダイナミックなページやデータを提供してくれる、バックエンドサーバー（APIサーバー）を混同しておられるのではないでしょうか。

まずはSSRはやめてSPAでフロントエンドを作り、質問を作ったり、受け取った答えの正否を検証して次のページを指示するバックエンドサーバーをつくられたらどうでしょうか。
バックエンドサーバーとはAxiosなどを使いAPIで通信します。
Firebaseを使う手もあります。

SSRは必要になった時に考えれば良いと思います。

Comments

[rihako]

コメントありがとうございます。
現在、nuxtプロジェクトのpagesの配下に index.vueと_slug.vueを入れており、index.vueはトップページ、_slug.vueは下層ページのテンプレートになるわけなのですが、nuxt.config.jsにてgenerateでrouteの設定をしなくても、generateしdistファイルをローカルで確認すると、ちゃんと下層ページにアクセスできるようになっています。内部でどのようなことが行われているのか私には謎です...

質問データを管理している定数管理ファイル.jsはこのようになっていて

questions: {
init: { //質問ページのスラッグ
id: 0,
slug: 'slug', //質問ページのスラッグ
key: 'key', //解答の文字列
length: 6, //解答の文字数
hint: 'drag to rotate', //ヒントのメッセージ
},
previousQuestionsKey: { //質問ページのスラッグ（前回の質問の解答）
id: 0,
slug: 'previousQuestionsKey',
key: 'key', //答えの文字列
length: 6, //答えの文字数
hint: 'drag to rotate', //ヒントのメッセージ
},
...........

２０問以上あります。

_slug.vueでは、this.$route.params.slug で現在のslugを取得し、定数管理ファイルからslugと同じ名前のオブジェクトを取り出しdataをセットしたり3Dモデルを取り出したりしています。（ある意味ダナミック??）
なので、アクセスされたページのslugが定数管理ファイルで見つからない場合はerrorページに飛ぶようになっています。

こんな感じでいいのではないかなぁと思いましたが、問題なく描画されているページでもconsoleを開くとなぜか404エラーが表示されています（errorページには飛ばないのに）。。

バックエンドサーバー難しそうですね...
結構前に、WordPressでAPIを発行してnetlifyでJAMスタックなサイトを適当に作ったことがありますが、今回のためにWPは使いたくないですよね, Firebaseは一度も触れたことがなく、時間があったら構築し直してみたいですが、当初のリリース予定日が14日だったので＿|￣|○

それと、正解したら一度TOPページに戻って、次の質問へのリンク（ハイパーリンクがついた3Dのマテリアル）が出現するという仕様なので、Vuexと勝手にvuexをローカルストレージに保存してくれるプラグインを使ったりしています。
three.jsの難関がまだ終わってないのでちょっと痺れる状況です(o_o)