Remix.runドキュメントの読む順番
tutorialは読んだ。次は?
先頭のコメントに読むべき順(独断と偏見で)を書いていく。
まずはdiscussion
(コードを書く上でのポイントは以下だと思われるが、全部読むだけ読んだ方が良いとは思う)
Guides
気になったものをピックアップする。
APIは使わないの?という疑問を解消できた。
browserでAPIを叩くのではなくサーバーサイドで出来るのはメリットのよう。
fileの作り方=routeわからない。
こっちが先の方がいいかも
この部分で色々理解できた。
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>
この部分が意味わからん。使うことあるの?
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
なるほど
Think of the _leading underscore as a blanket you're pulling over the filename, hiding the filename from the URL.
フォルダとファイル名の違いわかんなかったけど理解した。
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
Im in. lets goで飛ばされる先から読んでくけどしんどそう。Discussion Topicをサマリーして行こうかな
なるほど
The following route exports and the dependencies used within them are removed from the client build:
action
headers
loader
サーバーとクライアントの分けで、基本はサーバーに寄せる方針、stateがある場合はクライアントということだと思うけど、このページを見たからと言って、どうすべきかは分かんないかも。
react router使ってるよと。
大した情報はない
Remixの思想、優れている部分の説明。
コード書く上ではあまり重要ではない、読み物系な感じ。
楽観的UIと呼んでいるRemixの思想、特にUI設計のメリットを説明している。
個人的には新しい内容はなかったけど、チュートリアルの内容を復習するのに良さそう。
ここは読むべき!
クライアントではなくサーバーに寄せるべき、という話が書いてある。
Remixがよしなにやってくれることが書いてあり、コード書く上では重要じゃないかも
提供してるAPIの整理。
コード書く上で大事なやつ
なるほど
If you want to reuse values across routes, stick them in their own non-route module:
export const myValue = "some value";
読まないとエラーにハマりそう。
名前付きエクスポートがよいとか
これめっちゃすごくない?
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
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.
useMatches
Returns the current route matches on the page. This is useful for creating layout abstractions with your current routes
handle
Exporting a handle allows you to create application conventions with the useMatches hook. You can put whatever values you want on it:
ビルドした時にサーバーのみのコードにするが、「副作用」がある場合は不可
必読。
サーバーで実行する副作用はloaderに集める。
ブラウザで実行する場合
documentがあるかでガードする
browser実行はuseEffectで囲む
localstorageへのアクセスとか
Prismaへの接続。こんなに簡単なのかと感動。
他、URLとの同期とか、非常によかった。
データを取ってくる時に意識することが減るとやりやすそう。
でもクライアントの状態管理不要、というのがどうなのかなと。
デフォルトのフォームで高度にクライアントの状態をグリグリ動かすイメージが沸いてないんだよな。
JSONで階層化できないのは辛いけど、ちまちま更新できるテーブル設計をすれば良いだけで、疎結合な感じにできて良さそうな気もする