はじめに
知人からコーポレートサイトの依頼を頂いた。
railsを学習していたので、railsを使って作成しようと一度は思ったのですがなんか違うなと思い。
目的にあった技術を選択して作成することにしました。
サイトの一覧を見ていると、SPAで作成されているのを見かけたので向いているのか確かめる為に調べてみました。
下記の技術より向いているのがあるよ。など、ご教授いただけると幸いです。
SPA (Single Page Application)
Webサーバーからもらった唯一のHTMLファイル（index.html）を雛形にして、ページの一部だけをだけをJavaScriptのDOM操作で変更し複数ページを表現。
デメリット
初期表示の遅さ、OPGが使えない。（SSRを使用すればカバー出来る）
アプリケーション向き、ブログなどサイトのページ数が頻繁に変わるものはメリットがない。
SSR (Server side Rendering)
SPAの改良版で、ページ遷移とコンテンツ切り替えはブラウザの仕事のままでページ固有の非同期リクエストのレスポンスでレンダリングで、レンダリング済のHTMLを渡します。
デメリット
ブラウザの仕事を引き受けているため、サーバー負荷が高い。
アプリケーションサーバーをNginxなどと連携する作業が必要、運用を考えた施策が必要。
小規模では、フル活用出来ない。そもそも表示の遅さに対応する必要があるか検討。
SSG (Static Site Generator)
SPA、SSRと違いJavaScriptを使ったブラウザでのページ遷移をしません。ページ遷移は従来のWebサーバーの仕事。サーバ上には各ページのHTMLファイルがあるのでそれを使用。しかも、その中身はレンダリング済のHTMLなので、ブラウザの仕事が削減されます。動的コンテンツは使う時は、Webサーバー、DBの連携が必要。
デメリット
ページ数が多い、動的コンテンツの割合が多いものには向かない。
サイトのページ数が少ないもの、動的処理があまり無いシンプルなサイト（コーポレートサイトなど）
ページ数が多くても、更新頻度が大したことのないサイトにも向いている。（ブログサイトも行けるかも）
JAMstack
JAMstack （ジャムスタック）とはウェブサイトを構築・運用するための JavaScript ・ APIs ・ Markup を表します。
APIs はプログラムから利用するために作られたウェブサービスのことで、 Markup は HTML ファイルのことを指します。
特徴としては
● サイトの各ページに相当する HTML ファイルをプログラムを使って事前に生成しておく
● ブラウザからアクセスがあったときは事前に生成した HTML ファイルの中身をそのまま返す
● 動的な機能が必要な場合は JavaScript と API を利用して実現する
JAMstack は SSG 等の要素技術を組み合わせて「静的サイトと動的サイトのよいとこどり」をしたようなサイトを実現する手法全体を意味します。
関係性で言うと、 SSG は JAMstack を実現するときに利用される要素技術のひとつです。
つまり SPA を作る JAMstack 構成も可能で、 SPA ではない JAMstack 構成も JAMstack 構成ではない SPA も実現可能。
同じと言えば同じであるが、厳密に言えば違うということ。
下記参考サイトにより詳しく記述あります。上記はざっくりと抜き出したものです。 [SPA、SSR、SSG][参考サイト](https://tadtadya.com/summary-of-the-web-site-display-process-flow/) [JAMstack][参考サイト](https://dyno.design/articles/what-is-JAMstack/)
結論
Nuxt.jsでSSGよりのJAMstackなサイトを作成していこうと思います。
Vue.jsのフレームワークであるNuxt.jsを使用する理由は
学習コストが低い点やSSGで作成が出来るなどから、今の状況に適していると考えたからです。
クラウドはNetlifyを使用する予定をしています。
FireBaseとvue.jsを使った記事も多かったのですが、
下記サイトを参考にした所Netlifyの方がいいという結論に至りました。
手探り状態で、やることになりますが
やらせて頂けることに感謝しつつ、取り組んで参ります。