静的サイトジェネレーターの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の外部からアクセスを禁止しているとビルド中にエラーになるとのことです。
WordPressの記事で静的サイトを作る
gatsby-config.js
module.exports = { /// ここにいろんな記述 plugins: [ // 追記 { resolve: `gatsby-source-wordpress`, options: { // WordPressのurlを書く baseUrl: `tech.frenps.jp`, protocol: `https`, hostingWPCOM: false, useACF: false } }, ], }
configファイルはこれでok
次にgatsby-node.js
const _ = require('underscore') const path = require('path') const PageTemplate = path.resolve("./src/templates/Page.js") exports.createPages = ({ graphql, actions }) => { const { createPage } = actions return graphql(`query loadPagesQuery ($limit: Int!) { allWordpressPost(limit: $limit) { edges { node { id slug title content excerpt date modified } } } }`, { limit: 300 }).then(result => { if(result.errors){ throw result.errors } _.each(result.data.allWordpressPost.edges, edge=>{ createPage({ path: edge.node.id, component: PageTemplate, context: { id: edge.node.id, slug: edge.node.slug, title: edge.node.title, content: edge.node.content }, }) }) }) }
/src/templates/Page.jsこれはテンプレートです。
ここで作ったテンプレートにWordpressの記事データを埋め込んでhtmlを作ります。
contextで宣言したものはtemplateで呼び出すことができます。
これがtemplate
import React from "react" import Layout from "../components/layout" const PageTemplate = ({ pageContext: { title, content }}) => ( <Layout> <h1>{title}</h1> </Layout> ) export default PageTemplate
gatsby developで確認すると無事表示できています。
まとめ
と、こんな感じでした。
Gatsbyjsはクライアントでレンダリングされます。
サーバーサイドレンダリングでないとindexされないという可能性もあるので実運用する場合は、SSR対応する必要がありそうです。
フロントエンド開発でお困りのことはありませんか?
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。