Eleventy で SSG

Eleventy で SSG Wataru Taguchi

アジェンダ - 自己紹介 - Frontend Conference Fukuoka - SSR と
SSG - Eleventy - Eleventy - webpack - Eleventy - generate from data - 感想

# Wataru Taguchi - GameWith Engineer - PWA, Web Components
- twitter@tiwu_dev - FF14 - ストV - Kyoto Animation 自己紹介

Frontend Conference Fukuoka

SSR と SSG - Server Side Rendering - リクエストが来るたびにHTMLを生成する -
e.g. Laravel, Express, WordPress ... - Static Site Generator - 予めデータを取得しHTMLを生成しておく - リクエストが来ると、生成済みのHTMLを返す - e.g. Gatsby, Next.js, Nuxt.js, Eleventy, Hugo ...

- シンプル - 色々なテンプレートエンジンが使える - *.html, *.md, *.liquid, *.njk, *.hbs,
*.mustache *.ejs, *.haml, *.pug - 好きなクライアントサイドの JavaScript が使える - e.g. Vue.js, React.js, jQuery ... - データによる生成 - web.dev が利用している Eleventy

Example - generate

Example - generated HTML File

webpack が生成したハッシュ付き JS を読み込む下記2つを利用して自作する必要がある - webpack-manifest-plugin - Eleventy Shortcodes
Eleventy - webpack

Eleventy - manifest.json

Eleventy - .eleventy.js

Eleventy - default.njk

Eleventy - generated HTML File

データを元にHTMLを生成 Eleventy の下記2つの機能を利用する - Eleventy pagination - Eleventy permalink Eleventy
- generate from data

Eleventy - Data

Eleventy - show.njk

Eleventy - default.njk

Eleventy - ja/frame/ryu.html

キャラクター分HTMLが生成される Eleventy - generated

- Eleventy でキャラ40体分の個別ページをSSRからSSGに変更してみたが基本簡単だった - クライアントサイドのレンダリングは別のフレームワークなどに任せられるので良い - Eleventy で
<head> 内の情報のみレンダリングさせている - <body> 内は web components にレンダリングを任せている感想

ご清聴ありがとうございました

Eleventy で SSG

Eleventy で SSG

tiwu

More Decks by tiwu

Other Decks in Technology

Featured

Transcript

Eleventy で SSG Wataru Taguchi

アジェンダ - 自己紹介 - Frontend Conference Fukuoka - SSR と

# Wataru Taguchi - GameWith Engineer - PWA, Web Components

Frontend Conference Fukuoka

SSR と SSG - Server Side Rendering - リクエストが来るたびにHTMLを生成する -

- シンプル - 色々なテンプレートエンジンが使える - .html, .md, .liquid, .njk, *.hbs,

Example - generate

Example - generated HTML File

webpack が生成したハッシュ付き JS を読み込む下記2つを利用して自作する必要がある - webpack-manifest-plugin - Eleventy Shortcodes

Eleventy - manifest.json

Eleventy - .eleventy.js

Eleventy - default.njk

Eleventy - generated HTML File

データを元にHTMLを生成 Eleventy の下記2つの機能を利用する - Eleventy pagination - Eleventy permalink Eleventy

Eleventy - Data

Eleventy - show.njk

Eleventy - default.njk

Eleventy - ja/frame/ryu.html

キャラクター分HTMLが生成される Eleventy - generated

- Eleventy でキャラ40体分の個別ページをSSRからSSGに変更してみたが基本簡単だった - クライアントサイドのレンダリングは別のフレームワークなどに任せられるので良い - Eleventy で

ご清聴ありがとうございました