Remix と Cloudflare Workers で Craft CMS のデータを表示する
Craft CMS の記事データを Remix と Cloudflare Workers で表示するのを試してみる。
https://remix-cloudflare-worke...
hono も使ってみようかと思ったのだけど、とりあえず Remix の公式サイトにある感じですすめた。
hono/README.ja.md at master · honojs/hono
https://github.com/honojs/hono...
ドキュメント見る限りはかなり便利そうなので使ってみたい。
今回は Remix 自体の路線がなんか気になったので。
ちゃんと React とか理解できていれば hono でいいような気はしつつ。。
GraphQLのデータを fetch で取得する所とかはこの辺を参考にしつつ。
Working With Remix, GraphQL, and StepZen | StepZen blog
https://stepzen.com/blog/worki...
TypeScript も JS も全然わかってない。。。
こんな感じでデータとって
import { useLoaderData,Link } from '@remix-run/react' import { json } from "@remix-run/cloudflare"; export const loader = async ({request}) => { let res = await fetch(`https://example.com/hogehogeapi`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'hogehoge', }, body: JSON.stringify({ query: ` query { entries(limit:10){ title id url uri slug postDate @formatDateTime(format: "Y-m-d") } }`, // variables: { // query: search, // }, }), }) return res.json() }
こんな感じで一覧表示する
export default function Index() { const { data } = useLoaderData(); return ( <div className="container mx-auto"> <header> <h1 className="text-3xl"><Link to="/">mersy note</Link></h1> </header> <main> {data ? ( <div className="prose lg:prose-xl"> {data.entries.map((entry) => ( <ul key={entry.id}> <li className="inline-grid"> <time className="">{entry.postDate}</time> <Link to={`/article/${entry.slug}`} prefetch="intent"> {entry.title} </Link> </li> </ul> ))} </div> ) : <h4>No Results</h4>} </main> </div> ); }
Cloudflare Workers の script サイズ制限が気になるところ。
できるだけ不要な物は読み込まない方がいいんだろうな。
細かい最適化とかは色々と自分でやらないといけない。
Next.js とかだとよしなにやってくれるんだろうけど。
Next.js & Vercel とか環境が依存してしまうところがなんか気になってしまう。
まぁ、今回のは Cloudflare Workers に依存してるわけだからそれもそれで何だかなぁと思わなくもない。
これらのエントリを何度も拝見して勉強させてもらった
- RemixをCloudflare Workersで動かす & KVでデータをキャッシュする
https://zenn.dev/catnose99/art... - Cloudflare WorkersでちゃんとしたWebを作る - ゆーすけべー日記
https://yusukebe.com/posts/202... - Qiita ユーザーページの RSS に件数制限がついたので、API から RSS に変換する Cloudflare Workers を作った - Qiita
https://qiita.com/su8ru/items/... - Hono[炎] Ultrafast web framework for Cloudflare Workers.
https://yusukebe.github.io/sli... - yusukebe/iekei: 家系ラーメン食べたい!
https://github.com/yusukebe/ie...
感謝感謝。
ライブプレビュー
ライブプレビューも作らないとだなぁ。。。。
Setting Up Live Preview with Craft CMS in Headless Mode | Blog | Trevor Davis | Senior Software Engineer @ Dutchie
https://www.trevor-davis.com/b...
詳細ページ周りの作りをごにょごにょする感じなんだと思うが。
なんかこの作業が毎回無駄に感じてしまってなかなか Twig ベースから抜けられない。
Twig ベースでもCDNに乗せてしまえば要件を満たせる場合もあるのでは?と思わなくもない。
まぁ、大きくなったjs周りとかを直していこうと思うと jsベースのフレームワークで作り直して行くことになるだろうし。
触ってみて思ったけど、サイト側の表示がどういう仕組みであれ、CDN (サービス)側でこういうことがやれるのは色々と便利そう。
Cloudflare Workers + KV で301リダイレクトをサーバレスに実装してみる | DevelopersIO
https://dev.classmethod.jp/art...
引き続き、データの更新とか、諸々試してみる。
関連記事
- 2023/1/5 ブログを Twig のテンプレートベースと Blitz プラグインの構成に戻した
- 2022/5/6 Remix と Cloudflare Workers で Craft CMS の詳細ページを表示する #craftcms
- 2022/5/9 Remix と Cloudflare Workers で Craft CMS の検索ページを作成する
- 2022/5/7 Remix と Cloudflare Workers で RSS を作成する
- 2022/5/30 remix-service-bindings で Cloudflare Workers のファイルサイズ制限の対策をしてみる
- 2022/5/11 Craft CMS の Live Preview で Remix / Cloudflare Workers のページを使う #craftcms
- 2022/5/31 このサイトを Cloudflare Workers 経由に変えてみた
- 2022/12/22 Craft CMS でのブログは Twig テンプレートに Blitz プラグインでよさそう
- 2022/5/27 Craft CMS のプレビューターゲットで Cloudflare Workers KV のデータを削除する
- 2022/5/10 Craft CMS のデータを GraphQL で取得して Cloudflare Workers KV に保存・取得する