İçeriğe geç

JSkelet

EN
Açık kaynak · Modern web için · Node.js 22+ · MIT lisanslı

Web'in iskeleti.
Fazlası değil.

İçerik siteleri için yalın, yüksek performanslı bir temel. Tam HTML sunucudan gelir, island yalnızca dokunduğunuz yerde uyanır, cache ziyaretçi istemeden hazırdır.

Başla
$ npx jskelet init
Minimal ayak izi Şimşek hızında Geliştirici için
JSkelet logosu

Yanıt

200 · HTML hazır

Route'lar

route() · TTL

terminal

$ npx jskelet init

✓ route hazır

✓ island hazır

→ http://localhost:3000

45.0 kB Çekirdek payload (gzip)
0 Web font
22+ Node.js
MIT Açık kaynak
Express 5 Çalışma zamanı

Neden JSkelet

Yolunuzdan çekilen bir framework.

Sunucu içeriği hazırlar, cache beklemeyi kaldırır, island'lar yalnızca sayfanın gerçekten ihtiyaç duyduğu davranışı ekler.

Minimal ve hızlı

Tam HTML sunucudan. React runtime yok, hydration şelalesi yok — yalnızca bir içerik sayfasının ihtiyaç duyduğu baytlar.

Modüler

Menü, sayaç veya grafik kendi island'ında yaşar. Modülü yalnızca görünür olunca iner.

Geliştirici odaklı

Düz async controller, EJS şablon ve küçük bir API. Tören olmadan okunur, drama olmadan değiştirilir.

Şeffaf performans

Hafif demiyoruz. Gösteriyoruz.

Bu değerler gerçek build çıktısından okunuyor ve gzip sonrası ağırlığı gösteriyor. Pazarlama sözü değil, çalışan kod.

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ı) 77.4 kB 13.1 kB
Client entry (island yükleyicisi) 564 B 301 B
İkon sprite'ı 12.1 kB 3.9 kB
Tüm island'lar (talep üzerine, ayrı chunk'lar) 72.0 kB 27.7 kB
Toplam — her island yüklenirse 162.0 kB 45.0 kB

45.0 kB

Her şey dahil (gzip)

Stylesheet, entry, sprite ve sitedeki bütün island'lar birlikte. Tek bir sayfa bunun hepsini indirmiyor.

0

Web font isteği

Sistem font yığını. FOUT ve font kaynaklı düzen kayması yok.

1

Render'ı bloke eden istek

Tek stylesheet. Client entry modül olduğu için defer edilmiş.

2

Hemen inen island

Tema ve mobil menü. Diğer island'ların hepsi görünürlüğe girene kadar bekler.

Karşılaştırılabilir bir sayı istiyorsanız kendi projenizi aynı şekilde ölçün: bir aracın hafif olduğu iddiası, ancak sizin sayfanızda ölçüldüğünde bir şey ifade eder.

Tasarım gereği basit

Daha az yaz. Daha çok kur.

Stale-while-revalidate ziyaretçiyi render kuyruğundan çıkarır. Bir route, bir TTL, tahmin edilebilir davranış.

  • Cache anahtarı yol ve query; HIT durumunda controller hiç çalışmaz.
  • Prewarm açılışta sayfaları render eder, yani ilk ziyaretçi soğuk cache'e denk gelmez.
  • Her yanıt kendi cache durumunu bir başlıkta taşır; ölçmek için ayrı bir araç gerekmez.
  • Nokta atışı geçersizleme yerleşik: invalidateHtmlCache() bir yolu, deseni veya listeyi tümünü boşaltmadan bayatlatır.

Belgeleri gör

routes/10-pages.mjs
export default function register(app, { route, notFound }) {
app.get("/", route(
async () => ({
view: "pages/home",
data: { pillars },
}),
{ revalidate: 3600 },
));
app.get("/product/:slug", route(async ({ params }) => {
const product = await getProduct(params.slug);
if (!product) notFound();
return { view: "pages/product", data: { product } };
}));
}

Görünen ops

Redis, yönetim paneli, Cloudflare — ikinci bir ürün eklemeden.

HTML cache süreç belleğinde başlar. Bir anahtar çevirince aynı anahtarlar kopyalar arasında paylaşılır, sertleştirilmiş panel açılır ve edge ile konuşur.

Paylaşılan katman

Önce bellek. Ölçeklenince Redis.

L1 mikrosaniye HIT için süreç içinde kalır. Redis paylaşılan HTML/data gövdelerini tutar ve invalidateHtmlCache() / clearHtmlCache() çağrılarını pub/sub ile her kopyaya yayar — ioredis isteğe bağlı; yoksa yalnızca L1.

Birincil store

Süreç içi L1

Paylaşılan gövde

Redis HTML + data

Yayılım

Pub/sub invalidate

Doğru eşleşme

Her işi yapmaya çalışmaz.

JSkelet içerik ve keşfedilebilirlik için tasarlandı. Durum ağırlıklı uygulamalarda başka bir araç genelde daha doğru cevaptır.

İ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

SSS

Sık sorulanlar

Neden React yok?

Sayfaların çoğu etkileşimli değil. React'in maliyeti sabit: runtime iner, ağaç kurulur, hidrasyon çalışır — ve sonuç sunucunun zaten ürettiği HTML'in aynısı olur. JSkelet o sabit maliyeti kaldırıp etkileşimi yalnızca ihtiyacı olan elementlere veriyor.

TypeScript kullanabilir miyim?

Framework'ün kendisi düz JavaScript ve JSDoc; derleme adımı yok. Uygulama tarafında denetlenen JavaScript'i açıp aynı tip güvenliğinin çoğunu derlemesiz alabilirsiniz; .ts dosyaları için hatta kendiniz bir adım eklersiniz.

Cache süreç belleğinde: birden fazla instance'ta ne olur?

Her instance kendi L1 önbelleğini tutar, yani soğuk açılışta ısınma gerekir ve TTL sınırları kayabilir. Isıtma bu boşluğun çoğunu kapatır; isteğe bağlı Redis katmanı HTML'i paylaşır ve invalidateHtmlCache() / clearHtmlCache() çağrılarını pub/sub ile her kopyaya yayar. Nokta atışı geçersizleme her iki modelde de birinci sınıf.

Build çıktısı olmadan çalışır mı?

Evet. Manifest yoksa varlık yardımcısı hash'siz yollara döner ve layout stylesheet etiketini hiç basmaz. Build adımını atlamak hata değil, stilsiz ama çalışan bir sayfa verir.

Kalan sorular ve tam karşılık tablosu taşıma sayfasında.

İlk sayfanız beş dakikada hazır.

Tek komut, birlikte çalışan bir route, bir bileşen ve bir island'dan oluşan bir iskelet kurar.

İndir Belgeleri oku