🔃

About Routing in Remix v2.

2023/06/07に公開

React

Remix

routing

tech

こんにちは。Enabling team の山本です。

2023年6月1回目は、Remix の Flat Routes についてです。

Remix については、以前から注目していました。

特に、サーバーサイド JavaScript を用いずに構築できる点に魅力を感じます。学習コストの面で 👍

そして、昨年、Shopify に買収されたことにより、Remix は、しっかりした企業による力強い support を得られる状況になりました 💪

今回話をする Routing について、v2 では、Flat Routes を用います。

Routing is possibly the most important concept to understand in Remix. Everything starts with your routes: the compiler, the initial request, and almost every user interaction afterward.

Remix の「最も重要な概念」である Routing について、学びます。

TL;DR

階層を分ける必要がありません。

Routing の違い

v1

.
├── app
│   ├── entry.client.jsx
│   ├── entry.server.jsx
│   ├── root.jsx
│   ├── routes
│   │   ├── top20          # ここ
│   │   │   ├── index.jsx  # => top20._index.jsx
│   │   │   └── $id.jsx    # => top20.$id.jsx
│   │   ├── _index.jsx
│   │   └── top20.jsx
│   ├── style
│   │   ├── article.css
│   │   └── top20.css
│   └── utils
│       └── hackerNews.server.js
├── .eslintrc.js
├── .gitignore
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── remix.config.js
└── tsconfig.json

v2

このように書き換えることができます。

.
├── app
│   ├── entry.client.jsx
│   ├── entry.server.jsx
│   ├── root.jsx
│   ├── routes
│   │   ├── _index.jsx
│   │   ├── top20.$id.jsx     # <= top20/$id.jsx
│   │   ├── top20._index.jsx  # <= top20/index.jsx
│   │   └── top20.jsx
│   ├── style
│   │   ├── article.css
│   │   └── top20.css
│   └── utils
│       └── hackerNews.server.js
├── .eslintrc.js
├── .gitignore
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── remix.config.js
└── tsconfig.json

Summary

Remix の Flat Routes について、書きました。
こういう変化を見ていると技術選択の重要さを感じます。
数ヶ月前の code が使えなくなる可能性もある。
開発言語や Framework の選択を広げれば、いろいろなことができる一方、それをどうやって管理・開発していくのか。
職業として Engineer をやる以上、deploy してからが本当の始まりです。

TL;DR

Routing の違い

v1

v2

Summary

Discussion