remix SPAをいじる

RemixのSPAモードを試していたら普段の(SSR)とは使い勝手が異なったためログを残します．

loderでAPIを叩き，取得したデータを表示しようとしたらエラーが発生した．

[plugin:remix-route-exports]
SPA Mode: 1 invalid route export(s) in `routes/_index.tsx`:
`loader`. See https://remix.run/guides/spa-mode for more information.

SPAモードでは，データの取得・更新をすべてクライアントサイドで行う必要がある．
loader(あとaction)関数は，exportすることでサーバーサイドでデータを取得し，コンポーネントにてuseLoaderData hookを使ってそのデータを取得できる．

SPAモードでは，サーバーランタイムを使わないためloader関数をexportしていると上記のような例外が発生する．

https://azukiazusa.dev/blog/remix-spa-mode/

SPAモードで，loader関数に当たるもの，それはclientLoader(見た時そのままやんけと思った).

SPAモードでは，loader関数の代わりにclientLoader関数をexportする．

例

// app/routes/index.tsx
export async function clientLoader() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await response.json();
  return data;
}

clientLoaderにてAPIを叩くように変更した．
→ process is not definedとエラーが発生し，データ取得がうまくいかなくなった．

【原因】環境変数にあるAPI KEYを読めてないこと

【解決策】公式に書いてあった．
https://ja.vite.dev/guide/env-and-mode.html

初めてVite触ったから知らなかったが，Viteで環境変数を使うには下記が必要らしい

• 接頭辞にVITE_をつける必要がある
• 呼び出しはimport.meta.env.VITE_hoge

APIを叩いてデータ取得 & 表示ができた