svelte vs next
1.0.0
Sveltekit vs Nextjsの主要な機能の比較。
目標：高速、簡単、構成に関する慣習、およびバッテリーが含まれています。圧倒的な選択は、明確な道を提供するのではなく、悪いことです。
| sveltekit | Nextjs | 勝者 | メモ | |
|---|---|---|---|---|
| ui lib | svelte | 反応します （または100万または事前に） | sveltekit | Svelteは、より高速なDOMアップデート、KBクライアントサイズの小さい、はるかに簡単なクロスコンポーネント状態管理、外部ファイルに応答性状態を抽象化する機能などを提供します。Svelte5にはルーン（信号）がありますか？ |
| 開発：ホットリロード | ？ | ？ | - | IE自動リロードファイルを保存します。 |
| 開発：o（1）ホットリロード | ？ vite | ？ ？ Turbopack（*デフォルトでは有効になっていない） | sveltekit | IEは変更されたファイルのみを処理します。大きなプロジェクトでも速い。 * package.jsonを更新して、ターボパックを有効にします： "dev": "next dev --turbo" 。 |
| 開発者：「高速リフレッシュ」 | ？ ？ （デフォルトでは有効になっていません） | ？ | Nextjs | IE UI状態はリロード全体に保存されています。 |
| 開発：現代のJSを書いてください | ？ | ？ | - | |
| 開発：A11yコンソールのヒント | ？ | sveltekit | ||
| 開発：きれい | ？ | ？ | - | それぞれ.svelteまたは.jsxファイルの場合。 Sveltekitの場合、 Svelte for VSCodeをインストールします。 |
| 製品：バンドラー | ？ | ？ | - | たとえば、MINIFYアセットなど。両方がデフォルトで有効になっています。 Rolldown（Rust）が2024年に準備ができている場合、SvelteはRollup+EsbuildからRolldownに切り替えて、さらに高速な生産ビルドを使用できます。 |
| PROD：ルートごとの自動コード分割 | ？ | ？ | - | IEオートコードは、ルートごとにJS＆CSSを分割し、適切にバンドルします。 |
| Prod：さまざまなホスト用のアダプターをビルドします | ？ | sveltekit | Sveltekitは、多くのホストに簡単な移植性を提供します。 NextjsはVercelで最適に機能します。 | |
| KBサイズ：Hello World | ？ 46.3（25.6 gzip）with csr* ？ 2.9（3.3 GZIP）CSRなし（これの1.8kbはFaviconです。ChlomeのGZIPで大きく表示されます） | 336.3（131.3 gzip）（9.7kbのファビコンを含む？）* | sveltekit | - *CSRは「クライアントサイドルーター」です。 -Sveltekitは、Sveltekit 1.23とSvelte 4を使用して、2023年8月25日に更新されました。 -NEXTJSは、2023年8月25日に更新され、App Router、NextJS 13.4.19、React 18.2.0を使用して更新しました。 -両方のテストは <p>hello world</p>のHTMLを返し、CSSを除外します。 |
| KBサイズ：「Real World」アプリ | 時代遅れすぎる | 時代遅れすぎる | - | 時代遅れ。 PRようこそ。 *2021年3月13日https://realworld.svelte.dev/、https://svelte.dev/blog/sapper-towards-the-ideal-web-app-framework |
| レンダリング：SSR、ルートごと | ？ | ？ | - | IEサーバー側は実行時にレンダリングされます。 |
| レンダリング：ストリーミング | ？ | ？ | - | IEサーバーは、応答を送信する前に完全なレンダリングが完了するのを待つのではなく、サーバー上でレンダリングされたHTTPストリームを送信します。 |
| レンダリング：静的、ルートごと | ？ | ？ | - | IE静的HTMLは、ビルド時に生成されます。 |
| レンダリング：ルートごとの増分静的再生 | ？非エッジターセル | ？非エッジターセル | - | 生産の静的な「オンデマンド」 - 最初のリクエストダイナミック、その後静的としてキャッシュされました。他のランタイム（Vercel＆CloudFlareのEdgeなど）については、ルートのcache-controlヘッダーを設定して、いくつかの同様の利点のためにstale-while-revalidateに使用することを検討してください。 |
| レンダリング：「部分的な競争」 | ??* | Nextjs | *「実験的」、NextJS V14以降。 ヘッダーのユーザー認証ボタン、ショッピングカートのステータスなど、ページ +ストリーミングダイナミックエリアの静的な事前表現が可能になります。 | |
| ヘッダー：s-max-age＆max-age、ルートごと | ？ | ？ | - | |
| ルート：ファイルベースのルーティング | ？ | ？ | - | 簡単に。他のルーティングユーティリティを含める必要があります。 |
| ルート：「スパモード」 | ？ | ？ | - | 初期ページのロードのSSR、次に後続ページのクライアント側ルーティング。 |
| ルート：Link HoverでJS/CSSを事前にフェッチします | ？ | ？次の/リンク | sveltekit | デフォルトでは、Sveltekitで、オーバーライドまたは削除できます。 Svelteは、Regexを介して指定されたすべてまたはいくつかのルートをプリロードするpreloadCode()およびprefetchData()も提供しています。 NextJSでは、リンクコンポーネントを使用する必要があります。ドキュメントを参照してください。 |
| 組み込み：メタデータ | ？ | ？次/ヘッド | - | <svelte:head>...</svelte:head>の中に置きます。 |
| 組み込み：国家管理 | ？ Svelte/Store | ？ uestate | sveltekit | 理想は、簡単で、組み込みの方法です。 Reactには useState 、Zustandなどがあります。Svelte4は、リアクティブなVARとストアを使用します。 Svelte5は、RUNES（信号）をさらに優れたDXにもたらし、React（信号ベースであるため）よりも優れた状態更新パフォーマンス、およびテンプレートファイル内の反応性を使用する機能（ .svelteなど）およびサポートファイル（ .svelte.tsなど）をもたらし、コードを参照して抽象化する新しい方法を有効にします。 Svelteは引き続き州の管理に勝ちます。 |
| 組み込み：アニメーション | ？ Svelte/Animate | sveltekit | Reactには3パーティのオプションが存在しますが、使いやすいものではありません。 FramermotionはReactに人気があります。 Motion Oneは優れたライブラリ（小＆速い）であり、任意のUIフレームワークで動作します。 | |
| 組み込み：画像の最適化 | ？拡張：IMG（ベータ） | ？次/画像 | - | ビルドタイムイメージの最適化（AVIFまたはWebPへの変換）、JPEGまたはPNGへのフォールバックを備えた画像要素の作成、サイズ変更、幅と高さの自動化、キャッシュ用のファイル名ハッシュなどを追加します。 |
| 組み込み：フォーム | ？アクションとuse:enhance （JSの有無にかかわらず動作）または formsnap（superforms上に構築） または スーパーフォーム | ？ nextjs 13フォームおよびサーバーアクション（適切に構築されている場合、JSの有無にかかわらず動作します） | - | Svelteには、JSがなくても機能するプログレッシブエンハンスメントを備えた組み込みのフォームサポートがあります。検証ルールが一度定義され、クライアント側とサーバー側の両方に使用されるため、それらは非常にきれいです。 Formik（React）はクリーンですが、JSとサーバー側の検証ルールの複製が必要です。 Felte（React、Sveltekit、＆Vueの場合）に似ています。 |
| 認証 | ？ auth.jsまたはLucia | ？ auth.jsまたはLucia | - | auth.js（正確にはnextauth.js）は、nextjsのracko標準です。使いやすい;電子メール、ソーシャル、および/またはワンクリックリンク。 Sveltekitもサポートしています。オリジナルの発表。しかし、LuciaはSveltekitコミュニティで非常に人気があります。 -thecopenhagenbook.com（Luciaの著者による無料）は、どちらのフレームワークについても、Authを設定する方法を学ぶのに役立つかもしれません。 |
| OG画像生成 | ？ @ethercorps/sveltekit-og* | ？ @vercel/og | Nextjs | @ethercorps/sveltekit-ogはsatoriに基づいており、 @vercel/ogにも基づいています。* @ethercorps/sveltekit-og ' 's cloudflareページなどの特定のホストでは動作しないためです。 Satoriを作成したvercelのクレジット。どちらにもTailWindCSSサポートが含まれます。誰かがSveltekitのためにOG Libを提供する機会！ |
| サイトマップ | ？スーパーサイトマップ | ？ NEXT-SITEMAP | - | Super SiteMapは、使いやすく、サイトマップの予想される慣習を最新の状態にして勝ちますが、どちらも仕事を成し遂げます。 開示：私はスーパーサイトマップの著者です。 Sveltekitでの公式SiteMap.xmlサポートのGitHub問題。 |
| データフェッチ | ？タンスタッククエリ ？ SSWR ？ TRPC | ？タンスタッククエリ ？ SWR ？ TRPC | - | 簡単なフェッチ/アスロード/エラー/キャッシング。 Sveltekitは、自動誘発された $typesモジュールのおかげで、ロード関数から返されたデータの自動タイプの安全性（コードサンプルの下の注を参照）を提供します。 |
| Tailwind CSS互換性 | ？ （またはSvelte-Add経由） | ？ | Nextjs B/Cが組み込まれています。どちらも簡単です。 | NextJSの場合は、Create-Next-Appを使用してNextJSアプリを作成するときに、TailWindCSSオプションをYes確認してください。Tailwind V4はさらに簡単にセットアップされます。 |
| UIコンポーネントLIBS -STYLED | - ？ Shadcn Svelte（非公式）* - ？ Flowbite Svelte - ？スケルトンUI - ？カーボンコンポーネントSVELTE | - ？ shadcn ui ** - ？ Tailwind UI - ？ムイ - ？アリのデザイン - ？マンティンUI - ？チャクラUI - ？フローバイト反応 | Nextjs | - *Bitsui（Radixuiに類似）の上に構築されています。 - ** radixuiに構築されています。 |
| UIコンポーネントLIBS -UNSTYLED | - ？ビットui* - ？溶かすui ** - ?? Svelte-headlessui（非公式;公式サポートの問題：1、2） | - ？ RADIX UI - ？ヘッドレスUI - ？ Ariaを反応します | Nextjs | 非スタイルのUIコンポーネント（ドロップダウン、スライダー、トグルなど）。 - *Meltuiの上に構築され、より馴染みのあるコンポーネントインターフェイスを提供します。 - ** Melt UIはRadixSvelteの後継者です。 |
| ドキュメント | 10/10 | 10/10 | - | |
| コンポーネントディレクトリ | sveltesociety.dev/components（あなたのものを追加） | - | ||
| 開発保持（楽しみのための代理; Svelte vs React） | 90％ | 83％ | svelte | *出典：JS 2022フロントエンドフレームワークの「保持」 |
| 哲学 | 教義 | ？ | n/a | 「人々はSvelteがSvelteを好むので、Svelteを使用します。彼らは審美的な感性と一致するのでそれが好きです。最速または最小または最小のものであるかどうかを努力するのではなく、私たちは最高の雰囲気を持つフレームワークになることを明示的に目指しています。 ？ |
以下は、ホスティングプロバイダーやその他の一般的なツール（分析など）を介して簡単に有効にできるため、低優先順位のフレームワーク機能、またはユーティリティベースのスタイルフレームワークを使用するような他のベストプラクティスが浮上しているためです。
| Svelteキット | Nextjs | 勝者 | メモ | |
|---|---|---|---|---|
| 組み込み：CSSスコープ | ？ | ？ | sveltekit | Svelte'sは自動です。 NextJSは、JSXのCSSモジュールまたはCSSを介して（クリーンではありません）。 Tailwindcssを使用する場合は無関係です。 「低優先度」b/cに移動すると、コンポーネントの複合性と共有のために、TailwindcssやUnocssなどのユーティリティベースのスタイルフレームワークを使用することが標準になりました。 |
| PROD：HTTP JS/CSSの早期ヒント応答** | どちらでもない | **一部のホスティングプラットフォームプロバイダーを介して簡単に有効にできるため、フレームワーク機能としては非常に関連性がありません。 HTTP2サーバーのプッシュを交換します。次の2つの応答を送信します。1。）ヘッダーを使用した103の応答ステータスリソースをプリロード＆Preconnectにリストします。 2.）標準200の応答ステータスなど。 （CloudFlareはサイトで自動的にこれを行うことができます。） | ||
| Webバイタルレポート** | ？ | Nextjs | ** Analytics Snippetを今または一部のホスティングプラットフォームプロバイダーを介して簡単に追加されるため、フレームワーク機能としては非常に関連性がありません。 Cloudlfareサイト分析は、構成がゼロのコアWebバイタルトラッキングを提供します。それは彼らのJSスニペットの一部です。 Vercelは、NextjsまたはNuxtjsを使用して素晴らしいダッシュボードを使用している場合にも提供します。 | |
| CSSのみのコンポーネントLIBS（すなわちJS） *カテゴリー的には推奨されていません* | - ？ daisyui - ？ヘッドレスUI* | ？ daisyui | - | *カテゴリー的には推奨されないb/c一部のコンポーネントはJavaScriptを必要とし、独自のJSを追加し、アクセシビリティを達成することは困難です。より良いアプローチは、優れたデフォルトスタイルを備えており、スタイリングが好みに合わせてスタイリングを可能にするフレームワークのアクセス可能なJS対応UIコンポーネントLIBから始めることです（SHADCNなど）。 -Daisyuiは、TailWindCSSクラスでカスタマイズしたり、Tailwindの @applyディレクティブを使用して変更されたりできるテーマを提供しています。 CSSのみのコンポーネントでは、DEVがJSとのアクセス可能な相互作用を追加する必要があります。これは多くの作業です。- ** Headless UIは、公式のReactおよびVueサポートを備えた有料製品です。 Sveltekitを使用してHTML＆CSSとして使用できますが、JSはありません。 - 更新：この行はもう維持しません。 |
Next JSの広いエコシステムにより、次のJS Blitz JSの上に構築されたフレームワークも名誉ある言及です。次のJSは、認証メカニズムなどのようにネイティブにサポートしていない機能が付属しています。中型または大規模プロジェクトに適しています。また、Blitz JSを使用しながら、次のJS知識を利用することもできます。
