はじめに
Qiita/RSSシリーズです。前回までの記事を振り返ります。
記事①では…。
「Qiita/RSS」を題材にPHPでXMLの解析を行いました。
記事②では…。
「Qiita/RSS」を題材にDrupalでAPI化をしてみました。
今回は…。
タイトルでも紹介している通り、Next.js で Drupal で準備した API に Fetch してみます！！（お前フロント行けるんかい 😥）
行けないです。ストリート実装です。
夏休みの自由研究程度で見てください。
一応…。完成イメージ。
umekikazuya.vercel.app
さっそくですが、実装の紹介をします。
Next.js ですが、AppRouter で実装しました。話題の TurboPack とやらも試してみました。
Fetch実装
async function fetchData() {
const response = await fetch(ENDPOINT);
if (!response.ok) {
throw new Error("Failed to fetch data");
}
const data = await response.json();
return data;
}
// 本記事では例外処理割愛.
Component実装
export function feed() {
const data: FeedType = await fetchData();
return (
<>
<ul>
{feed.data.map((item, index) => (
<ListItem
key={index}
title={item.title}
link={item.link}
published={item.published}
/>
))}
</ul>
</>
);
}
function ListItem({ title, link, published }: FeedElement) {
return (
<li className={style.li}>
<a className={style.li_inner} href={link} target="_blank" rel="noreferrer">
<span className={style.li_inner__title}>{title}</span>
<time dateTime={published} className={style.li_inner__time}>
{new Date(published).toLocaleDateString("ja-JP")}
</time>
</a>
</li>
);
}
// `new Date()`や、fetch時の例外処理は本記事では割愛.
詰まったポイントを共有します。
環境変数の扱い方
「サーバーサイドコンポーネント」と「クライアントサイドコンポーネント」で、環境変数の扱い方が異なるようです。
ちょっとハマりました。
変数をブラウザに公開するには、変数の前に
NEXT_PUBLIC_を付ける必要があります。
クライアントサイドで使用したい時は prefix が必要なんですね。
データのキャッシュが永続的？？
Fetch側は設定なしの場合都度通信してくれるのかと思ったらそうでもないよう。
明示的に設定する必要があるようです。
- Time-based revalidation：時間駆動
- On-demand revalidation：イベント駆動
fetch('https://...', { next: { revalidate: 3600 } })
今回は、時間駆動で設定しましたが記事投稿時に何かしらのイベントを拾うように組み込むのもおもしろいかも。
まとめ
Backend の API（Drupal）側でキャッシュ機構はしっかり組み込んだので、Frontend側の細かいキャッシュのチューニングについては本記事内では省きました。
Next.jsのDataFetchには標準でCache機構が搭載されているようですので、調査/検討してみようと思います。
Drupalだったら簡単に Headless できるんでぜひ試してみてくださいね。（本記事の内容は、データ自体の出力をしてないからHeadlessではないけど）
もちろん、Drupal内のData(Entity)に外部からアクセスすることも可能です。
実は、まだこのシリーズ終わりません。（え〜！！？）
せっかく準備したAPIです。活かさないともったいないですよね。
Slack通知編いきましょう。（え〜！！？）