Nuxt.js + microCMS + Netlifyでブログを作ったときの知識の整理です。
構成
MicroCMSで投稿した記事をNuxt.jsで取得、Nuxt.jsの機能のひとつであるSSG(Static Site Generators)を使用して静的なHTMLとして書き出し、Netlifyで配信します。
いわゆるJamstack(JavaScript/APIs/Markup)の構成です。
https://jamstack.org/
WordPressに代表されるこれまでのCMSではコンテンツの管理、表示を同じサーバーで行っていました。オールインワンな構成はとても便利で、2021年4月現在で全Webサイトの41%はWordPressが使用されています。https://w3techs.com/technologies/overview/content_management
ただし、WordPressのデメリットとして「セキュリティ」「パフォーマンス」「メンテナンス性」がよく挙げられます。
これらを解決する手段としてJamstackが人気が出てきました。
セキュリティ
JamstackではWordPressとは異なり複数のSaaｓを組み合わせて構成されます。コンテンツ管理はSass(今回はContetful)が担い、APIでコンテンツを配信するのでセキュリティ上対策すべき項目が限定されます。サーバーも別のSaas(今回はNetlify)が担当するのでセキュリティを担保するためのサーバー管理コストがぐっと軽減されます。開発者としては出力部分のみに注力して開発を行うことができます。
パフォーマンス
Jamstackではビルド時にデータを取得し、静的なHTMLとして出力します。閲覧者には静的なHTMLを返すだけなのでWordPressのようなDBにアクセスする構成と比べ、高速になります。
メンテナンス性
サーバーやライブラリ・DBの管理はSassが担うので、開発者は出力部分（フロントエンド）にのみ注力できます。また、記事をMarkDown形式で書いているので、今後他の構成を採用することになったとしても比較的楽に移行できます。フロントエンドは技術の移り変わりが速いので、この「移行のしやすさ」はかなり重要です。
人視点で見てみると、以下のようなメリットになります。
- Webサイト閲覧者にとっては「表示が高速」になり閲覧体験が向上する
- 開発者にとっては「開発・管理コストが軽減」する
- コンテンツ投稿者にとっては「セキュリティが担保された環境で記事執筆に集中」できる
Nuxt.js(Composition API, TypeScript)
microCMS
microCMSはCMS（Content Management System）の1つで、Headless CMSという分類になります。
Headless CMSはWordPressのようなコンテンツと出力画面をオールインワンで提供するCMSとは違い、コンテンツの管理とAPIを提供します。
今回はmicroCMSブログで使用されているブログがオープンソース化されていたので、そのまま利用させていただいてます。
Netlify
https://www.netlify.com/
Netlifyは静的コンテンツのホスティングサービスで、Githubと連携して、git pushすると自動でビルド&デプロイを行ってくれます。
今後やりたいこと
Composition API + TypeScriptに書き換え
Vue.js 3.0から導入されたComposition APIをNuxt用に拡張されたものを使用します。
Cpomposition APIの特徴
- TypeScriptのサポート
- コンポーネントのロジックの共通化がしやすくなる
Nuxt.js 2.15.3
@nuxtjs/composition-api 0.23.3
@nuxt/typescript-build 2.1.0