メインコンテンツまでスキップ

SSG技術

SSG(Static Site Generation:静的サイト生成)は、現代のウェブサイトの安全性を最強格に引き上げる方法の一つです。

SSGとは?

カレッジのLPはReactとNext.jsでできていますが、このままではブラウザが読み込める形式になっていないため、ビルドを行う必要があります。

ビルドとは?

ビルド(Build) とは、Reactで書いてあるコードをブラウザが読める形式(HTML、CSS、JS)に変換することをいいます。

このビルドを行ったサイトは、サーバーにファイルを置いて設定をすれば普通のウェブサイトとして公開できます。

WordPressとの併用

WordPressには静的ファイルをサーブ(公開)する機能がありますが、.htaccessの設定が複雑になっていることなどが理由で非常に相性が悪く、設置が困難です。

向き・不向き

実現したい内容やプログラムの内容にもよりますが、ReactとNext.jsで作成したサイトはSSGを行うことができます。SSGに向いているサイトは、例えば

  • ブログやLPなど、頻繁に更新しないもの
  • 読み込み速度を優先したいサイト

があります。逆に、SSGができないサイトは

  • 会員制サイト(ログイン処理がいるなど)
  • リアルタイム性がいるサイト

などです。ただし、SSGができないタイプのサイトでも、可能な範囲でSSGを行い、やむを得ないページはSSR(サーバーサイドレンダリング)を行うのが一般的です。Next.jsでは、この2つを併用できます。

SSGの安全性

SSGで生成したサイトは、PHPのコードを含まず、データベースとも接続せず、ヘッドレスCMSを使用した場合でもCMSのリクエスト先URLを保持しないようになっています。そのため、

  • SQLインジェクションやPHPの脆弱性を狙った攻撃がそもそも不可能
  • 導入したパッケージに脆弱性があったとしても、それを攻撃する手段が存在しない
  • あらかじめ生成済みの静的ファイルを返すため、DDoSに強い

ということになり、WordPressのサイトと比べて圧倒的とも言える安全性を誇ります。