静的サイトジェネレーターの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対応する必要がありそうです。