AstroJSで動的ルーティングをCSRで実現する方法

yosi2024/09/07 8:47

AstroJSで動的ルーティングをCSRで実現する方法を教えてください。
uidをURLから受け取り、uidを使ってデータをブラウザサイドでfetchするとします。

Answerer AIPowered by gpt-3.5-turbo

AstroJSでは、動的なルーティングをクライアントサイドで実現するために、以下の手順でCSR（クライアントサイドレンダリング）を行うことができます。

Astroプロジェクトのルートディレクトリにあるastro.config.jsファイルを開きます。
routes配列の中に、動的なルートを追加します。たとえば、uidをURLから受け取る場合、以下のような形式となります。

routes: [
  {
    path: '/user/:uid',
    component: '~/pages/user.astro',
  },
],

ルートに対応するAstroページ（user.astroなど）を作成します。このページで、uidを使ってデータをブラウザサイドでfetchする必要があります。
Astroページ内で、サーバーサイドで生成されたURLパラメーターを取得するために、以下の記法を使用します。

---
const { params } = astro;
---

fetchを使用して、uidを使ってデータを取得するコードを書きます。たとえば、以下のようになります。

const res = await fetch(`/api/user/${params.uid}`);
const data = await res.json();

取得したデータをAstroページ内で表示または処理するために、必要なコードを追加します。

以上で、AstroJSで動的ルーティングをCSRで実現する方法が完成します。

yosi2024/09/08 8:42

上記は参考にならない

クライアント側でデータをFetchするときはSSRモードにする必要がありそう。でなければ404になる。

こういうイメージ

---
import Layout from "@/layouts/Layout.astro"
import { Show } from "./_Show/Show"
import { Header } from "@/components/Header/Header"

const { uid } = Astro.params
if (!uid) return Astro.redirect("/404")
---

<Layout title="" client:load>
  <Header client:load />

  <Show client:load uid={uid} />
</Layout>

yosi2024/09/08 8:44

ここまでするならSSR時にデータをFetchすればいいのだが、FirebaseのようにNode依存でCloudflare Workersで使えないなどのシチュエーションもある。

タイトルの設定はできないからクライアント側でDomを直接書き換える

コメントするにはログインが必要です

yosi