ReactJS ile Landing Page kodlanmaz!
ReactJS, günümüzde tartışmasız en popüler web uygulama geliştirme kütüphanelerindendir. Güçlü özellikleri ve esnekliği ile hemen her tür uygulamanın geliştirilmesine olanak tanır. Ancak Landing Page kodlamak için ideal bir seçenek değildir.
Özellikle son birkaç yıldır Frontend alanına yönelen genç yazılımcılara ReactJS’in her sorunu çözmeye muktedir bir kütüphane olduğu öğretiliyor. Bunun sonucunda gençler onlardan bir Landing Page yapmaları beklendiğinde hemen ReactJS ile proje oluşturuyorlar.
Landing Page nedir?
Türkçe’de açılış sayfası veya web sayfa olarak da adlandırılabilir. Hedef kitleye belirli bir şeyi her yönüyle tanıtmak amacıyla tasarlanmış tek parça web sayfasıdır.
Landing Page genellikle bir kurumu, bir topluluğu her yönüyle tanıtır. Ana Sayfa, Hakkımızda, İletişim klişe navigasyonuyla meşhurdur. Arama motorlarında kolayca bulunması, açık ve net bir biçimde verilmek istenen bilginin verilmesi, son kullanıcının cihaz genişliğine maksimum düzeyde uyum sağlaması Landing Page’lerden beklenen en temel şeylerdir.
Asla bir web uygulama değildir. Kullanıcının Landing Page ile etkileşimi minimum düzeydedir. Neredeyse bir televizyon gibidir, landing page bir vitrin gibi bilgi verir. Kullanıcıdan karmaşık inputlar alıp bunlara göre içerik değiştirmez.
ReactJS veya VueJS ile kodlanmış bir Landing Page’ın sahip olduğu dezavantajlar
Arama motorları ReactJS uygulamalarını göremez
Landing Page yaparken arama motorlarında kolayca bulunsun kullanıcı trafiği oluşsun istenir. Ama ReactJS veya VueJS gibi kullanıcının aksiyonları ve path değişimleri sonucunda HTML’i dinamik olarak oluşturan kütüphane ve framework’lerin içerikleri arama motorları tarafından taranmaz.
Daha basit anlatımla, Google sizin ReactJS veya VueJS uygulamanızın içeriğini bilemez. Bilemediği için arama sonuçlarında bunu insanlara sunamaz.
Bir web sayfa ile web uygulama arasındaki en belirgin fark budur. Web sayfanızın herkes tarafından bulunabilir ve erişilebilir olmasını istersiniz. Ama web uygulamanızın sadece ilgili kişiler etarafından erişilebilir olmasını istersiniz. Google’da arama sonuçlarında çıkmasını istemezsiniz.
Arama motorları statik bir sayfa isterler, web uygulamalar bunu veremez.
Bir Landing Page’de “Yükleniyor…” ifadeleri yer almamalıdır
ReactJS veya VueJS gibi kütüphane ve framework’ler kullanıcının uygulama içerisinde yapıp ettiklerine göre bazı parçaları render ederler veya etmezler. Bu, kullanıcının bir şeyler ekrana yüklenirken beklemesi gerektiği anlamına gelir. Landing Page formatındaki bir web sayfa statikmiş gibi davranmalıdır, içerikleri kullanıcının hareketleri sonucunda ekrana yüklenirken. Web sayfaya ilk girildiği anda tüm bilgilerin browser’a teslim edilmiş olması gerekir.
ReactJS veya VueJS ile yapılmış web uygulamalar, backend’e hiç istek atmıyor olsa bile, ağır ve hantal yapıları yüzünden browser’da render olmaları zaman alır.
Son kullanıcının internet hızına da bağlı olarak web uygulamalar yavaş açılır. Ama web sayfalar statik olmalıdır, küçücük bundle size’lara sahip olmalıdır ve tabiri uygunsa çat diye ekrana yüklenebilmelidir.
Pekala, Landing Page kodlarken ne kullanmalıyız?
Eğer küçük bir Landing Page projesiyse JS, HTML, CSS kullanmak en iyisidir. Alınabilecek en yüksek performans puanları alınır.
Ama biz bir ekibiz, bir framework’ün disiplini içerisinde Landing Page geliştirmek istiyoruz, kodumuz bir kalite standartına sahip olsun, her contributor kafasına göre kodlayamasın diye düşünüyorsanız o halde SSR marifetli bir framework seçmelisiniz. Şu an popüler iki seçenek şunlar, NextJS ve NuxtJS
