Deploy a Remix App to Cloudflare.

この抜粋の内容は次のとおりです。
- 構成
- Remix と Svelte を比べてみた感想
- Remix と Svelte の比較
- Summary

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

---

2023年8月3回目です。

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

お盆に何をやるかというと、それは、[Remix](https://remix.run/) と [Svelte](https://svelte.jp/) の比較です。

- 門外漢の 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

## 構成
- Project 作成
```bash
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

```

- 構成
```bash
.
├── 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
```

## Remix と Svelte を比べてみた感想
- Chrome の Largest Contentful Paint (LCP)は、Svelte の方が優秀でした。
   - Remix: `0.85s`
   - Svelte: `0.28s`
- 簡潔に書けるという点で Svelte の方が良いと思いました。
- Remix は、当然ながら React への理解度が重要になると思います。

## Remix と Svelte の比較
- ２つのサイトで実現していることは、同じです。
- 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 の方が向いているかもしれません。

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

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

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