Deploy a Remix App to Cloudflare.

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

• 構成
• Remix と Svelte を比べてみた感想
• Remix と Svelte の比較
• Summary

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

---

2023年8月3回目です。

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

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

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

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

• Remix 版

• Svelte 版

構成

• Project 作成

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

• 構成

.
├── 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

• Svelte

load

• Remix

• Svelte

listing

• Remix

• Svelte

Summary

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

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

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

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