Zenn
👉

Deploy a Remix App to Cloudflare.

2023/08/14に公開
React
Cloudflare
Svelte
SvelteKit
Remix
tech

この抜粋の内容は次のとおりです。

  • 環境構築
  • Project 構成
  • Framework 間の比較
  • Summary

さらに詳しく見たい方は読み続けてください。

2023年8月3回目です。

世間はお盆ですが、我が家は、早めに休みと旅行を済ませたため、平常運転です。🐬🏝️

お盆に何をやるかというと、それは、Remix と Svelte の比較です。

  • 門外漢の Software Engineer（Site Reliability）が❓
  • なぜ、お盆に❓❓
    という疑問は置いておいて、比べてみます。

コードはこちらです。どちらも Cloudflare Pages に deploy しました。

  • Remix 版

https://my-portfolio-remix.pages.dev/

https://github.com/danny-yamamoto/my-portfolio-remix

  • Svelte 版

https://my-portfolio-1bp.pages.dev/

https://github.com/danny-yamamoto/my-portfolio

環境構築

npx create-remix@latest
yamamoto_daisuke@cloudshell:~/remix (sanbox-334000)$ npx create-remix@latest
? Where would you like to create your app? my-portfolio-remix
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix App Server if you're unsure; it's easy to change deployment targets. Cloudflare Pages
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? No
⠋ Creating your app…⠋ Converting template to JavaScript… warn  The `serverNodeBuiltinsPolyfill` config default option will be changing in v2
┃ Server polyfills will no longer be provided by default for non-Node.js platforms.
┃ You can prepare for this change by specifying server polyfills, or opting out entirely.
┃ -> https://remix.run/docs/en/v1.19.0/pages/v2#servernodebuiltinspolyfill
┗
 warn  The `devServerBroadcastDelay` config option will be removed in v2
┃ Enable `v2_dev` to eliminate the race conditions that necessitated this option.
┃ -> https://remix.run/docs/en/v1.19.3/pages/v2#devserverbroadcastdelay
┗
💿 That's it! `cd` into "/home/yamamoto_daisuke/remix/my-portfolio-remix" and check the README for development and deploy instructions!
yamamoto_daisuke@cloudshell:~/remix (sanbox-334000)$ cd my-portfolio-remix/
yamamoto_daisuke@cloudshell:~/remix/my-portfolio-remix (sanbox-334000)$ git init
yamamoto_daisuke@cloudshell:~/remix/my-portfolio-remix (sanbox-334000)$ git add .
yamamoto_daisuke@cloudshell:~/remix/my-portfolio-remix (sanbox-334000)$ git commit -m "first commit"
yamamoto_daisuke@cloudshell:~/remix/my-portfolio-remix (sanbox-334000)$ git branch -M main
yamamoto_daisuke@cloudshell:~/remix/my-portfolio-remix (sanbox-334000)$ git remote add origin https://github.com/danny-yamamoto/my-portfolio-remix.git
yamamoto_daisuke@cloudshell:~/remix/my-portfolio-remix (sanbox-334000)$ git push -u origin main

Project 構成

Project Structure
.
├── app
│   ├── entry.client.jsx
│   ├── entry.server.jsx
│   ├── root.jsx
│   ├── routes
│   │   └── _index.jsx               # Edit
│   ├── style                        # Add
│   │   └── index.css                # Add
│   └── utils                        # Add
│       ├── articles.server.js       # Add
│       ├── certificates.server.js   # Add
│       └── experience.server.js     # Add
├── functions
│   ├── metafile.css.json
│   ├── metafile.js.json
│   ├── metafile.server.json
│   ├── [[path]].js
│   └── [[path]].js.map
├── package.json
├── package-lock.json
├── README.md
├── remix.config.js
├── server.ts
└── tsconfig.json

Framework 間の比較

  • Chrome の Largest Contentful Paint (LCP)は、Svelte の方が優秀でした。
    • Remix: 0.85s
    • Svelte: 0.28s
  • 簡潔に書けるという点で Svelte の方が良いと思いました。
  • Remix は、当然ながら React への理解度が重要になると思います。
  • ２つのサイトで実現していることは、同じです。
  • Code を比較します。

Style

  • Remix

https://github.com/danny-yamamoto/my-portfolio-remix/blob/f1d34e1d12d8c6a2a856c6fd362ace999ae8120f/app/routes/_index.jsx#L6-L13

  • Svelte

https://github.com/danny-yamamoto/my-portfolio/blob/feff514d6b0bf32fdb2a394cfd29b7abda951eb1/src/routes/%2Bpage.svelte#L71-L139

load

  • Remix

https://github.com/danny-yamamoto/my-portfolio-remix/blob/f1d34e1d12d8c6a2a856c6fd362ace999ae8120f/app/routes/_index.jsx#L23-L42

  • Svelte

https://github.com/danny-yamamoto/my-portfolio/blob/feff514d6b0bf32fdb2a394cfd29b7abda951eb1/src/routes/%2Bpage.svelte#L6-L7

listing

  • Remix

https://github.com/danny-yamamoto/my-portfolio-remix/blob/f1d34e1d12d8c6a2a856c6fd362ace999ae8120f/app/routes/_index.jsx#L72-L78

  • Svelte

https://github.com/danny-yamamoto/my-portfolio/blob/feff514d6b0bf32fdb2a394cfd29b7abda951eb1/src/routes/%2Bpage.svelte#L38-L46

Summary

  • Remix と Svelte について比較しました。
  • Next.js（Vercel）を使う会社にとっては、どうでもいい話かもしれません。
  • 一方、Cloud ベンダーでシステムを運用する会社にとっては、検討の余地があると思います。
  • 門外漢の Engineer にとっては、Svelte の方が入りやすいと思います。
  • React のエコシステムが必要な場合は、Remix の方が向いているかもしれません。

この投稿をみて何か得られた方は、いいね ❤️ をお願いします。

残り数日のお盆を楽しくお過ごしください。

それでは、また別の話でお会いしましょう。👋

Discussion