Kişisel sitelerde neden çoğunlukla Vue kullanıyorum?

Bu siteyi Next.js ile yazdım. Kişisel ve tanıtım sitelerini ise çoğunlukla Vue ile yapıyorum. İlk bakışta çelişki gibi görünebilir; aslında bu yazının sebebi de tam olarak bu. Next'i yakından kullanmak, neden çoğu zaman Vue'yu tercih ettiğimi daha net görmemi sağladı.

Bir kişisel site aslında neye ihtiyaç duyar?

Kişisel bir site ya da küçük bir işletmenin tanıtım sitesi büyük ölçüde metinden oluşur: kim olduğunuz, ne yaptığınız, birkaç proje, bir iletişim formu. Etkileşim azdır; bir menü, belki bir filtre, bir form. Bu sitenin işi hızlı açılmak, Google'da düzgün görünmek ve yıllarca sorunsuz çalışmaktır.

Bu ihtiyaçlar için en önemli iki şey, içeriğin doğrudan HTML olarak gelmesi ve tarayıcıya gereğinden fazla JavaScript gönderilmemesi. Vue tarafında da SEO için sayfaları sunucuda ya da build sırasında üretmek şart; bunun en bilinen yolu Nuxt. Ama asıl fark, sonrasında tarayıcıya ne kadar yük bindiğinde ortaya çıkıyor.

Next'te ölçtüklerim

Bu siteyi optimize ederken her sayfayı tek tek ölçtüm. En sade sayfalarda bile tarayıcıya giden JavaScript'in yaklaşık 145 KB'ı (gzip) React ve Next.js'in çekirdeğiydi. Uygulamaya ait kod bunun yanında çok küçük kalıyordu. Buna ek olarak App Router, sayfanın içeriğini tarayıcının bileşenleri canlandırabilmesi için HTML'in içine bir kez daha veri olarak gömüyor. Bazı sayfalarda bu veri HTML'in yarısından fazlasını oluşturuyordu.

Bunların bir kısmını düzeltmek mümkün; gereksiz prop'ları temizleyerek gizlilik sayfasını 108 KB'tan 12 KB'a indirdim. Ama çekirdeğin kendisi yerinde duruyor. Karmaşık bir uygulamada bu yük, sunduğu yönlendirme ve veri yönetimi kolaylıklarıyla kendini fazlasıyla amorti ediyor. Birkaç sayfalık bir tanıtım sitesinde ise çoğu zaman taşınan ama kullanılmayan bir yapıya dönüşüyor.

Vue'yu neden daha rahat buluyorum?

Vue'nun çalışma zamanı daha küçük ve şablon yapısı HTML'e çok yakın. Bir sayfanın nasıl bir işaretlemeye (markup) dönüşeceğini şablona bakarak hemen görebiliyorum; başlık hiyerarşisi, semantik etiketler, alt metinler gibi SEO detaylarını kontrol etmek bu yüzden daha kolay. Tek dosya bileşenleri (SFC) küçük projelerde düzeni korumayı kolaylaştırıyor, reaktivite sistemi de hook kurallarıyla uğraşmadan anlaşılır kalıyor.

Bir de bakım meselesi var. Kişisel siteler genellikle bir kez yapılır ve aylarca kimse dokunmaz. Daha az hareketli parçası olan bir yapı, bir yıl sonra açtığınızda hâlâ anlaşılır oluyor.

Next'i ne zaman seçerim?

Bu, Next'in kötü olduğu anlamına gelmiyor. Çok sayıda dinamik sayfası olan, kullanıcı hesapları, karmaşık veri akışları ve büyük bir ekip barındıran ürünlerde Next'in sunduğu yapı ciddi zaman kazandırıyor. Bu siteyi de Next'te bırakıyorum; hem iyi çalışıyor hem de bana bu farkı rakamlarla görme fırsatı verdi.

Benim için soru hangi framework'ün daha popüler olduğu değil, sitenin gerçekten neye ihtiyaç duyduğu. Kişisel bir site için cevap genellikle "daha az" oluyor.