次世代JavaScriptフレームワーク:QwikとSolidJS

Qwikの再開可能性とSolidJSの細粒度リアクティビティがJavaScript起動コストを減らす仕組み、SEO、クロール、Core Web Vitalsへの実際の影響を解説します。

初回公開:2026年6月26日 · 最終更新:2026年8月13日 · Advanced
言語

Qwikはサーバーで直列化した状態から処理を再開し、全面的なハイドレーションを避けますが、Qwikloaderは読み込み時に動きます。SolidJSはシグナルと仮想DOMを使わない細粒度リアクティビティで更新とハイドレーションを軽量化しますが、再開可能な仕組みではありません。どちらもクロール可能性やCore Web Vitalsを保証せず、結果はQwikCityやSolidStartで選ぶSSR・SSG・CSRと実装品質で決まります。

Evidence for this claim Qwik documents resumability and fine-grained lazy loading as core execution strategies. Scope: Qwik architecture; real transferred and executed JavaScript depends on the application. Confidence: high · Verified: Qwik documentation: Resumability Evidence for this claim Solid uses fine-grained reactive primitives and supports server rendering through its framework tooling. Scope: Solid/SolidStart architecture; SEO and performance depend on rendering configuration and application code. Confidence: high · Verified: Solid documentation

要点 — 「次世代フレームワーク」は標準分類ではなく、この記事が QwikSolidJS をまとめるために使う編集上の呼称です。両者は異なる仕組みでブラウザのJavaScript実行コストを減らします。Qwik再開可能性を採用し、リスナー、コンポーネント境界、状態をサーバーでHTMLに直列化します。ブラウザは全面的なハイドレーションを再生せず、必要な処理だけを再開します。ただし小さな Qwikloader は読み込み時に動き、操作時にハンドラーコードを遅延取得するため、JavaScriptが文字どおりゼロになるわけではありません。SolidJS はシグナルと仮想DOMを使わない細粒度リアクティビティにより更新範囲を限定しますが、再開ではなくハイドレーションを行います。リアクティビティとメタフレームワークのレンダリング方式は別の問題です。QwikCitySolidStart はサーバーレンダリングHTMLを出せますが、SolidStartは純粋なCSRにも対応し、ルーターやメタデータライブラリを標準では同梱しません。クロール、インデックス、実測Core Web Vitalsは実際の方式と実装で決まり、フレームワークは保証しません。

両者が解決しようとする根本原因

JavaScript SEOで扱う「Googleがコンテンツを見られるか」は、SSR・SSG・CSRというレンダリング方式の問題です。QwikCityとSolidStartはサーバーレンダリングや静的生成に対応しますが、強制はしません。CSRを選べば基盤が何であれ空シェルのSPAになります。QwikとSolidJSが直接変えるのは、もう一方の問題、つまりHTML到着後に実行されるJavaScriptのコストです。

一般的なSSR+ハイドレーション構成では、サーバーが完成済みHTMLを送り、初回描画とクローラーには有利です。しかしその後、フレームワークはコンポーネントコードを取得し、イベントハンドラーを結び付けて内部状態を再構築するため、ブラウザで再実行します。 ユーザーには完成して見えても操作できず、メインスレッドが塞がるため、このハイドレーション処理はラボの Total Blocking Time(TBT) とフィールドの Interaction to Next Paint(INP) を悪化させる大きな要因です。

QwikとSolidJSはいずれも、この処理を縮小または回避するために作られました。ただし経路は異なります。

Qwik:再開可能性(ハイドレーションはしないが、JSがゼロでもない)

Qwikの中心的な発想は再開可能性です。現在v2ベータ版のQwikはここで扱うリアクティビティ基盤で、QwikCityは後述する別のメタフレームワーク層です。QwikはサーバーでHTMLを生成し、処理を続けるために必要な状態、イベントリスナー、コンポーネントツリー、実行位置をHTMLへ直接直列化します。 ブラウザでコンポーネントを再実行して起動するのではなく、サーバーが止めた位置から再開します。

これはハイドレーションとは本質的に異なりますが、JavaScriptがゼロという意味ではありません。Qwikの文書では、圧縮後約1kb、モバイルで5ms未満に実行される小さな Qwikloader が、ページ読み込みのたびに動くとされています。役割は次のとおりです。

  • 対話要素ごとではなく、単一のグローバルイベントリスナーを登録する。
  • HTMLに書き込まれた on:click="./chunk.js#handler_symbol" 形式の属性(QRL、Qwik Resource Locator)を読む。
  • イベント発生時に対応するQRLを解決し、該当ハンドラーのチャンクだけを遅延取得して実行する。

実務上の結果は次のとおりです。

  • 起動時のJSは小さく、ほぼ一定ですが、ゼロではありません。 Qwikloader自体のコストはアプリ規模に応じて増えず、アプリ全体のハイドレーションもありません。ただしQwikloaderは実際にJavaScriptを実行します。「読み込み時JSゼロ」ではなく、「アプリ規模に比例するハイドレーションの代わりに、小さく一定規模のブートストラップを使う」と表現してください。
  • ハンドラー単位の遅延読み込み。 アプリコードは実際に操作が起きた時点で読み込まれます。これがQwik作者のいう「HTML-first」です。
  • QwikCity は、ファイルベースのルーティング、データローダー、アクション、エンドポイントを提供するQwikのメタフレームワークです。再開可能性だけでは、ルートのステータスコード、メタデータ、サーバーレンダリングの有無は決まりません。QwikCityのルーティングとレンダリング設定で決まります。

実務で再開可能性が破綻する箇所

Qwikの現在の直列化・状態管理文書によると、採用前に理解すべき制約があります。

  • 直列化の境界。 $(...) 境界内のコードが捕捉できるのは、プリミティブ、const に束縛された直列化可能なデータ、PromiseなどQwikが対応する一部の組み込み型です。独自クラスのインスタンスなど未対応の値は静的解析を通っても、Qwikが直列化する実行時に失敗します。本番まで表面化しない可能性があるためテストが必要です。
  • noSerialize() の値は再開後に残りません。 明示的に直列化対象外とした値は、SSR/SSG状態からクライアントが再開すると undefined になります。通常は useVisibleTask$() 内でクライアント側の再初期化が必要です。
  • useVisibleTask$ は早期実行されるブラウザ専用の回避策です。 Qwik自身も最後の手段としています。初回描画後にブラウザだけで動き、“eagerly executes code on the client” (翻訳) 「クライアントでコードを即時実行します」。既定ではIntersection Observerにより可視時に実行されますが、{ strategy: 'document-ready' } を指定すると読み込み直後に動きます。多用すると、再開可能性が避けようとする起動コストを再導入します。

SEOの観点では、QwikCityルートの初期HTMLにコンテンツと <a href> リンクが含まれるかは、レンダリング方式とルーティングの問題です。再開可能性だけでは保証されないため、フレームワーク名ではなく実際の応答を確認してください。Googleが必要とする内容はクロールを参照してください。現実的な利点は実行時側にあり、起動JavaScriptがメインスレッドを塞ぐ量を減らせます。これはCore Web Vitalsの一因ですが、特定のINPやTBTを保証しません。

SolidJS:細粒度リアクティビティ(効率的なハイドレーションであり、再開ではない)

SolidJSは別の角度から同じコストを減らします。Solidというリアクティビティエンジンと、SolidStartというメタフレームワークは別物です。Solidの核はシグナルに基づく細粒度リアクティビティで、仮想DOMを使いません

  • 再レンダリングではなくシグナル。 Reactでは状態変更時にコンポーネント関数を再実行し、仮想DOMの差分を調べます。Solidではコンポーネント関数は一度だけ実行され、createSignal のgetter/setterと createEffect などの購読者が依存関係を直接追跡します。シグナルが変わると購読するコードだけが再実行され、コンポーネント再実行も仮想DOM差分もありません。そのため更新量の多いjs-framework-benchmarkで上位に入りますが、数値はバージョンごとに変わるので現行結果を直接確認してください。
  • SolidJSはハイドレーションを行い、再開可能なフレームワークではありません。 サーバーレンダラーがHTMLを生成し、クライアントがそれをハイドレーションします。Qwikの再開とは異なる仕組みです。細粒度リアクティビティと仮想DOMを使わない設計により再構築量は少なくなりますが、実際のコストはルートが送る対話コード量に依存します。「SolidJSは再開可能」と説明しないでください。
  • SolidStart はルーティング、サーバー関数、デプロイ用プリセットを提供するメタフレームワークです。現在の文書(v1.0、ベータ表記、2026-04-28更新)は、CSRSSR(同期・非同期・ストリーミング)SSG の3方式を示しています。リアクティビティはどの方式でも同じですが、初期HTMLにコンテンツが入るかは方式で決まります。また、SolidStartはルーターやメタデータライブラリを標準同梱しないため、別途追加が必要です。

SEOでは、SolidStartルートのコンテンツとリンクが初期HTMLに入るかは3方式の選択で決まります。CSRだけなら一般的なSPAと同じ空シェルです。SSRまたはSSGなら JavaScript SEO が求めるようにコンテンツをHTMLへ入れられます。小さなランタイムと細粒度更新はハイドレーションの処理量を減らしますが、それだけでTBTやINPの値は決まりません。

違いを端的に整理する

この違いが記事全体の正確性を支えるため、用語を厳密に使ってください。

  • Qwik=再開可能性。 全面ハイドレーションは行いません。小さくほぼ一定規模のQwikloaderは読み込み時に動き、アプリコードは操作時に遅延取得されます。サーバーで直列化した状態から再開します。
  • SolidJS=細粒度リアクティビティ+ハイドレーション。 仮想DOMを使わず、シグナルが依存関係を追跡しますが、ハイドレーションは行います。再開可能性ではありません。

どちらも典型的な仮想DOM+全面ハイドレーション構成よりブラウザのJavaScript処理を減らしますが、仕組みは異なり、JavaScriptを完全にはなくしません。「再開可能性=JSゼロ」と考えること、SolidJSを再開可能と呼ぶことが、この組み合わせで最も多い誤解です。

隣接する比較対象:Astroのアイランド

同じ議論に登場する Astroのアイランドアーキテクチャ は、第3の仕組みです。Astroは既定で通常のサーバーレンダリングHTMLを送り、クライアントディレクティブを使って特定コンポーネントだけを「アイランド」としてハイドレーションします。ページの大半はコンポーネントJavaScriptを送りません。対話が必要な範囲を考える比較には有用ですが、Qwikの再開でもSolidの細粒度リアクティビティによるハイドレーションでもなく、静的ページの一部だけをハイドレーションする方式です。Qwikの文書もこの理由から再開可能性と部分ハイドレーションを区別しています。

Evidence for this claim Astro islands can provide a useful comparison boundary because they opt selected components into client execution, but islands/partial hydration are not the same mechanism as Qwik resumability or Solid fine-grained reactivity. Scope: comparison boundary Confidence: high · Verified: Islands architecture

既存フレームワークとの比較

ReactVueAngularSolidJSQwik
リアクティビティ仮想DOM+再レンダリング仮想DOM+リアクティビティZone.js/シグナル(v16以降)シグナル、仮想DOMなしシグナル、仮想DOMなし
SSR後の読み込み処理ハイドレーションハイドレーションハイドレーションハイドレーション(再構築量が少ない)再開(Qwikloaderのみ、全面ハイドレーションなし)
起動時JSコストアプリ規模に比例アプリ規模に比例アプリ規模に比例対話領域に比例小さなブートストラップ。アプリコードは操作時に遅延取得
サーバー/静的HTMLの内容方式に依存(Next/Remix)方式に依存(Nuxt)方式に依存(@angular/ssr方式に依存(SolidStart:CSR/SSR/SSG)方式に依存(QwikCity
メタフレームワークNext.js / RemixNuxtAngular SSRSolidStartQwikCity

既存フレームワークが既定でSEOに弱いわけではありません。適切なレンダリング方式なら、どのメタフレームワークもクローラーが必要とするコンテンツをHTMLに入れられます。これは JavaScript SEO の中心的な論点で、SolidStartとQwikCityも同じです。表の違いはブラウザ起動コストの仕組みであり、結果の保証ではありません。選択だけで決めつけず、実際のルートでTBTとINPを測ってください。

React、Vue、Angularも、シグナルや軽量なハイドレーションへ進んでいます(Angular Signals、React Server Components、Vue Vapor modeなど)。バージョンやロードマップはすぐ変わるため、具体的な機能を引用する前に各フレームワークの現行文書を確認してください。

自分のルートで検証する方法

特定ルートの答えをフレームワークの評判だけで決めず、ルートごとに確認します。

  • ステータスコードと初期HTML — ブラウザが描画したDOMではなくURLを直接取得し、コンテンツ、リンク、メタデータが含まれるか確認する。
  • ストリーミング出力 — ストリーミング方式なら、読み込み状態のシェルだけでなく全文が届くか確認する。
  • メタデータとリンク — title、meta description、canonical、<a href> の遷移先を確認する。再開可能性も細粒度リアクティビティも自動管理しない。
  • 直列化状態のサイズ(Qwik) — ハイドレーションを避けても、大きな状態はHTML容量を増やす。
  • 初期ローダー/ランタイムJS — 文書の主張ではなく、読み込み時にQwikloaderやSolidランタイムが実際に何をするか測る。
  • プリフェッチと操作時リクエスト — クリック時と事前読み込み時の通信をネットワークパネルで区別する。
  • ブラウザ専用タスクuseVisibleTask$ などが毎回早期実行されていないか確認する。
  • JavaScript失敗・遮断時の挙動 — 利用可能な状態へ劣化するか、完全に壊れるか確認する。
  • 代表的なクローラーの描画結果 — View Sourceだけでなく、Search ConsoleのURL検査などで描画後にしか現れない内容も確認する。

これはJavaScriptで描画するサイトすべてに必要な検証です。Googleの一般的な処理はレンダリングを参照してください。

次に読むもの

各フレームワークには個別の詳細ガイドがあります。

  • Qwik SEO — 実務での再開可能性、QwikCityのルーティングとSSR、メタデータ、useDocumentHead、遅延読み込み境界、フィールドCWVへの影響。
  • SolidJS SEO — シグナルと細粒度リアクティビティ、SolidStartのSSRとストリーミング、再開可能ではない理由、metaタグ管理、ベンチマークの読み方。

どちらも JavaScript SEO クラスターに属し、React、Vue、Angular、Next.js、Nuxt、Svelte、Astroのガイドと並びます。指標は Core Web Vitals、Googleから見た描画内容はレンダリングを参照してください。

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.