【Remix】Remix vs Next.js の記事

Remixの開発者が書いたRemixとNext.jsの違いについてのブログを読んだ

remix.run

比較対象がNext.jsのSSGとの比較なのでSSRと比較したらまた違うんじゃ？という感想もあるが参考になった

たとえば検索ページにおいてはNext.jsのSSGはそのほとんどが事前に生成しておけないので、クライアントサイドのフェッチになるが、それよりもCDNと組み合わせたRemixのSWRの方が速いという主張

なので、RemixはNext.jsと同じくらい高速くらいに捉えておいた方がよいかも

とはいえ、Next.js側には公開前に共有しているということでライバルとして切磋琢磨していきたい間柄みたい

アーキテクチャの相違点としてはNext.jsは以下の4つのものがあるけど、Remixは１つだけだから選択が楽とのこと

1. getInitialProps
2. getServerSideProps
3. getStaticProps
4. クライアントフェッチ

他に大きく違うところとしてData Mutationsがあるのを知った

Next.jsの場合は次のようにクリックイベントに関数を仕込んで、この関数ないでいろいろ処理を書くが、

<button onClick={itsAllUpToYou}>

Remixの場合は通常のHTMLのようにformを拡張したFormタグにaction名を書いておき

<Form method="post" action="/add-to-cart">
  <input type="hidden" name="productId" value="123" />
  <button>Add to Cart</button>
</form>

そのactionに対する関数をつくるといった書き方になる

export async function action(request) {
  let formData = await request.formData();
  return addToCart(formData);
}

Remixのこの記事によってとりあえずRemixの速度面では申し分なさそうということがわかった