{"id":39545,"date":"2026-02-23T19:41:39","date_gmt":"2026-02-23T16:41:39","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=39545"},"modified":"2026-02-23T19:41:39","modified_gmt":"2026-02-23T16:41:39","slug":"ssr-ve-zorluklari-neden-bazi-bilesenler-sorun-yaratir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/ssr-ve-zorluklari-neden-bazi-bilesenler-sorun-yaratir\/","title":{"rendered":"SSR ve Zorluklar\u0131: Neden Baz\u0131 Bile\u015fenler Sorun Yarat\u0131r?"},"content":{"rendered":"

<\/p>\n

Modern web uygulamalar\u0131 geli\u015ftirirken, kullan\u0131c\u0131 deneyimini ve arama motoru optimizasyonunu (SEO) iyile\u015ftirmek amac\u0131yla Sunucu Taraf\u0131 Render (SSR) teknikleri giderek daha pop\u00fcler hale gelmektedir. Vue.js ekosisteminde Nuxt.js gibi \u00e7er\u00e7eveler, SSR’\u0131 kolayla\u015ft\u0131r\u0131rken, baz\u0131 durumlarda bu s\u00fcre\u00e7 beklenmedik sorunlara yol a\u00e7abilir. \u00d6zellikle taray\u0131c\u0131ya \u00f6zg\u00fc API’lere (window<\/code>, document<\/code>, localStorage<\/code> vb.) ba\u011f\u0131ml\u0131 olan Vue bile\u015fenleri, sunucu ortam\u0131nda render edilmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda hatalara neden olabilir. \u0130\u015fte tam bu noktada vue-no-ssr<\/code> k\u00fct\u00fcphanesi devreye girerek bu t\u00fcr bile\u015fenleri ak\u0131ll\u0131ca gizlememize ve uygulaman\u0131n geri kalan\u0131n\u0131n sorunsuz bir \u015fekilde SSR ile \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamam\u0131za olanak tan\u0131r.<\/p>\n

Bu rehberde, vue-no-ssr<\/code>‘\u0131n ne oldu\u011funu, neden ihtiya\u00e7 duydu\u011fumuzu, nas\u0131l kurulup kullan\u0131laca\u011f\u0131n\u0131 ve pratik uygulamalarda dikkat edilmesi gerekenleri detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, SSR tabanl\u0131 Vue projelerinizde kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z bu yayg\u0131n sorunu \u00e7\u00f6zmek i\u00e7in size kapsaml\u0131 bir yol haritas\u0131 sunmakt\u0131r.<\/p>\n

SSR ve Zorluklar\u0131: Neden Baz\u0131 Bile\u015fenler Sorun Yarat\u0131r?<\/h2>\n

Sunucu Taraf\u0131 Render (SSR), bir Vue uygulamas\u0131n\u0131n HTML \u00e7\u0131kt\u0131s\u0131n\u0131n sunucuda olu\u015fturulup taray\u0131c\u0131ya g\u00f6nderilmesini ifade eder. Bu, ilk y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131r ve arama motorlar\u0131n\u0131n i\u00e7eri\u011fi daha kolay indekslemesini sa\u011flar. Ancak, sunucu ortam\u0131 bir taray\u0131c\u0131 ortam\u0131ndan farkl\u0131d\u0131r. Sunucuda bir DOM (Belge Nesne Modeli), window<\/code> nesnesi, document<\/code> nesnesi veya localStorage<\/code> gibi taray\u0131c\u0131ya \u00f6zg\u00fc API’ler bulunmaz.<\/p>\n

Bir\u00e7ok Vue bile\u015feni, \u00f6zellikle \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerle entegre olanlar veya do\u011frudan taray\u0131c\u0131 API’lerini kullananlar, bu eksiklik nedeniyle sunucuda render edilmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda hatalara neden olur. \u00d6rne\u011fin:<\/p>\n

    \n
  • window.innerWidth<\/code> veya document.querySelector<\/code> gibi DOM manip\u00fclasyonlar\u0131 yapan bile\u015fenler.<\/li>\n
  • localStorage.getItem()<\/code> veya sessionStorage.setItem()<\/code> gibi taray\u0131c\u0131 depolama API’lerini kullanan bile\u015fenler.<\/li>\n
  • Chart.js<\/code>, Mapbox GL JS<\/code>, Fabric.js<\/code> gibi Canvas veya WebGL tabanl\u0131 grafik k\u00fct\u00fcphaneleri.<\/li>\n
  • Taray\u0131c\u0131ya \u00f6zg\u00fc olay dinleyicileri (\u00f6rn. resize<\/code>, scroll<\/code>) ekleyen bile\u015fenler.<\/li>\n<\/ul>\n

    Bu t\u00fcr bile\u015fenler, sunucuda \u00e7al\u0131\u015ft\u0131\u011f\u0131nda “window is not defined<\/code>” veya “document is not defined<\/code>” gibi hatalar f\u0131rlatarak uygulaman\u0131n SSR s\u00fcrecini durdurur. Bu da uygulaman\u0131n tamamen SSR yetene\u011fini kaybetmesine veya hatal\u0131 \u00e7al\u0131\u015fmas\u0131na yol a\u00e7ar. \u0130\u015fte bu noktada vue-no-ssr<\/code> gibi \u00e7\u00f6z\u00fcmler, bu bile\u015fenleri yaln\u0131zca istemci taraf\u0131nda render ederek sorunu ortadan kald\u0131r\u0131r.<\/p>\n

    vue-no-ssr Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

    vue-no-ssr<\/code>, taray\u0131c\u0131ya \u00f6zg\u00fc API’lere ba\u011f\u0131ml\u0131 olan Vue bile\u015fenlerini sunucu taraf\u0131nda render edilmekten koruyan basit ama etkili bir wrapper (sarmalay\u0131c\u0131) bile\u015fendir. Temel prensibi \u015fudur:<\/p>\n

      \n
    1. Sunucu Taraf\u0131nda:<\/strong> <\/code> bile\u015feni, i\u00e7erdi\u011fi bile\u015feni render etmez. Bunun yerine, varsay\u0131lan olarak bo\u015f bir HTML yorumu veya iste\u011fe ba\u011fl\u0131 olarak belirleyece\u011finiz bir placeholder (yer tutucu) render eder. Bu sayede sunucuda hi\u00e7bir taray\u0131c\u0131 API’si \u00e7a\u011fr\u0131lmaz ve hata olu\u015fmaz.<\/li>\n
    2. \u0130stemci Taraf\u0131nda (Taray\u0131c\u0131da):<\/strong> Uygulama taray\u0131c\u0131ya y\u00fcklendikten ve Vue hidrasyon s\u00fcreci tamamland\u0131ktan sonra, <\/code> bile\u015feni, i\u00e7erdi\u011fi ger\u00e7ek bile\u015feni render eder. Bu noktada, t\u00fcm taray\u0131c\u0131 API’leri kullan\u0131labilir durumdad\u0131r ve bile\u015fen sorunsuz bir \u015fekilde \u00e7al\u0131\u015f\u0131r.<\/li>\n<\/ol>\n

      Bu yakla\u015f\u0131m, uygulaman\u0131z\u0131n genel olarak SSR yetene\u011fini korurken, yaln\u0131zca belirli “sorunlu” bile\u015fenlerin istemci taraf\u0131nda y\u00fcklenmesini garanti eder. B\u00f6ylece hem h\u0131zl\u0131 ilk y\u00fckleme ve SEO avantajlar\u0131ndan yararlanabilir hem de taray\u0131c\u0131ya \u00f6zg\u00fc i\u015flevsellikleri kullanabilirsiniz.<\/p>\n

      vue-no-ssr Kurulumu ve Kullan\u0131m\u0131<\/h2>\n

      vue-no-ssr<\/code>‘\u0131 projenize entegre etmek olduk\u00e7a basittir.<\/p>\n

      Kurulum<\/h3>\n

      \u00d6ncelikle, k\u00fct\u00fcphaneyi projenize npm veya yarn ile eklemeniz gerekir:<\/p>\n

      npm install vue-no-ssr\n
      veya<\/h2>\nyarn add vue-no-ssr\n<\/code><\/pre>\n
      Temel Kullan\u0131m<\/h3>\n
      Kullan\u0131m\u0131, sorunlu bile\u015feninizi <\/code> etiketi i\u00e7ine sarmalamaktan ibarettir.<\/p>\n
      \u00d6rnek olarak, taray\u0131c\u0131 geni\u015fli\u011fini g\u00f6steren basit bir bile\u015fen d\u00fc\u015f\u00fcnelim. Bu bile\u015fen window<\/code> nesnesine eri\u015fti\u011fi i\u00e7in sunucuda hata verecektir:<\/p>\n
      \n