Angular Universal SSR Nedir? Nasıl Kullanılır?

Angular, Tek Sayfa Uygulamaları (Single Page Applications) , Web Uygulamaları ve Karma Uygulamalar yapmak için kullanılan açık kaynaklı bir Javascript framework’üdür. Bu framework Google’ın bir ürünüdür.

Angular uygulamalarına Tek Sayfa Uygulamaları (Single Page Applications) denir, çünkü bir Angular uygulaması yüklendiğinde, web sayfalarını tekrar tekrar yüklemeden diğer sayfaları dinamik olarak işler.

Yani normal de bir web sitesinde gezinirken sayfalar arasında gezindiğimizi düşünelim. Ana sayfadan iletişim sayfasına geçiş yaptığımız da iletişim sayfasını tarayıcı yükler. Yine aynı şekilde farklı bir sayfaya geçiş yaparsak onu da aynı şekilde yükler fakat tek sayfa uygulama yapısında sayfalar site ilk açıldığında tarayıcı önbelleğine alınır ve ihtiyaç olduğunda yüklenmiş olan önbellekten açılır. Bu sayede sayfa içerisinde gezinirken sayfa yenileme işlemi asla gerçekleşmez.

Angular, SEO sorunları nedeniyle tercih edilmeyebiliyor fakat Angular Universal bu konuda bize destek oluyor ve bu problemi ortadan kaldırıyor. Angular ve SEO ile ilgili zorlukları anlamadan önce, SEO’nun ne olduğunu ve neden ilk etapta ilgilenmemiz gerektiğini gözden geçirmemize yardımcı olacaktır.

Neden web sitenizi arama motoru tarayıcı dostu yapmalısınız?

Arama motoru tarayıcılarının botları vardır. Bunlar, ziyaret ettikleri sayfaları arama motorlarının dizinine eklemek üzere okumak için webde ki sayfalara göz atan programlar veya komut dosyalarıdır.

Web sitenizin içeriğini endeks(index)’e ekleyen arama motoru tarayıcıları, popüler arama motorlarının içeriğinizi okumasına ve şirketinizin nihai hedefini anlamasına yardımcı olduğundan, web uygulamanızı arama motoruna endeks (index) edilmesi önemlidir. Yani özetle web uygulamanızın arama motorunda üst sıralara çıkmasında arama motoru optimizasyonu (search engine optimization) büyük rol taşır.

Angular SEO — Angular Universal’ı Anlamak

Angular Universal, Angular Uygulamalarınızı sunucu alanında işlemek (server side rendering) için Angular tarafından sağlanan bir teknolojidir. Bu araç, kullanıcı web sitenizi ilk kez ziyaret ettiğinde sunucunun Angular uygulamanızı önceden oluşturmasını sağlar. Angular Universal’dan yararlanmanın birçok SEO avantajı vardır. Ayrıca, Angular web uygulamanızın genel performansını ve erişilebilirliğini iyileştirmeye yardımcı olur. Angular framework’ü normalde uygulamaları tarayıcıda işleme(client side rendering) yapar. Bu arada ki sunucu alanında işleme(server side rendering) ve tarayıcı alanında işleme (client side rendering) olayları arasında ki bizi ilgilendiren fark aslında şu:

Eğer sayfamızı sunucu alanında işleme (server side rendering) yaparak açarsak sayfa kaynağımıza sitede bulunan tüm sayfaların içerikleri aktarılıyor fakat tarayıcı alanında işleme (client side rendering) yaparsak bu içerikler tam anlamıyla sayfa kaynağımıza aktarılmıyor, çünkü bir Angular projesini build ettiğimizde kodlarımız sıkıştırılıp bir javascript dosyasına dönüştürülüyor. Angular Universal da bu nokta da bize yardımcı oluyor ve sayfamızı aynı zamanda sunucu alanında işleme (server side rendering) yapıyor.

Angular Universal projemize nasıl uygulanır?

İlk olarak projemize Angular Universal’ı yüklemek için aşağıda ki kodu terminalimize yazıyoruz.

ng add @nguniversal/express-engine

Ve daha sonrasında bu kütüphane otomatik olarak bazı yeni dosyaları projemize otomatik olarak oluşturuyor. Aşağıda ki görselde detaylar mevcuttur.

Angular Universal kullanırken dikkat etmemiz gereken durumlardan birisi de kullandığımız kütüphaneler bazen sunucu alanında işleme (ssr) derlemesi alırken hata almamızı sağlayabiliyor. Bunun sebebi aslında projemiz derleme(build) alırken önce sunucu alanında işleme yapıyor. Örnek ben projemde ngrx kütüphanesinde state management yönetimi yapmak istedim ve bu işlem tarayıcı önbelleğinde gerçekleştiğinden dolayı sunucu alanında işleme alırken hata alıyor. Bu gibi durumlar da zaten projeyi derlemeye çalıştığınız da terminalde hatanın neden kaynaklandığına bakıp çözüm üretebiliyorsunuz. Örnek state management olayı için kodunuz eğer ki ngOnInit lifecycle içerisinde çalışıyor ise çözüm olarak aşağı da ki şekilde kodunuzu düzenlemeniz sizin için yeterli olacaktır.

Bu verdiğim örnek dışında farklı kütüphaneler bazen Angular Universal özelinde hata çıkartabiliyor. Bunlarla alakalı çözümler de internette araştırarak bulunabilir.

Artık projemizde gerekli düzenlemeleri yaptık ve önce derleme(build) alacağız ve sonrasında sayfa kaynağımızı inceleyip arada ki farkı gözlemleyeceğiz.

Derleme(build) alıp projeyi ayağa kaldırmak için:

npm run serve:ssr

kodunu çalıştırıyoruz ve projemiz derleniyor. Eğer ki bir hata almadıysak terminalde;

Node Express server listening on http://localhost:4000

yazısını göreceksiniz ve daha sonrasında tarayıcıda bulunan linke giriş yaparak projemizi görüntüleyebiliriz.

Şimdi sırası ile projenin Angular Universal kullanmadan önceki ve sonraki sayfa kaynağı görsellerini aşağıya bırakıyorum.

Angular Universal öncesi sayfa kaynağı

Angular Universal sonrası sayfa kaynağı

Ve bu işlemler sonucunda artık projemiz sunucu tarafında işleme de yaparak arama motoru dostu yapıyoruz. Daha üst sıralara çıkmak istiyorsanız bu kütüphaneyi kullanabilirsiniz. Proje kodlarını incelemek isterseniz:
https://github.com/furkankaanulucay/Angular-Ngrx-With-AngularUniversal