Remixについて調べてみた #React

数ヶ月前に「Remixはいい」という話を聞いたことがきっかけでRemixについて調べてみました。備忘録的にまとめておきます。一部推測なども含みます。

Reactの概要

まずRemixとはどんな技術なのか調べてみました。

RemixはReactベースのフルスタックフレームワークらしいです。
Next.jsと似ているようで、公式ブログの「Remix vs Next.js」をはじめ両者を比較している記事がいくつか見つかりました。
https://remix.run/blog/remix-vs-next

また、下記のようなことが書かれていたり、色々な記事で「DX(開発者体験)」・「UX」などの単語を目にするので、これはRemixの1つの特徴なのかなと思いました。

Use JavaScript to augment the user experience by emulating browser behavior.
https://remix.run/docs/en/v1/pages/philosophy

Remixの特徴

まずは公式ドキュメントなどを読んでNext.jsと比較しながら特徴を調べてみました。

Remixは静的コンテンツの場合、Next.jsと同じかどうか、それ以上に高速・動的コンテンツの場合、Next.jsより高速
下記ブログにはNext.jsと表示速度を比較したgifが添付されてました。
https://remix.run/blog/remix-vs-next
RemixはSSGが利用できない
Next.jsと異なり、RemixはSSGが利用できないようです。現在は動的コンテンツを持ったwebサイトが増えており、SSGが配布できるwebサイトは少ないという考えのもとSSGが利用できないような気がします。
また、Remixではエッジで分散サーバー・データベースを扱うことやhttp cache controlヘッダーを利用することによりSSGに匹敵する速さを実現しているようです。
データミューテーションの違い
Next.jsでPost処理をする場合、next apiでエンドポイントを作成・利用するのが一般的です。
しかし、Remixの場合はサーバー上でのみ実行されるaction関数を使用してページコンポーネントと同じ箇所にロジックを集約することができます。
https://remix.run/blog/remix-vs-next#data-mutations

RemixがShopifyによって買収される

2022年10月31日にShopifyがRemixを買収したと声明が発表されました。
どのような影響・変更がありそうか調べてみました。

Remixの声明の一部を読むと「Remixは長期的な支援とサポートを受けて、より速く成長していく」ようです。

Remix receives long-term backing and support from an established leader in commerce. This move allows us to grow faster and sharpen our focus on performance and scalability.
https://remix.run/blog/remixing-shopify

Shopifyの声明の一部を読むと、ShopifyのRemixチームにより、Hydrogen※1が改善されることによって、Hydrogenでwebサイトを構築する開発者も、merchantsも改善により、恩恵を受けられるそうです。

With the Remix team at Shopify, developers building on Shopify will benefit from new tools that they will love, and merchants will see custom storefronts that are faster than ever with an improved Hydrogen product.
https://shopify.engineering/remix-joins-shopify

また、Hydrogenに関して以下のような発表がありました。特に下記4点の機能に関して言及があり、買収による変化が出ていそうです。

The February ‘23 release of Hydrogen will bring significant advancements in developer experience and performance, and a suite of new tools specific to Shopify storefronts. Much of what’s unlocked is thanks to leveraging Remix (now a part of Shopify!) as a foundation to our stack.
https://hydrogen.shopify.dev/roadmap/

データ読み込み
詳しくは下記リンクを参照ください。filterを入れたり、下記のように必要なデータだけを返したりすることができるようになったようです。

// 一部抜粋
// You can also shape your data here prior to returning it to the route.
const formattedData = json({
  product: await productQuery,
});
return formattedData;

ルーティング
ファイルベースルーティングであることは同じようですが、より簡潔にわかりやすく記述できるように改善されているようです。
エラー処理
下記で説明されているNested Route error boundaryの機能が利用可能になったようです。
https://remix.run/docs/en/v1/guides/errors#nested-error-boundaries
ミューテーション
Optimistic UIがサポートされたようです。
https://remix.run/docs/en/v1/guides/optimistic-ui

最後に

今回Remixについて(途中でShopify, Hydrogenに脱線しましたが)調べてきました。
「ShopifyとRemixには、多くの共通の哲学とデザイン原則があり、開発者がユーザーを第一に考えられることが重要」という旨の記述がありました。
今後、両者がより良いものへ発展していくことを願っていきます。

※1 Hydrogenとはカスタムストアフロントの構築を簡素化するReactフレームワーク(https://www.shopify.com/jp/blog/unite-2021)