Boş HTML Sorunu

Deneyin görün. Herhangi bir büyük sitede sağ tıklayıp "Sayfa Kaynağını Görüntüle" seçeneğine tıklayın.

Büyük ihtimalle ekranda gördüğünüz şeyi orada bulamayacaksınız. Bunun yerine karşınıza çıkacak şey basit bir iskelet: birkaç meta etiketi, belki bir stil sayfası ve en önemlisi şu satır:

<div id="app"></div>

Hepsi bu. Asıl içerik—veriler, yapı, anlam—tamamen başka bir yerde yükleniyor. JavaScript dosyaları aracılığıyla kullanıcıların indirip tarayıcılarında çalıştırdığı kod sayesinde ortaya çıkıyor.

Böyle olmak zorunda değildi. Ve nereden buraya geldiğimizi anlamak, modern web uygulamaları geliştiren herkes için, özellikle de performans, erişilebilirlik ve arama motoru uyumluluğu önemli olanlar için kritik.

Zamanlar Sayfanın Belge Olduğu Zamanlardı

İlk internet inanılmaz derecede basit bir ilkeye dayanıyordu: tarayıcı bir belge talep eder, sunucu gönderir, tarayıcı gösterir. Ekranda gördüğünüz her şey HTML dosyasının içindeydi. Görebildiğiniz şeyler incelenebilir, incelenebilir şeyler de anlaşılabilirdi.

Bu bir sınırlılık değildi. Tersine, bu bir avantajydı.

Belgeler bağlam içinde anlam taşırlar. Bir makalede yazılan tarih sadece bir sayı değil, onu açıklayan cümlelerle çevrilidir. Bir bağlantı sadece bir URL değil, nereye götürdüğünü anlatan metinle sunulur. Anlam veri ile birlikte yaşardı ve sayfanın tamamı kendi kendini açıklayan, kontrol edilebilir bir yapıdaydı.

Sayfa Kaynağını Görüntüle bir hata ayıklama aracı değildi. Bu saydamlığın teminatıydı.

Sunucular programlanabilir hale geldikçe de (CGI, PHP, ASP aracılığıyla) temel anlayış korundu. Evet, HTML veritabanlarından dinamik olarak üretiliyordu. Ama kullanıcılar hâlâ tam, bitmiş bir belge alıyorlardı. Geliştirme sırasında parçalı olan şeyler—şablonlar, stiller, arka plan kodu—tarayıcıya gönderilmeden önce yeniden bir bütün haline geliyordu.

Tüketilen birim her zaman bütün sayfa idi.

Kırılma Noktası: AJAX ve Sonrası

Sonra XMLHttpRequest geldi ve her şey değişti.

Tarayıcılar artık sayfanın kendisinden bağımsız olarak veri alabiliyordu. Sayfalar tamamını yeniden yüklemeden belirli bölümleri güncelleyebiliyordu. 2000'lerin ortasında bunun adı çıktı: AJAX. Google Maps önemli bir örnek oldu—pürüzsüz, hızlı, durumsal, neredeyse masaüstü uygulaması gibi.

Motivasyon mantıklıydı. Neden tüm bir sayfayı yeniden yükleyelim ki sadece bir parçasını güncellemek için? Neden aynı gezinti menüsünü beraber gönderelim? AJAX gerçek sorunları çözdü. Kullanıcılar daha zengin etkileşimler istiyorlardı. Geliştiriciler bunu kurmak istiyorlardı.

Ama çözüm gizli bir bedel getiriyordu.

Büyük Değiş-Tokuş

2010'ların başında yeni bir bakış açısı belirginleşti:

1. Minimal HTML gönder (temelde boş bir kap)
2. Bir JavaScript uygulaması yükle
3. API'lerden veri çek
4. Ekranı çalışma zamanında doldur

Bu felsefenin başına gelen çerçeveler—React, Angular, Vue—hata değildi. Gerçek sorunlar çözdüler: karmaşık durum yönetimi, parça yeniden kullanılabilirliği, geniş ekipte koordinasyon. Aksi takdirde yapması çok zor olacak uygulamaları mümkün kıldılar.

Ama bunlar webin nasıl çalıştığında temel bir dönüşümü tamamladılar.

Neler Kaybettik (ve Neden Önemli?)

Web artık doğal olarak incelenebilir değil.

Günümüzün sayfasının HTML kodu, kullanıcıların gerçekte gördüğü şeyle neredeyse hiçbir ilgisine sahip değil. Görüntüledikleri veriler, tükettikleri içerik, üzerinde çalıştıkları arayüz—hepsi kaynak koddan yok olmuş durumda. Bunun yerine o <div id="app"></div> boş durmakta, JavaScript'in dolmasını beklemektedir.

Geliştiriciler için bu, bir sayfayı anlamak demek program mantığını izlemek, API çağrılarını takip etmek, durum değişikliklerini simüle etmek anlamına geliyor. Artık şeffaf değil.

Makineler için—arama motorları SEO için sayfa tarayırken, yapay zeka sistemleri web içeriğini analiz ederken, erişilebilirlik araçları yapıyı ayrıştırırken—modern web giderek daha karanlık hâle geliyor. Sayfada aslında ne olduğunu anlamak için JavaScript çalıştırmaları, kullanıcı etkileşimi simüle etmeleri, durum değişikliklerini takip etmeleri gerekiyor.

Arama motoru artık HTML'inizi basitçe okuyamıyor. Erişilebilirlik aracı sayfa hiyerarşisini güvenilir biçimde tespit edemiyor. Yapay zeka eğitim verisi toplamak için siteyi taranırken bir baş tahsiz tarayıcıda sayfaları render etmek zorunda kalıyor ve bu, içerik basitçe işaretlemede okunabilir olsaydı gerekecekten çok daha fazla kaynak harcıyor.

Derin Bir Değişimin Semptomu

Bu gerçekte JavaScript veya çerçeveler hakkında değil. Web sayfalarını nasıl düşündüğümüz hakkında kavramsal bir kayma.

Eski anlayış: Sayfa = Anlamlı bir belge Yeni anlayış: Sayfa = Arayüz kabı, anlam başka yerde

Belgeler kendi kendini açıklar. Arayüzler yorumlanmayı gerektirir. Belgelerden arayüzlere geçtiğimizde hızlılık ve zenginlik kazandık. Saydamlık ve incelenebilirliği kaybettik.

Birçok uygulama için bu değiş-tokuş buna değer. Bir Figma tasarım aracı veya Slack benzeri bir sohbet arayüzü gerçekten bir uygulama olması gerekiyor, belge değil.

Ama bu desen varsayılan hâline geldi. Basit bloglar ve açılış sayfaları bile—temelden belge niteliğinde olan içerik—tek sayfalı uygulama olarak inşa ediliyor. Sarkaçı çok ileri saldırdık.

NameOcean Kullanıcıları İçin Bunun Anlamı

NameOcean'da bunu önemsiyoruz çünkü domain ve hosting ayarlamanız kullanıcılara en iyi hizmet edecek mimaride çalışmasını sağlasın, sizi gereksiz karmaşıklığa zorlamasın.

İçerik sayfası, açılış sayfası veya esas olarak metinden oluşan herhangi bir şey yapıyorsanız, sunucu taraflı render (SSR) veya statik oluşturma hâlâ çok mantıklı. HTML'iniz anlam taşımalı. Arama motorları bunu anında anlamalı. Yavaş bağlantıya sahip kullanıcılar JavaScript yüklenmesinden önce içeriği görmeli.

Zengin, etkileşimli bir uygulama yapıyorsanız (gösterge paneli, tasarım aracı, gerçek zamanlı işbirliği), istemci ağırlıklı bir yapı tamamen doğru olabilir. Sadece değiş-tokuşu bilinçli seçin.

Temel fikir: Neden yaptığınız tercih hakkında bilin, sadece popüler olduğu için değil.

İleriye Bakış

Webin geleceği muhtemelen dengede yatıyor. Güncel çerçeveler melez yaklaşımlar konusunda akıllanıyor—ilk yüklemede sunucu taraflı render, etkileşim için istemci taraflı tepkisellik, değişmeyen içerik için statik oluşturma.

Next.js, Svelte ve Astro gibi araçlar, belgeler ve uygulamalar arasında tüm ya da hiç tercih yapmanın her zaman yanlış olduğunun farkındadırlar. Her ikisini de elde edebilirsiniz.

Ama kasıtlı olmayı gerektiriyor. Mimarinizi kalıtsal uygulamaları değil gerçek gereksinimlerinize dayanarak seçmek. İncelenebilir, indekslenebilir ve erişilebilir kalırken zengin ve etkileşimli olmayı sağlayan biçimde inşa etmek.

Webin en güçlü anları her zaman saydamlık ve güç karşıt değil, ortaklar—bu gerçeği hatırladığında olmuştur.