Merhaba,


Daha önce Angular'da SEO - Server-side Rendering (SSR): Angular Universal'a giriş başlıklı bir yazıda SSR işlemlerine değinmiştik. Orada Express ile bu işlemi yapmıştık bu yazıda ise NestJS ile server side rendering işlemlerini nasıl yapacağımızı görelim.


Bu örnekte Angular versiyonumuz 9.1.9. Yazı uzun olmaması için projeyi, komponentleri, servisleri oluşturma görüntüyü düzeltme vs işlemlerin hiçbirine girmeyeceğim ancak yazının sonunda örneğimizin github linkini vereceğim, oradan inceleyebilirsiniz. Özetle 5 komponent, 2 servis mevcut yani şöyle bir yapı hazırladım;

src
  app
    components
      about
      header
      home
      users
        user-detail

    services
      seo
      user


users.component ve user-detail.component içerisinde bir apiden veri çekiyorum.


Örneğimizde SSR işlemi olmadan önce kaynak kodlarımız şu şekilde;



Şimdi direkt mevzuya girelim ve bitirelim.

Angular Cli bizim yerimize bütün işlemleri yapıyor aşağıdaki komutu çalıştırın ve bitmesini bekleyin;

ng add @nestjs/ng-universal


Bu komutla her şeyi otomatik olarak yaptırmış oluyoruz ancak manuel yapmak isteyen olursa ng add ile değil npm install ile aynı paketi kurarak yapabilirler. Ben bunu denemedim o yüzden bu yazıda detayları olmayacak. Denersem eğer mutlaka eklerim.


Aslında bu yazı buraya kadardı. Çünkü çalıştırdığımız komut ile bütün işlemler yapılıyor. Bize sadece build edip çalıştırmak kalıyor onuda şu şekilde yapıyoruz.


npm run build:ssr && npm run serve:ssr

Bu komuttan sonra projenizi localhost:4000 portundan kontrol edebilirsiniz.


Kaynak kodlarımız şu şekilde olacak;



Bu kadar.


Eğer projenizde setTimeout, localStorage gibi tarayıcıda çalışan komutlar kullanıyorsanız hata alabilirsiniz. Ancak basit bir çözümü var onuda Angular Universal SSR build işleminde setTimeout, setInterval, localStorage, sessionStorage is not defined sorunu başlıklı yazıya giderek çözebilirsiniz.


Umarım faydalı bir yazı olmuştur.

Buda örneğimizin github linki.