Nuxt.jsでSSRを体験してみる - AB型技術系主に備忘録

SSRの動きがいまいち理解できないので動きをを確認したい。
個人的に開発中のシステムがあるので良さそうなら導入したい。

npxコマンドを使うのでNode.jsのインストールが必要。
既にNode.jsはインストール済みだったのでNuxt.jsのインストールから始める。

プロジェクト名の入力に進みます。

"sample"と入力してEnter
プログラミング言語の選択に進みます。

JavaScriptを選択してEnter
パッケージマネージャーの選択に進みます。

Npmを選択してEnter
UIフレームワークの選択に進みます。

Noneを選択してEnter
モジュールの選択に進みます。

複数選択可能ですが、非同期通信だけ試したいのでAxiosのみを選択してEnter
(選択はスペースキー)
Lintツールの選択に進みます。

全て選択してEnter
テストフレームワークの選択に進みます。

None選択してEnter
レンダリングモードの選択に進みます。

Universal(SSR/SSG)を選択してEnter
デプロイメントターゲットの選択に進みます。

Server(Node.js hosting)を選択してEnter
デプロイメントツールの選択に進みます。

jsoonconfig.jsonを選択してEnter
CIツールの選択に進みます。

None選択してEnter
バージョン管理システムの選択に進みます。

None選択してEnter
インストールが始まります。

インストールが完了。

npm run devを入力してEnter

ポート番号3000でサーバーが起動しました。

http://localhost:3000/にアクセスすると画面が表示されました。

導入は意外と簡単ですね。

Nuxt.jsは静的ファイル(htmlなど)を出力する機能があるので以下を試してみたいです。