Nuxt.jsでmodeをSPAにした場合のExpressは何をやっているか

Question

前提・実現したいこと

Nuxt.jsのプロジェクトをcreate-nuxt-appで作る時に以下を選択したとします。

• Server-side frameworks: Express
• Nuxt mode you want: SPA

するとserverフォルダが作成されて、index.jsが作成されると思うのですが、これは何をしているコードなのでしょうか。
modeをUniversalにした場合はサーバーサイドのプログラムを書くこともあるのかなと思いますが、SPAにした場合はサーバーサイドのプログラムを書くことはないのかなと思っていました。

modeをSPAにした場合のExpressは何をやっているのでしょうか。

補足情報（FW/ツールのバージョンなど）

Nuxt.jsのバージョンはv2.9.2です。

Answer 1

その場合のExpressはフロントエンドのSSRのためのものではなく、DBに対してCRUDを行ったりフロントに対してAPIを提供したりするために存在しているのではないでしょうか。

Comments

[mira_]

すみません、理解できないので詳しく説明していただけないでしょうか。
Expressサーバーが立ち上がって、「DBに対してCRUDを行ったりフロントに対してAPIを提供したり」しているということでしょうか。

Nuxt.jsで作成したプロジェクトは、ビルドしてGitHub Pagesで提供しようと思っているのですが、GitHub PagesでExpressサーバーを立ち上げることはできないと思います。
ビルドした時にExpressはどうなるのでしょうか。

参考：シングルページアプリケーションの展開（SPA）
https://nuxtjs.org/guide/commands#single-page-application-deployment-spa-

[退会済みユーザー]

理解度を確認させてください。
サーバサイドアプリケーションの開発を行ったことはありますか？
「フロントエンドがバックエンドのJSON APIを叩いてデータを取得する」という文章の意味は理解できますか？

[mira_]

ありがとうございます。完璧にわかっているとは言えないです。
数年前にサーバサイドをExpressで、フロントエンドをjQueryで開発を行ったことはあります。
サーバサイドのExpressはCentOS上のNode.jsで立ち上げて、jQueryで作ったサイトはNginxに置いていました。
NuxtがjQueryの代わりのようなもので、Github PagesがNginxの代わりのようなものかなと思っていたのに、NuxtにもExpressが登場して謎です。

[退会済みユーザー]

端的に言うとgithub pagesに載せるだけでサーバ側の処理がないならexpressは使わないので無視すれば良いです。

[退会済みユーザー]

その場合そもそもプロジェクト作成段階でexpressというかサーバーサイドフレームワークは無しで良かったですね。

[mira_]

なるほど。
では、SPA＋Expressはどのような時に選択すれば良いのでしょうか。
「サーバ側の処理がないならサーバーサイドフレームワークは無しで良かった」ということは、サーバ側の処理がある時に選択すれば良いのかと思いますが、だったらmodeをUniversalにする場合と、SPA＋Expressはどのように使い分ければ良いのでしょか。

[退会済みユーザー]

手元でcreate-nuxt-appで確認しました。
私の当初の予測とは裏腹にexpressはnuxtのSSRにも使われるようですね。
SSRするためのフレームワークを選べるという趣旨のようでした。

結論として
ExpressはSSRの用途でもAPIの用途でも使えるようなので、
Nuxtと組み合わせるにあたり、
SPA Modeの場合はAPIの役割
Universal Modeの場合はSSR+APIの役割
という感じだと思います。

そしてAPIが必要になるシチュエーションはDBやサーバ側処理が存在する場合です。

[mira_]

> SPA Modeの場合はAPIの役割
> Universal Modeの場合はSSR+APIの役割
> という感じだと思います。

とても良くわかりました！
当初、公式サイトのSPAの説明に "need static hosting for your applications" と書いてある部分を、SPA Modeは "static hosting" だけにしか使わないものだと理解していました。
"static hosting" の場合はSPA Modeが必要だけど、SPA Modeの場合が全て "static hosting" というわけではなかったのですね。
参考：https://nuxtjs.org/guide#single-page-applications-spa-

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