React静的サイトジェネレーターのGatsbyjsを触ってみました。Gatsybyjsのメリットデータベースにアクセスしないから早い。最大のメリットはこれ。動的システムだと、データベースから必要な情報を持ってきてHTMLを生成しそれを返します。そのため状況やクエリによってはDBのレスポンスが遅く、HTMLを生成するのが遅くなってしまうこともあります。静的サイトにしてしまえばDBへの問い合わせをする必要がなくなり、完成されたHTMLを返すだけで済み結果パフォーマンスが上がります。それと、テンプレートがReactで書かれているので動的なコンテンツを作れるということ。Gatsbyを触った感想お試しにこのWordpressを使っているこのブログの記事データを使ってみました。仕組みとしてはこんな感じ↓ビルドするとWordpressの記事データを取得してpage-dataフォルダに記事データが書かれたjsonが作成されます。ページにアクセスするとurlのslugに対応したindex.htmlが返され、Reactを実行。HTMLが生成される。だいたいの流れはこんな感じ。WordPressの連携はデータベース情報を渡す必要もなく、/wp-jsonからpage-data.jsonを作ってくれます。そのため、/wp-jsonの外部からアクセスを禁止しているとビルド中にエラーになるとのことです。})})})}/src/templates/Page.jsこれはテンプレートです。ここで作ったテンプレートにWordpressの記事データを埋め込んでhtmlを作ります。contextで宣言したものはtemplateで呼び出すことができます。developで確認すると無事表示できています。まとめと、こんな感じでした。Gatsbyjsはクライアントでレンダリングされます。サーバーサイドレンダリングでないとindexされないという可能性もあるので実運用する場合は、SSR対応する必要がありそうです。Tech運営会社お問い合わせ。