<\/div>\n

Merhaba,<\/p>\n

Angular, mimarisel olarak kullan\u0131c\u0131dan al\u0131nan istek neticesinde \u00fcretilen componenti taray\u0131c\u0131ya g\u00f6ndermekte ve yap\u0131sal olarak client tabanl\u0131 bir de\u011fi\u015fiklikle sayfan\u0131n tekrar render\u0131na ihtiya\u00e7 duymaks\u0131z\u0131n ekrana basmaktad\u0131r. B\u00f6ylece taray\u0131c\u0131 \u00fczerinde elde edilen \u00e7\u0131kt\u0131n\u0131n SEO(Search Engine Optimization – Arama Motoru Optimizasyonu) a\u00e7\u0131s\u0131ndan \u00f6nem te\u015fkil eden kaynak kodlar\u0131n\u0131n ilk render edildi\u011fi gibi kalmas\u0131 neticesinde sayfa ge\u00e7i\u015flerindeki bu staticlik bizleri olumsuz etkilemektedir. \u0130\u015fte Angular mimarisindeki bu handikap\u0131 Angular uygulamas\u0131n\u0131 sunucu taraf\u0131nda i\u015flememizi sa\u011flayan Angular Universal ile ger\u00e7ekle\u015ftirdi\u011fimiz Server-Side Rendering(SSR) ile a\u015fabilmekteyiz.<\/p>\n

Angular Universal Nedir?<\/h3>\n
Angular uygulamalar\u0131n\u0131n sunucu taraf\u0131nda handle edilmesidir. Dolay\u0131s\u0131yla sunucuda ele al\u0131nan component i\u00e7erisinde varsa API taleplerini beklemekte, gelen verileri uygun yerlere yerle\u015ftirmekte ve nihayetinde t\u00fcm sayfay\u0131 tam teferruatl\u0131 olu\u015fturduktan sonra taray\u0131c\u0131ya g\u00f6ndermektedir. <\/p>\n

\u00d6n Haz\u0131rl\u0131k<\/h3>\n

Makalede \u00f6rneklendirmede kullanabilmek i\u00e7in “home”, “about” ve “contact” olmak \u00fczere \u00fc\u00e7 adet component olu\u015ftural\u0131m.<\/p>\n

\r\nng g c components\/home --spec false\r\nng g c components\/about --spec false\r\nng g c components\/contact --spec false\r\n<\/pre>\nOlu\u015fturdu\u011fumuz bu componentlerin html dosyalar\u0131n\u0131n i\u00e7ini a\u015fa\u011f\u0131daki gibi doldural\u0131m.
\nhome.component.html;<\/p>\n
\r\n<h1>Anasayfa<\/h1>\r\n<p>Ho\u015fgeldiniz...<\/p>\r\n<\/pre>\nabout.component.html;<\/p>\n
\r\n<h1>Biz Kimiz?<\/h1>\r\n<p>\r\n   Beynimiz yorulmadan geceleri uyuyamayanlardan\u0131z...\r\n<\/p>\r\n<\/pre>\ncontact.component.html;<\/p>\n
\r\n<h1>\u0130leti\u015fim<\/h1>\r\n<p>Bize ula\u015fmak i\u00e7in T\u00fcrk\u00e7e kullan\u0131n\u0131z...<\/p>\r\n<form>\r\n   <table>\r\n      <tbody>\r\n         <tr>\r\n            <td>Ad\u0131n\u0131z<\/td>\r\n            <td>:<\/td>\r\n            <td><input type="text"><\/td>\r\n         <\/tr>\r\n         <tr>\r\n            <td>Soyad\u0131n\u0131z<\/td>\r\n            <td>:<\/td>\r\n            <td><input type="text"><\/td>\r\n         <\/tr>\r\n         <tr>\r\n            <td>Mesaj\u0131n\u0131z<\/td>\r\n            <td>:<\/td>\r\n            <td><textarea><\/textarea><\/td>\r\n         <\/tr>\r\n         <tr>\r\n            <td colspan="3"><button>G\u00f6nder<\/button><\/td>\r\n         <\/tr>\r\n      <\/tbody>\r\n   <\/table>\r\n<\/form>\r\n<\/pre>\nArd\u0131ndan bu componentlerin route haritalar\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n
\r\nimport { NgModule } from '@angular\/core';\r\nimport { Routes, RouterModule } from '@angular\/router';\r\nimport { HomeComponent } from '.\/components\/home\/home.component';\r\nimport { AboutComponent } from '.\/components\/about\/about.component';\r\nimport { ContactComponent } from '.\/components\/contact\/contact.component';\r\n\r\nconst routes: Routes = [\r\n  { path: "", redirectTo: "\/home", pathMatch: "full" },\r\n  { path: "home", component: HomeComponent },\r\n  { path: "about", component: AboutComponent },\r\n  { path: "contact", component: ContactComponent }\r\n];\r\n\r\n@NgModule({\r\n  imports: [RouterModule.forRoot(routes)],\r\n  exports: [RouterModule]\r\n})\r\nexport class AppRoutingModule { }\r\n<\/pre>\nVe son olarak ana componentte bu componentlerin y\u00f6nlendirme linklerini olu\u015ftural\u0131m.
\napp.component.html;<\/p>\n
\r\n<a routerLink="home">Home<\/a> | <a routerLink="about">About<\/a> | <a routerLink="contact">Contact<\/a> <br>\r\n<router-outlet><\/router-outlet>\r\n<\/pre>\n\u015eimdi uygulamay\u0131 derleyip yay\u0131na alal\u0131m ve componentlere yap\u0131lan istekler neticesinde kaynak kodunu inceleyelim.
\n<\/a><\/p>\n
Evet… G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Angular uygulamam\u0131zda componentlere yap\u0131lan istekler neticesinde \u00fcretilen component taray\u0131c\u0131ya g\u00f6nderilmekte lakin kaynak kodu de\u011fi\u015ftirmemektedir. Haliyle bu durum makalemizin ba\u015f\u0131nda da ifade etti\u011fimiz gibi SEO a\u00e7\u0131s\u0131ndan ciddi manada kayba sebebiyet verecektir. Hal b\u00f6yleyken gelin Angular Universal \u0130le Server-Side Rendering’in (SSR) uygulamaya nas\u0131l kurulaca\u011f\u0131n\u0131 ve gerekli konf\u00fcg\u00fcrasyonlar\u0131n ne \u015fekilde yap\u0131laca\u011f\u0131n\u0131 inceleyelim.<\/p>\n
Uygulamaya Angular Universal’in Kurulmas\u0131<\/h3>\nAngular Universal’i kurabilmek i\u00e7in uygulama dizininde a\u015fa\u011f\u0131daki konsept prototipini \u00e7al\u0131\u015ft\u0131r\u0131yoruz.<\/p>\n\r\nng add @nguniversal\/express-engine --clientProject projectName\r\n<\/pre>\nYukar\u0131daki kod blo\u011funda bulunan konsepte g\u00f6z atarsan\u0131z e\u011fer “projectName” k\u0131sm\u0131na uygulaman\u0131n birebir ayn\u0131 ismi verilmesi gerekmektedir. E\u011fer proje ad\u0131n\u0131z\u0131 bilmiyorsan\u0131z, bunun i\u00e7in “package.json” dosyas\u0131nda tan\u0131mlanm\u0131\u015f “name” de\u011ferini baz alabilirsiniz.
\n<\/a>
\n\u0130lgili kod konseptini \u00e7al\u0131\u015ft\u0131rd\u0131ktan sonra yukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde de vurguland\u0131\u011f\u0131 gibi uygulamada “src\/main.server.ts”, “src\/app\/app.server.module.ts”, “tsconfig.server.json”, “webpack.server.config.js” ve “server.ts” dosyalar\u0131 olu\u015fturulmu\u015ftur. \u015eimdi “app.module.ts” dosyas\u0131na g\u00f6z atal\u0131m;
\n<\/a>
\n\u0130lgili dosya i\u00e7erisinde import edilmi\u015f olan “BrowserModule” isimli mod\u00fcl uygulaman\u0131n server \u00fczerinden render edilmesini sa\u011flamaktad\u0131r. Burada dikkat edilmesi gereken husus “BrowserModule.withServerTransition({ appId: ‘Example’ })” komutundaki “appId” de\u011ferinin projenizin ismiyle(package.json : name<\/span>) ayn\u0131 olmas\u0131 gerekmektedir.<\/p>\n
Bu i\u015flemden sonra a\u015fa\u011f\u0131daki kod konseptiyle uygulamay\u0131 derleyip, aya\u011fa kald\u0131ral\u0131m.<\/p>\n
\r\nnpm run build:ssr && npm run serve:ssr\r\n<\/pre>\n<\/a>
\nDerleme neticesinde bizlere verilmi\u015f olan adresi(“http:\/\/localhost:4000”<\/span>) taray\u0131c\u0131 \u00fczerinden a\u00e7arak componentlere yap\u0131lan istek neticelerinin kaynak kodlar\u0131n\u0131 inceleyelim;
\n<\/a>
\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere componentlere yap\u0131lan istekler Angular Universal arac\u0131l\u0131\u011f\u0131yla Server Side Rendering (SS) edilmekte ve taray\u0131c\u0131ya g\u00f6nderilmektedir.<\/p>\n
Sunucu Taraf\u0131nda \u00c7al\u0131\u015fmas\u0131n\u0131 \u0130stemedi\u011fimiz Komutlar\u0131 Taray\u0131c\u0131da \u00c7al\u0131\u015ft\u0131rmak<\/h3>\nServer Side Rendering (SSR) yap\u0131lm\u0131\u015f bir uygulama yap\u0131sal olarak sunucu taraf\u0131nda i\u015flenmekte ve neticede olu\u015fturulan \u00e7\u0131kt\u0131 taray\u0131c\u0131ya g\u00f6nderilmektedir. Lakin; “setTimeout” ve “setInterval” gibi baz\u0131 yap\u0131lar yahut “localStorage” veya “sessionStorage” gibi depolara eri\u015fim sa\u011flayan \u00f6zellikler taray\u0131c\u0131ya ba\u011fl\u0131 olarak \u00e7al\u0131\u015fmakta ve taray\u0131c\u0131lar \u00fczerinde i\u015flenmektedirler.<\/p>\n
Dolay\u0131s\u0131yla bu yap\u0131lardan herhangi biri uygulamada kullan\u0131l\u0131yorsa SSR sunucu taraf\u0131ndan eri\u015femeyecek ve hata f\u0131rlatacakt\u0131r.<\/p>\n
\u00d6rne\u011fin Angular Universal ile aya\u011fa kald\u0131r\u0131lan bir uygulaman\u0131n herhangi bir noktas\u0131nda “localStorage” ile i\u015flem yapt\u0131\u011f\u0131m\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcrsek ilgili alana istek geldi\u011fi taktirde yukar\u0131daki bahsetti\u011fimiz duruma istinaden sunucu taraf\u0131ndan ilgili \u00f6zelli\u011fe eri\u015filemeyecek ve “localStorage is not defined<\/em>” hatas\u0131 verilecektir. Tabi bu hata Angular Universal’i kullanmad\u0131\u011f\u0131m\u0131z durumlar i\u00e7in ge\u00e7erli olmayacakt\u0131r.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: '.\/home.component.html',\r\n  styleUrls: ['.\/home.component.css']\r\n})\r\nexport class HomeComponent implements OnInit {\r\n  constructor() { }\r\n  ngOnInit() {\r\n    if (localStorage.getItem("a")) {\r\n      alert(localStorage.getItem("a"))\r\n    }\r\n  }\r\n}\r\n<\/pre>\n<\/a><\/p>\n
Dolay\u0131s\u0131yla b\u00f6yle bir durumda, sunucuda \u00e7al\u0131\u015fmayacak olan kodlar\u0131 sade ve sadece taray\u0131c\u0131da \u00e7al\u0131\u015ft\u0131rmas\u0131 gerekti\u011fine dair mimariye bildirecek bir kontrol olu\u015fturmam\u0131z yeterli olacakt\u0131r. Bunun i\u00e7in “PLATFORM_ID” de\u011ferini ilgili componentin constructer\u0131nda inject etmemiz ve a\u015fa\u011f\u0131daki gibi kullanmam\u0131z gerekmektedir.<\/p>\n
\r\nimport { Component, OnInit, Inject, PLATFORM_ID } from '@angular\/core';\r\nimport { isPlatformBrowser } from '@angular\/common';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: '.\/home.component.html',\r\n  styleUrls: ['.\/home.component.css']\r\n})\r\nexport class HomeComponent implements OnInit {\r\n  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }\r\n  ngOnInit() {\r\n    if (isPlatformBrowser(this.platformId)) {\r\n      if (localStorage.getItem("a")) {\r\n        alert(localStorage.getItem("a"))\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “@angular\/common” dizininde bulunan “isPlatformBrowser” mod\u00fcl\u00fc ile sadece taray\u0131c\u0131da \u00e7al\u0131\u015fmas\u0131n\u0131 istedi\u011fimiz kodlar\u0131 belirleyebilmekteyiz ve bunu ger\u00e7ekle\u015ftirirken inject neticesinde elde etti\u011fimiz PLATFORM_ID de\u011ferini kullanmaktay\u0131z. Velhas\u0131l b\u00f6ylece ilgili hatay\u0131 d\u00fczeltmi\u015f bulunmaktay\u0131z.<\/p>\n
Ayriyetten “isPlatformBrowser” mod\u00fcl\u00fcndeki i\u015fleve benzer olarak sadece sunucuda \u00e7al\u0131\u015fmas\u0131n\u0131 istedi\u011fimiz kodlar\u0131da kontroll\u00fc bir \u015fekilde irademizle belirtebilmek i\u00e7in “isPlatformServer” mod\u00fcl\u00fcn\u00fc kullanabiliriz.<\/p>\n
\r\nimport { Component, OnInit, Inject, PLATFORM_ID } from '@angular\/core';\r\nimport { isPlatformBrowser, isPlatformServer } from "@angular\/common";\r\n@Component({\r\n  selector: 'app-contact',\r\n  templateUrl: '.\/contact.component.html',\r\n  styleUrls: ['.\/contact.component.css']\r\n})\r\nexport class ContactComponent implements OnInit {\r\n\r\n  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }\r\n  ngOnInit() {\r\n    if (isPlatformBrowser(this.platformId)) {\r\n      \/\/Taray\u0131c\u0131da \u00e7al\u0131\u015facak kodlar...\r\n    }\r\n    if (isPlatformServer(this.platformId)) {\r\n      \/\/Sunucuda \u00e7al\u0131\u015facak kodlar...\r\n    }\r\n  }\r\n}\r\n<\/pre>\nB\u00f6ylece sunucuda ve taray\u0131c\u0131da \u00e7al\u0131\u015facak kodlar\u0131n net ayr\u0131m\u0131n\u0131 hem yaz\u0131l\u0131msal hemde g\u00f6rsel olarak ger\u00e7ekle\u015ftirmi\u015f olmaktay\u0131z.<\/p>\n
Ve b\u00f6ylece geli\u015ftirilen t\u00fcm Angular uygulamalar\u0131n\u0131n i\u00e7erikleri arama motorlar\u0131 taraf\u0131ndan rahat\u00e7a okunabilecek ve hedef kullan\u0131c\u0131 kitlesine daha rahat eri\u015febilmesini sa\u011flam\u0131\u015f olacakt\u0131r.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular, mimarisel olarak kullan\u0131c\u0131dan al\u0131nan istek neticesinde \u00fcretilen componenti taray\u0131c\u0131ya g\u00f6ndermekte ve yap\u0131sal olarak client tabanl\u0131 bir de\u011fi\u015fiklikle sayfan\u0131n tekrar render\u0131na ihtiya\u00e7 duymaks\u0131z\u0131n ekrana basmaktad\u0131r. B\u00f6ylece taray\u0131c\u0131 \u00fczerinde elde edilen \u00e7\u0131kt\u0131n\u0131n SEO(Search Engine...<\/p>\n","protected":false},"author":1,"featured_media":12154,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3018],"tags":[2156,3025,3022,3026,3027,3028,3023,3024],"class_list":["post-12174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-8","tag-angular","tag-angular-html","tag-angular-universal","tag-angular-universal-nedir","tag-isplatformbrowser","tag-isplatformserver","tag-server-side-rendering","tag-ssr"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/12174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=12174"}],"version-history":[{"count":52,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/12174\/revisions"}],"predecessor-version":[{"id":12234,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/12174\/revisions\/12234"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/12154"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=12174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=12174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=12174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}