静的化??に混乱するの巻

更新:2020/10/27 04:22 by nasu38yen

公式ガイドの「静的ファイルの生成」に
Netlifyにデプロイするのは「静的化サイト」だと説明されている気がします。
Githubへのpushをgenerateコマンドが処理するので、
pagesフォルダ配下の各ページに.htmlが生成されているのは間違いありません。
静的化というのは、generate時にこのhtmlにコンテンツが埋め込まれるのだと思い込んでいました。
なので、microCMSでコンテンツを編集する都度generateが必要なのだと。
ところが、microCMSで編集した内容はgenerateなしで即座にサイトに反映されます。
このサイトの場合だと、fetchメソッドでstoreにコンテンツAPIの応答を格納しています。
つまり、Netlifyにデプロイした「静的化サイト」でもAPIアクセスは実行されているのです!
さて、fetchメソッドに書いたこのAPIアクセスコードはどこで動いているのでしょう??
もし、ブラウザ側からAPIアクセスが実行されているとすると、それは意図しない動作の気がします。
もし、サーバー側でAPIアクセスが実行されているとすると、SSRとの違いがわからなくなります。

ちなみに、nuxt.config.jsの設定はこのようになっています。

  mode: 'universal',
  target: 'server',


これは普通にSSRサイトの設定のような感じがします。
実際、開発PCで npm run dev すると、fetchメソッドのコードが動くのはブラウザ側ではないようです。
つまり、開発PCでデバッグしているとき、このプロジェクトはまぎれもなくSSRサイトと思えます。
このサイトをNetlifyにデプロイするとそれは「SSRサイト」ではなく「静的化サイト」となるのでしょうか?
であれば、「SSRサイト」/「静的化サイト」を決めるのはプロジェクト作成時ではなく、
そのプロジェクトをどこに配置するか?で決まることになりそうです。そうなの??

試しに、target: 'server' → target: 'static' に変更してみたところ、
このプロジェクトをgenerateすることはできず、代わりにbuild > export してね!と叱られました。
そして、この場合は、microCMSで編集がそのままブラウザ上のページに反映することはありませんでした。
.htmlにコンテンツが埋め込まれたようです。これが私の当初の「静的化」のイメージです。
どうもこれを 「フル静的化」といい「(ただの)静的化」とは区別するようです。

複雑っ!!  ですよね?
みんな、これを公式ガイドの「はじめに」から誤解もなく読み取れるのでしょうか?
わたしにはそこまでの理解は無理でした。SPA/SSR/静的化の3つのタイプを、
mode, targetプロパティと、build, generateコマンドの関係で整理して理解した方が良い気がします。
さて、generateしてデプロイしたサイトでもコードが実行されるとすると、SSR/静的化の違いは何でしょう?
謎が深まりますTT まだまだ先は長そうです> Nuxtっていったい何?

親ノート

Nuxtとは何か? 更新:2020/08/06 00:07 by nasu38yen

関連ノート

なぜ静的化するのか? 更新:2020/10/27 04:21 by nasu38yen
動的ルートがクロールされない!? 更新:2020/10/26 00:27 by nasu38yen
静的化サイトについての整理 更新:2020/10/23 11:57 by nasu38yen
generateコマンドの怪 更新:2020/10/23 02:28 by nasu38yen