{"id":25055,"date":"2019-01-31T00:00:00","date_gmt":"2019-01-31T00:00:00","guid":{"rendered":"https:\/\/alienroad.com\/google-bilgi-bankasi\/dynamic-rendering-with-rendertron\/"},"modified":"2019-01-31T00:00:00","modified_gmt":"2019-01-31T00:00:00","slug":"dynamic-rendering-with-rendertron","status":"publish","type":"ar_kb","link":"https:\/\/alienroad.com\/google-bilgi-bankasi\/dynamic-rendering-with-rendertron\/","title":{"rendered":"Rendertron ile Dinamik Olu\u015fturma"},"content":{"rendered":"

31 Ocak 2019, Per\u015fembe<\/p>\n

\n Bir\u00e7ok \u00f6n u\u00e7 \u00e7er\u00e7evesi, i\u00e7eri\u011fi g\u00f6stermek i\u00e7in JavaScript’e g\u00fcvenir. Bu, Google’\u0131n i\u00e7eri\u011finizi dizine eklemesinin veya dizine eklenen i\u00e7eri\u011fi g\u00fcncellemesinin biraz zaman alabilece\u011fi anlam\u0131na gelebilir.\n<\/p>\n

\n Google I\/O’da tart\u0131\u015ft\u0131\u011f\u0131m\u0131z bir \u00e7\u00f6z\u00fcm yolu<\/a>
\n bu y\u0131l
\n dinamik olu\u015fturma<\/a>. Bunu uygulaman\u0131n bir\u00e7ok yolu vard\u0131r. Bu blog yaz\u0131s\u0131, dinamik olu\u015fturman\u0131n bir uygulama \u00f6rne\u011fini g\u00f6stermektedir:
\n Rendertron<\/a>, ba\u015fs\u0131z Chromium tabanl\u0131 a\u00e7\u0131k kaynakl\u0131 bir \u00e7\u00f6z\u00fcmd\u00fcr.\n<\/p>\n

Hangi siteler dinamik olu\u015fturmay\u0131 d\u00fc\u015f\u00fcnmeli?<\/h2>\n

\n Web sitenizi ziyaret eden t\u00fcm arama motorlar\u0131 veya sosyal medya botlar\u0131 JavaScript \u00e7al\u0131\u015ft\u0131ramaz. Googlebot
\n baz\u0131 s\u0131n\u0131rlamalara<\/a>sahiptir, \u00f6rne\u011fin JavaScript’inizi \u00e7al\u0131\u015ft\u0131rmas\u0131 zaman alabilir.\n<\/p>\n

\n Dinamik olu\u015fturma, s\u0131k de\u011fi\u015fen ve g\u00f6r\u00fcnt\u00fclenmesi i\u00e7in JavaScript gerektiren i\u00e7erikler i\u00e7in kullan\u0131\u015fl\u0131d\u0131r. Sitenizin kullan\u0131c\u0131 deneyimi (\u00f6zellikle
\n ilk anlaml\u0131 boyama<\/a>s\u00fcresi), hibrit olu\u015fturmay\u0131 (\u00f6rne\u011fin,
\n Angular Universal<\/a>).\n<\/p>\n

Dinamik olu\u015fturma nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/h2>\n

\"How<\/p>\n

\n Dinamik olu\u015fturma<\/a>
\n , belirli kullan\u0131c\u0131 arac\u0131lar\u0131 i\u00e7in istemci taraf\u0131nda olu\u015fturulan ve \u00f6nceden olu\u015fturulan i\u00e7erik aras\u0131nda ge\u00e7i\u015f yapmak anlam\u0131na gelir.\n<\/p>\n

\n JavaScript’i y\u00fcr\u00fctmek ve statik HTML \u00fcretmek i\u00e7in bir olu\u015fturucuya ihtiyac\u0131n\u0131z olacak. Rendertron, olu\u015fturma i\u015flemi i\u00e7in
\n ba\u015fs\u0131z Chromium<\/a> kullanan a\u00e7\u0131k kaynakl\u0131 bir projedir. Tek Sayfal\u0131 Uygulamalar genellikle verileri arka planda y\u00fckler veya i\u00e7eriklerini olu\u015fturma i\u015fini erteler. Rendertron, bir web sitesinin olu\u015fturma i\u015flemini ne zaman tamamlad\u0131\u011f\u0131n\u0131 belirlemek i\u00e7in mekanizmalara sahiptir. T\u00fcm a\u011f istekleri bitene ve bekleyen bir i\u015f kalmayana kadar bekler.\n<\/p>\n

Bu yaz\u0131 \u015funlar\u0131 kapsar:<\/p>\n

    \n
  1. \u00d6rnek bir web uygulamas\u0131na g\u00f6z at\u0131n<\/li>\n
  2. K\u00fc\u00e7\u00fck bir express.js<\/code> sunucusu kurun<\/li>\n
  3. Dinamik olu\u015fturma i\u00e7in bir ara yaz\u0131l\u0131m olarak Rendertron’u kurun ve yap\u0131land\u0131r\u0131n<\/li>\n<\/ol>\n

    \u00d6rnek web uygulamas\u0131<\/h2>\n

    \n “kitten corner” web uygulamas\u0131<\/a>
    \n bir API’den \u00e7e\u015fitli kedi resimleri y\u00fcklemek i\u00e7in JavaScript kullan\u0131r ve bunlar\u0131 bir \u0131zgarada g\u00f6r\u00fcnt\u00fcler.\n<\/p>\n

    \"Cute<\/p>\n

    \u0130\u015fte JavaScript:<\/p>\n

    <\/div>\n

    \n Web uygulamas\u0131, modern JavaScript (ES6) kullan\u0131r ve bu
    \n     hen\u00fcz Googlebot’ta desteklenmemektedir<\/a>. Googlebot’un i\u00e7eri\u011fi g\u00f6r\u00fcp g\u00f6remedi\u011fini kontrol etmek i\u00e7in
    \n     mobil uyumluluk testini<\/a> kullanabiliriz:\n<\/p>\n

    \"The<\/p>\n

    \n Bu sorunu \u00e7\u00f6zmek basit olsa da, dinamik olu\u015fturman\u0131n nas\u0131l kurulaca\u011f\u0131n\u0131 \u00f6\u011frenmek i\u00e7in iyi bir al\u0131\u015ft\u0131rmad\u0131r. Dinamik olu\u015fturma, web uygulamas\u0131 kodunda de\u011fi\u015fiklik yapmadan Googlebot’un kedi resimlerini g\u00f6rmesini sa\u011flayacakt\u0131r.\n<\/p>\n

    Sunucuyu kurun<\/h2>\n

    \n Web uygulamas\u0131n\u0131 sunmak i\u00e7in web sunucular\u0131 olu\u015fturmaya yarayan
    \n     express<\/code><\/a>, a node.js<\/code>
    \n k\u00fct\u00fcphanesini kullanal\u0131m.\n<\/p>\n

    \n Sunucu kodu \u015fu \u015fekildedir (
    \n     tam proje kaynak kodunu<\/a>
    \n burada bulabilirsiniz):\n<\/p>\n

    <\/div>\n

    \n Canl\u0131 \u00f6rne\u011fi
    \n     deneyebilirsiniz<\/a> – modern bir taray\u0131c\u0131 kullan\u0131yorsan\u0131z bir s\u00fcr\u00fc kedi resmi g\u00f6rmelisiniz. Projeyi bilgisayar\u0131n\u0131zdan \u00e7al\u0131\u015ft\u0131rmak i\u00e7in
    \n     node.js<\/code><\/a> gereklidir ve \u015fu komutlar\u0131 \u00e7al\u0131\u015ft\u0131rman\u0131z gerekir:\n<\/p>\n

    <\/div>\n

    \n Ard\u0131ndan taray\u0131c\u0131n\u0131z\u0131 \u015fu adrese y\u00f6nlendirin:
    \n     https:\/\/alienroad.com<\/code><\/a>. \u015eimdi dinamik olu\u015fturmay\u0131 kurma zaman\u0131.\n<\/p>\n

    Bir Rendertron \u00f6rne\u011fi da\u011f\u0131t\u0131n<\/h2>\n

    \n Rendertron, bir URL alan ve ba\u015fs\u0131z Chromium kullanarak bu URL i\u00e7in statik HTML d\u00f6nd\u00fcren bir sunucu \u00e7al\u0131\u015ft\u0131r\u0131r. Rendertron projesinin
    \n     \u00f6nerisini takip edece\u011fiz<\/a>
    \n ve
    \n     Google Cloud Platform<\/a>.\n<\/p>\n

    \"The<\/p>\n

    \n kullanaca\u011f\u0131z. L\u00fctfen
    \n     \u00f6deme gerektirmeyen kullan\u0131m katman\u0131<\/a>ile ba\u015flayabilece\u011finizi unutmay\u0131n; bu kurulumu \u00fcretimde kullanmak
    \n     Google Cloud Platform fiyatland\u0131rmas\u0131na<\/a>.\n<\/p>\n

      \n
    1. \n g\u00f6re maliyet getirebilir.
      \n       Google Cloud konsolunda<\/a>yeni bir proje olu\u015fturun. Giri\u015f alan\u0131n\u0131n alt\u0131ndaki “Proje Kimli\u011fi”ni not edin.\n <\/li>\n
    2. \n Dok\u00fcmantasyonda a\u00e7\u0131kland\u0131\u011f\u0131 gibi Google Cloud SDK’y\u0131<\/a>
      \n y\u00fckleyin ve giri\u015f yap\u0131n.\n <\/li>\n
    3. \n Rendertron deposunu GitHub’dan \u015fu komutla klonlay\u0131n:<\/p>\n
      <\/div>\n<\/li>\n
    4. \n Ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemek ve Rendertron’u bilgisayar\u0131n\u0131zda derlemek i\u00e7in \u015fu komutlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
      <\/div>\n<\/li>\n
    5. \n Rendertron dizininde config.json<\/code> ad\u0131nda yeni bir dosya olu\u015fturarak Rendertron’un \u00f6nbelle\u011fini etkinle\u015ftirin:<\/p>\n
      <\/div>\n<\/li>\n
    6. \n Rendertron dizininden \u015fu komutu \u00e7al\u0131\u015ft\u0131r\u0131n. 1. ad\u0131mdaki proje kimli\u011finizle
      \n YOUR_PROJECT_ID<\/var><\/code> k\u0131sm\u0131n\u0131 de\u011fi\u015ftirin.<\/p>\n
      <\/div>\n<\/li>\n
    7. Se\u00e7ti\u011finiz bir b\u00f6lgeyi se\u00e7in ve da\u011f\u0131t\u0131m\u0131 onaylay\u0131n. Bitmesini bekleyin.<\/li>\n
    8. URL’yi girin: YOUR_PROJECT_ID<\/var>.appspot.com<\/code>. Bir giri\u015f alan\u0131 ve birka\u00e7 d\u00fc\u011fme i\u00e7eren Rendertron aray\u00fcz\u00fcn\u00fc g\u00f6rmelisiniz.\n <\/li>\n<\/ol>\n

      \"Rendertron's<\/p>\n

      \n Rendertron web aray\u00fcz\u00fcn\u00fc g\u00f6rd\u00fc\u011f\u00fcn\u00fczde, kendi Rendertron \u00f6rne\u011finizi ba\u015far\u0131yla da\u011f\u0131tm\u0131\u015fs\u0131n\u0131z demektir. Projenizin URL’sini (YOUR_PROJECT_ID<\/var>.appspot.com<\/code>) not edin, \u00e7\u00fcnk\u00fc i\u015flemin bir sonraki b\u00f6l\u00fcm\u00fcnde buna ihtiyac\u0131n\u0131z olacak.\n<\/p>\n

      Rendertron’u sunucuya ekleyin<\/h2>\n

      \n Web sunucusu express.js<\/code> kullan\u0131yor ve Rendertron’un bir express.js<\/code>
      \n ara yaz\u0131l\u0131m\u0131 var. \u015eu komutu server.js<\/code> dosyas\u0131n\u0131n bulundu\u011fu dizinde \u00e7al\u0131\u015ft\u0131r\u0131n:\n<\/p>\n

      <\/div>\n

      \n Bu komut, sunucuya ekleyebilmemiz i\u00e7in rendertron-middleware’i npm’den y\u00fckler:\n<\/p>\n

      <\/div>\n

      Bot listesini yap\u0131land\u0131r\u0131n<\/h2>\n

      \n Rendertron, bir iste\u011fin bir bottan m\u0131 yoksa kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131ndan m\u0131 geldi\u011fini belirlemek i\u00e7in user-agent<\/code> HTTP ba\u015fl\u0131\u011f\u0131n\u0131 kullan\u0131r. Kar\u015f\u0131la\u015ft\u0131rma yapmak i\u00e7in
      \n       iyi korunmu\u015f bir bot kullan\u0131c\u0131 arac\u0131s\u0131 listesine<\/a>
      \n sahiptir. Varsay\u0131lan olarak bu liste Googlebot’u i\u00e7ermez, \u00e7\u00fcnk\u00fc Googlebot JavaScript \u00e7al\u0131\u015ft\u0131rabilir. Rendertron’un Googlebot isteklerini de olu\u015fturmas\u0131n\u0131 sa\u011flamak i\u00e7in Googlebot’u kullan\u0131c\u0131 arac\u0131lar\u0131 listesine ekleyin:\n<\/p>\n

      <\/div>\n

      \n Rendertron, user-agent<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 daha sonra bu d\u00fczenli ifadeyle kar\u015f\u0131la\u015ft\u0131r\u0131r.\n<\/p>\n

      Ara yaz\u0131l\u0131m\u0131 ekleyin<\/h2>\n

      \n Bot isteklerini Rendertron \u00f6rne\u011fine g\u00f6ndermek i\u00e7in ara yaz\u0131l\u0131m\u0131
      \n express.js<\/code> sunucumuza eklememiz gerekir. Ara yaz\u0131l\u0131m, istekte bulunan kullan\u0131c\u0131 arac\u0131s\u0131n\u0131 kontrol eder ve bilinen botlardan gelen istekleri Rendertron \u00f6rne\u011fine iletir. A\u015fa\u011f\u0131daki kodu server.js’ye ekleyin ve YOUR_PROJECT_ID<\/var><\/code> k\u0131sm\u0131n\u0131 Google Cloud Platform proje kimli\u011finizle de\u011fi\u015ftirmeyi unutmay\u0131n:\n<\/p>\n

      <\/div>\n

      \n \u00d6rnek web sitesini isteyen botlar, statik HTML’yi Rendertron’dan al\u0131r, b\u00f6ylece botlar\u0131n i\u00e7eri\u011fi g\u00f6r\u00fcnt\u00fclemek i\u00e7in JavaScript \u00e7al\u0131\u015ft\u0131rmas\u0131na gerek kalmaz.\n<\/p>\n

      Kurulumumuzu test etme<\/h2>\n

      \n Rendertron kurulumunun ba\u015far\u0131l\u0131 olup olmad\u0131\u011f\u0131n\u0131 test etmek i\u00e7in Mobil Uyumluluk Testini tekrar \u00e7al\u0131\u015ft\u0131r\u0131n.\n<\/p>\n

      \"The<\/p>\n

      \n \u0130lk testin aksine, kedi resimleri g\u00f6r\u00fcn\u00fcr durumdad\u0131r. HTML sekmesinde, JavaScript kodunun olu\u015fturdu\u011fu t\u00fcm HTML’yi ve Rendertron’un i\u00e7eri\u011fi g\u00f6r\u00fcnt\u00fclemek i\u00e7in JavaScript ihtiyac\u0131n\u0131 ortadan kald\u0131rd\u0131\u011f\u0131n\u0131 g\u00f6rebiliriz.\n<\/p>\n

      Sonu\u00e7<\/h2>\n

      \n Web uygulamas\u0131nda herhangi bir de\u011fi\u015fiklik yapmadan bir dinamik olu\u015fturma kurulumu olu\u015fturdunuz. Bu de\u011fi\u015fikliklerle, taray\u0131c\u0131lara web uygulamas\u0131n\u0131n statik bir HTML s\u00fcr\u00fcm\u00fcn\u00fc sunabilirsiniz.\n<\/p>\n

      Yazan: Martin Splitt<\/a>, Open Web Unicorn<\/p>\n","protected":false},"excerpt":{"rendered":"

      31 Ocak 2019, Per\u015fembe Bir\u00e7ok \u00f6n u\u00e7 \u00e7er\u00e7evesi, i\u00e7eri\u011fi g\u00f6stermek i\u00e7in JavaScript’e g\u00fcvenir. Bu, Google’\u0131n i\u00e7eri\u011finizi dizine eklemesinin veya dizine eklenen i\u00e7eri\u011fi g\u00fcncellemesinin biraz zaman alabilece\u011fi anlam\u0131na gelebilir. Google I\/O’da tart\u0131\u015ft\u0131\u011f\u0131m\u0131z bir \u00e7\u00f6z\u00fcm yolu bu y\u0131l dinamik olu\u015fturma. Bunu uygulaman\u0131n bir\u00e7ok yolu vard\u0131r. Bu blog yaz\u0131s\u0131, dinamik olu\u015fturman\u0131n bir uygulama \u00f6rne\u011fini g\u00f6stermektedir: Rendertron, ba\u015fs\u0131z Chromium […]<\/p>\n","protected":false},"menu_order":82073,"template":"","meta":{"footnotes":""},"ar_kb_kategori":[665],"ar_kb_etiket":[],"class_list":["post-25055","ar_kb","type-ar_kb","status-publish","has-post-thumbnail","hentry","ar_kb_kategori-blog"],"_links":{"self":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb\/25055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb"}],"about":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/types\/ar_kb"}],"version-history":[{"count":0,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb\/25055\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/media\/27188"}],"wp:attachment":[{"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/media?parent=25055"}],"wp:term":[{"taxonomy":"ar_kb_kategori","embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb_kategori?post=25055"},{"taxonomy":"ar_kb_etiket","embeddable":true,"href":"https:\/\/alienroad.com\/wp-json\/wp\/v2\/ar_kb_etiket?post=25055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}