//not foundから学んだSSR,SPA(CSR),SSG

きっかけ

ある日、ローカルで作業をしていて、キリのいいところまで終わったのでnetlifyにデプロイをして、きちんとビルドが通って、ワクワクしながらプレビュー画面を見てみるとこれでした。😱

結論

netlify cmsの記事を取得するにはSPA(CSR)ではだめでして、SSGにすると解決しました。

簡単に知識を学ぶ

SPA(CSR)

クライアントサイドだけで動くやつに使える(静的ホスティング(netlify,vercelなど)ができる)

SSR

クライアントサイドに加えて、サーバーサイドも使うようなものに使える（node.jsなど使えるような環境が必要）

SSG

事前にnuxt generateでできた静的ファイル(dist)を静的ホスティングにあげる（事前に作成しているために、めっちゃ高速である）

具体的に

nuxt.config.js

export default {
     target:'sever'//サーバーサイドの環境があるとき
}

nuxt.config.js

export default {
    target:'static'//静的ホスティングを使うとき
}

nuxt.config.js

export default {
     ssr:true//SSRを使うとき
}

nuxt.config.js

export default {
     ssr:false//SSRを使わないとき
}

SSGは？？となりませんか？
実はこの四つの組み合わせなんですよ！！

nuxt.config.js

export default {
     ssr:true,
     target:'static'//SSGの組み合わせ
}

nuxt.config.js

export default {
     ssr:false,
     target:'static'//SPA(CSR)の組み合わせ
}

nuxt.config.js

export default {
     ssr:true,
     target:'sever'//SSRの組み合わせ
}

###結論
ssr:trueでもgenerateできる。だから、静的ホスティング使える。
この３個の違いって微妙だよね？ってなるけど、知らないと結構はまるよ
by経験者は語る