Open32

Remix.runドキュメントの読む順番

cpacpa

tutorialは読んだ。次は?

先頭のコメントに読むべき順(独断と偏見で)を書いていく。

まずはdiscussion

(コードを書く上でのポイントは以下だと思われるが、全部読むだけ読んだ方が良いとは思う)

  1. introduction

  2. Route Configuration

関連
Route File Naming

  1. Fullstack dataflow

    関連
    State management

  2. Form vs. fetcher

  3. Hot Module Replacement

Guides

気になったものをピックアップする。

https://remix.run/docs/en/main/guides/api-routes

https://remix.run/docs/en/main/guides/bff

APIは使わないの?という疑問を解消できた。
browserでAPIを叩くのではなくサーバーサイドで出来るのはメリットのよう。

cpacpa
cpacpa

この部分で色々理解できた。
Outletの中にNested Routesのコンポーネントが入ってくるわけですね

Note you typically want to add an index route when you add nested routes so that something renders inside the parent's outlet when users visit the parent URL directly.

For example, if the URL is /concerts/salt-lake-city then the UI hierarchy will look like this:

<Root>
  <Concerts>
    <City />
  </Concerts>
</Root>
cpacpa

この部分が意味わからん。使うことあるの?

Note that /concerts/mine does not nest with app/routes/concerts.tsx anymore, but app/root.tsx. The trailing_ underscore creates a path segment, but it does not create layout nesting.

Think of the trailing_ underscore as the long bit at the end of your parent's signature, writing you out of the will, removing the segment that follows from the layout nesting

cpacpa

フォルダとファイル名の違いわかんなかったけど理解した。

https://remix.run/docs/en/main/file-conventions/routes#folders-for-organization

Note that when you turn a route module into a folder, the route module becomes folder/route.tsx, all other modules in the folder will not become routes. For example:

these are the same route:

app/routes/app.tsx
app/routes/app/route.tsx

as are these

app/routes/app._index.tsx
app/routes/app._index/route.tsx

cpacpa

Im in. lets goで飛ばされる先から読んでくけどしんどそう。Discussion Topicをサマリーして行こうかな

https://remix.run/docs/en/main/discussion/runtimes#runtimes-adapters-templates-and-deployment

cpacpa

なるほど

https://remix.run/docs/en/main/discussion/server-vs-client

The following route exports and the dependencies used within them are removed from the client build:

action
headers
loader

cpacpa

サーバーとクライアントの分けで、基本はサーバーに寄せる方針、stateがある場合はクライアントということだと思うけど、このページを見たからと言って、どうすべきかは分かんないかも。

cpacpa

https://remix.run/docs/en/main/discussion/resubmissions#the-browsers-default-behavior

これめっちゃすごくない?
Redirecting from actions

A common practice to avoid this issue is to issue a redirect after the POST request. This removes the POST action from the browser's history. The history stack would then look like this:

GET /buy > POST /checkout, Redirect > GET /order/123
With this approach, clicking the back button would not resubmit the form:

GET /buy - *GET /order/123

cpacpa

https://remix.run/docs/en/main/guides/breadcrumbs

Remix provides access to all route matches and related data at the top of the React element tree. This enables components like <Meta />, <Links />, and <Scripts /> to obtain values from nested routes and render them at the top of the document.

https://remix.run/docs/en/main/hooks/use-matches

useMatches

Returns the current route matches on the page. This is useful for creating layout abstractions with your current routes

https://remix.run/docs/en/main/route/handle

handle

Exporting a handle allows you to create application conventions with the useMatches hook. You can put whatever values you want on it:

cpacpa

https://remix.run/docs/en/main/guides/constraints

ビルドした時にサーバーのみのコードにするが、「副作用」がある場合は不可

cpacpa

必読。

サーバーで実行する副作用はloaderに集める。

ブラウザで実行する場合
documentがあるかでガードする

browser実行はuseEffectで囲む
localstorageへのアクセスとか

cpacpa

https://remix.run/docs/en/main/guides/data-loading#databases

Prismaへの接続。こんなに簡単なのかと感動。

cpacpa

他、URLとの同期とか、非常によかった。
データを取ってくる時に意識することが減るとやりやすそう。
でもクライアントの状態管理不要、というのがどうなのかなと。
デフォルトのフォームで高度にクライアントの状態をグリグリ動かすイメージが沸いてないんだよな。