Nuxt3の基本
kurumin
プログラミングのーと
Nuxt.jsのビルドについて
kurumin
Contents
npm runのオプション
buildオプション
npm run build.output/serverフォルダ内に生成されたindex.mjsファイルをNode.jsに実行させることで、プロジェクト全体が動作する。
node output/server/index.mjs公開したら、Node.jsサーバをずっと起動させる必要がある。
index.mjsはルータのような役割。
Nodeを使用するので、こっちを使用する場合、Nodeの管理をする必要があり、運用の手間が発生する。（それならLaravelとかのフルスタックのライブラリ使用するほうがよいとのこと）
generateオプション
npm run generate.output/distが生成される。
このdistフォルダはエイリアスとなっていて、その実体は.output/publicフォルダになる。
puplicフォルダに生成されたファイル一式を、Webサーバに配置することで、Nuxtプロジェクトを公開できるようになる。
以下のコマンドでプレビューすることも可能。
npx serve.output/publicgenerate生成の制約
全てが、静的htmlファイルとその相方となるjsファイルという仕組みで実現するため、serverフォルダ内の処理には対応できない。
「npm run generate」コマンドを実行したタイミングでWeb APIへアクセスし、取得したデータを元に静的htmlファイルを生成するため、画面が表示されたタイミングでのデータではなくなる。
画面が表示されたタイミングで、最新の情報をWebAPIから取得するようなプロジェクトには向かない。
レンダリングモード
SSR（サーバサイドレンダリング）（デフォルト）
Nuxtでは、ユニバーサルレンダリングともいう。
NuxtのSSRの仕組み
通常はサーバサイドで処理を行うが、アプリのユーザと相互のやり取りが必要な処理など、どうしてもクライアントサイドで動作しないと成り立たない処理内容に関しては、その処理をサーバサイドで行わず、JSコードをブラウザに返すことで、ブラウザ上でも動作させるように自動的に制御してくれる。（ふわっとしててわからない！）
特定の処理（例：ボタンをクリックしたときのアニメーションや動的なデータ更新など）は、クライアントサイドで実行する必要があります。Nuxtはこのような処理に対応するため、JavaScriptのコードを一緒にクライアントに送信し、クライアント側で動作させる部分を自動的に判断してくれます。
SSRとCSRのいいとこ取り。
CSR（クライアントサイドレンダリング）
設定記述
ssr: falseCSRの仕組み
HTMLは空のdivタグ。ブラウザ側でJSコードが実行され、その処理内容に合わせてdivタグ内に必要なタグがレンダリングされる。HTMLは空のdivタグ。ブラウザ側でJSコードが実行され、その処理内容に合わせてdivタグ内に必要なタグがレンダリングされる。
SSG（静的サイトジェネレーション）
設定記述
prerender: trueSSGの仕組み
初回アクセスの場合、htmlファイルを生成する。
次にアクセスした場合、すでに生成されたhtmlファイルを返す。
一度生成したファイルを何らかの方法で削除したり、強制的に再生成しない限り、永久に同じ内容のファイルが返される。
NuxtのSSGの問題点
現在時刻を出力するファイルを作成し、表示された画面を見ると、ソースコードは変わらないが、画面をリロードするとその時点の時刻に変化する。
よく見ると、ソースコード上の時刻が一瞬表示されたあとで、現在時刻に変化する。
サーバから返されたソースコードをブラウザが表示した後、すかさずJSが実行されて現在時刻に上書きされてるという仕組み。
ISG（インクリメンタル静的ジェネレーション）
設定記述
swr: 数値ISGの仕組み
初回アクセスの場合、SSGと同様にhtmlファイルを生成する。
以降、ある一定期間は、そのフェイルを返す。
ただし、一定期間を過ぎると、その時点での表示内容に合わせて再度htmlファイルを生成する。
なお、ISGもSSGと同じ問題を抱えている。
ABOUT ME
