İçeriğe geç
JSkelet
EN

Bilerek seç

Kazanan yok. Uyan var.

Dört yaklaşımın güçlü ve zayıf taraflarını aynı zeminde görün. JSkelet'in kaybettiği satırları saklamıyoruz.

ÖlçütJSkeletNext.js (App Router)Astro + adapterExpress + EJS (elle)
Boş sayfada client JS Tek entry; island yoksa başka hiçbir şey React ve runtime, sayfa statik olsa da Yok; UI framework'ü seçilmediği sürece Yok (etkileşimi de yok)
HTML içinde framework JSON Yok — belge sayfanın kendisi __NEXT_DATA__ (veya RSC flight) HTML'in yanında Varsayılan olarak yok Yok
Etkileşim modeli Vanilla island ve bir mount fonksiyonu Bileşen ağacı, sunucu/client sınırıyla İstediğiniz UI framework'ünde island Kendi kurduğunuz script etiketleri
HTML önbelleği Süreç içinde TTL, erken yenileme, host vary, SWR ISR; platforma ve deposuna bağlı Statik build ya da adapter'ın CDN'i Yok; kendiniz kurarsınız
Nokta atışı geçersizleme Yol, desen veya RegExp — invalidateHtmlCache() Etiket ve yol bazında destekli Yeniden build ya da adapter ne veriyorsa Yok
Routing Açık tablo; yollar dosyada yazılı Dosya sistemi Dosya sistemi Açık tablo
Streaming ve kısmi render Eksik; yavaş bölümler fragment'a taşınır Akış sınırlarıyla destekli Server island ve ertelenmiş içerik Elle
Build zinciri esbuild ve Tailwind v4; opsiyonel adımlar kendini atlar Güçlü bir bundler, geniş yapılandırma yüzeyi Vite Ne kurarsanız
Tipler Düz JS ve JSDoc; derleme adımı yok TypeScript birinci sınıf TypeScript birinci sınıf Size bağlı
Oturuma özel sayfa HTML'i Cache'lenemez; fragment'a taşınır Destekli SSR modunda destekli Destekli

+ bu yaklaşımın avantajı − bilinçli ya da yapısal eksik • nötr, yalnızca farklı

Şimdi, bu tarayıcıda

Cache farkını canlı izle.

Aynı şablon, aynı bayt, aynı ağ — ve üreticinin içinde 80 ms’lik simüle API. HIT o beklemeyi atlar; miss her seferinde öder.

canlı

Cache'ten hazır gelen

ölçülüyor…

 

 

 

/_fragment/render-demo-cached — HIT 80 ms’lik upstream uykusunu atlar; geriye yalnızca gidiş-dönüş kalır.

her istekte

Her seferinde render edilen

ölçülüyor…

 

 

 

/_fragment/render-demo — no-store — her istekte simüle API’yi öder, sonra render eder.

JavaScript kapalıysa bu bölüm ölçüm yapmaz; sayfanın kalanı etkilenmez.

Gidiş-dönüş iki toplamı da ezer — bu yüzden boş render’lar berabere görünüyordu. Dürüst sinyal sunucu produce: HIT’te ~0 ms, üretici çalışınca ~80 ms+. Gerçek sayfada o uyku veritabanın ya da CMS’indir; cache ziyaretçiyi o maliyetten kurtarır.

View Source

__NEXT_DATA__ yok. Belgede framework JSON'u yok.

Arama motorlarına ve ilk boyamaya giden şey sayfanın kendisi — props'ların script etiketine gömülmüş ikinci bir kopyası değil.

tipik App/Pages HTML payload vergisi 
<main>…</main>
<script id="__NEXT_DATA__" type="application/json">
{"props":{"pageProps":{"posts":[…],
"user":null,"locale":"en"}},
"page":"/","query":{},"buildId":"…"}
</script>
<script src="/_next/static/chunks/…js">
</script>

İçerik iki kez gider: bir kez HTML, bir kez hidrasyon için JSON. Hem tarayıcı hem insan vergiyi indirir.

JSkelet HTML yalnızca sayfa 
<main>
  <h1>Son yazılar</h1>
  <article>…</article>
  <div data-island="newsletter"></div>
</main>
<script type="module" src="/assets/js/main….js">
</script>

Tek belge. Island yalnızca sayfada işaretçi varsa iner — gizli state dökümü yok, ağacın ikinci temsili yok.

Ölçülen ağırlık

Bu sitenin kendi build çıktısı

Yukarıdaki 'boş sayfada client JS' satırının buradaki gerçek karşılığı — yanında aynı tür sayfa için tahmini bir Next.js App Router ilk-yük bandı.

Bu sayfanın kendi build çıktısı, istek anında diskten okunup ölçüldü. Sağdaki sütun gzip sonrası. Island chunk'ları yalnızca ilgili element görünürlüğe girdiğinde iner; ilk yükte hepsi indirilmez.
Ham gzip
Stylesheet (Tailwind v4 çıktısı) 74.5 kB 12.9 kB
Client entry (island yükleyicisi) 635 B 318 B
İkon sprite'ı 12.8 kB 4.0 kB
Tüm island'lar (talep üzerine, ayrı chunk'lar) 74.4 kB 28.9 kB
Toplam — her island yüklenirse 162.3 kB 46.2 kB
  • Stylesheet (Tailwind v4 çıktısı) 12.9 kB
  • Client entry (island yükleyicisi) 318 B
  • İkon sprite'ı 4.0 kB
  • Tüm island'lar (talep üzerine, ayrı chunk'lar) 28.9 kB

Bu site (JSkelet)

ölçüldü

46.2 kB

gzip · first-load client assets

  • Stylesheet (Tailwind v4 çıktısı) 12.9 kB
  • Client entry (island yükleyicisi) 318 B
  • İkon sprite'ı 4.0 kB
  • Tüm island'lar (talep üzerine, ayrı chunk'lar) 28.9 kB

Örnek Next.js App Router sayfası

tahmini

115.2 kB

gzip · first-load client assets

  • React + ReactDOM 43.0 kB
  • Next.js client / App Router runtime 46.9 kB
  • Sayfa + paylaşılan app chunk'ları 9.8 kB
  • Stylesheet (Tailwind ölçeği) 15.6 kB

Tahmin; bu depoda Next build'i yok: minimal bir App Router sayfası için yuvarlak gzip rakamları (React ~44 kB, Next client runtime ~48 kB, ince sayfa chunk'ı, Tailwind ölçeğinde CSS). Senin Next uygulaman daha hafif ya da ağır olabilir — mesele kendi UI'ndan önce ödenen framework tabanı.

Karar

Tabloyu kendi projenize uygulayın

Satırların çoğu nötr. Karar genelde son iki satırda veriliyor.

İyi uyum

  • İçerik siteleri, bloglar ve dokümantasyon
  • Pazarlama ve kampanya sayfaları
  • Ürün listeleri, kataloglar ve ilanlar
  • SEO'nun gelir kalemi olduğu her sayfa

Yanlış seçim

  • Ziyaretçiye açık dashboard ve uygulama arayüzleri
  • Editör benzeri, durum ağırlıklı arayüzler
  • Her oturum açan kullanıcıya göre değişen sayfalar
  • Saniyede güncellenen gerçek zamanlı ekranlar
Next.js'ten taşıma Nasıl çalışır