{"id":41191,"date":"2025-05-05T11:52:33","date_gmt":"2025-05-05T08:52:33","guid":{"rendered":"https:\/\/blog.markergroupe.com\/?p=41191"},"modified":"2025-10-13T17:35:48","modified_gmt":"2025-10-13T14:35:48","slug":"server-side-rendering-ssr-nedir-ve-nasil-calisir","status":"publish","type":"post","link":"https:\/\/blog.markergroupe.com\/tr\/server-side-rendering-ssr-nedir-ve-nasil-calisir\/","title":{"rendered":"Server-Side Rendering (SSR) Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_78 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0130\u00e7indekiler<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blog.markergroupe.com\/tr\/server-side-rendering-ssr-nedir-ve-nasil-calisir\/#SSR_Nedir\" >SSR Nedir?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blog.markergroupe.com\/tr\/server-side-rendering-ssr-nedir-ve-nasil-calisir\/#Nasil_Calisir\" >Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blog.markergroupe.com\/tr\/server-side-rendering-ssr-nedir-ve-nasil-calisir\/#Avantajlari\" >Avantajlar\u0131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blog.markergroupe.com\/tr\/server-side-rendering-ssr-nedir-ve-nasil-calisir\/#Dezavantajlari\" >Dezavantajlar\u0131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blog.markergroupe.com\/tr\/server-side-rendering-ssr-nedir-ve-nasil-calisir\/#Ne_Zaman_Kullanilmali\" >Ne Zaman Kullan\u0131lmal\u0131?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p><strong>Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek ve performans\u0131 art\u0131rmak i\u00e7in farkl\u0131 render teknikleri kullan\u0131l\u0131r. Bunlardan biri olan\u00a0Server-Side Rendering (SSR), sunucu taraf\u0131nda HTML\u2019in olu\u015fturulup istemciye (taray\u0131c\u0131ya) g\u00f6nderilmesi s\u00fcrecini ifade eder. Peki SSR tam olarak nedir, nas\u0131l \u00e7al\u0131\u015f\u0131r ve neden \u00f6nemlidir?<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ssr-nedir\"><span class=\"ez-toc-section\" id=\"SSR_Nedir\"><\/span><strong>SSR Nedir?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>SSR<\/strong>, bir web sayfas\u0131n\u0131n <strong>HTML<\/strong> i\u00e7eri\u011finin sunucu taraf\u0131nda olu\u015fturulmas\u0131 ve bu haz\u0131r <strong>HTML\u2019in<\/strong> kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131na g\u00f6nderilmesidir. Geleneksel web sitelerinde zaten var olan bu yakla\u015f\u0131m, modern JavaScript framework\u2019leri (React, Vue, Angular) ile yeniden pop\u00fcler hale gelmi\u015ftir. <strong>SSR\u2019nin<\/strong> temel amac\u0131,\u00a0ilk sayfa y\u00fckleme s\u00fcresini k\u0131saltmak,\u00a0<strong>SEO<\/strong> uyumlulu\u011funu art\u0131rmak\u00a0ve d\u00fc\u015f\u00fck performansl\u0131 cihazlarda bile sorunsuz bir deneyim sunmakt\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"nasil-calisir\"><span class=\"ez-toc-section\" id=\"Nasil_Calisir\"><\/span><strong>Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>SSR\u2019nin <\/strong>\u00e7al\u0131\u015fma mant\u0131\u011f\u0131n\u0131 ad\u0131mlarla inceleyelim:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Kullan\u0131c\u0131 Talebi<\/strong>: Kullan\u0131c\u0131 bir URL\u2019yi ziyaret etti\u011finde, taray\u0131c\u0131 sunucuya bir istek g\u00f6nderir.<\/li>\n\n\n\n<li><strong>Sunucu \u0130\u015flemleri<\/strong>: Sunucu, bu iste\u011fi al\u0131r ve ilgili verileri (API\u2019ler, veritaban\u0131 sorgular\u0131) \u00e7eker. Ard\u0131ndan, JavaScript kodunu \u00e7al\u0131\u015ft\u0131rarak dinamik <strong>HTML <\/strong>i\u00e7eri\u011fini olu\u015fturur.<\/li>\n\n\n\n<li><strong>HTML Olu\u015fturma<\/strong>: Sunucu, t\u00fcm verileri ve bile\u015fenleri birle\u015ftirerek tamamlanm\u0131\u015f bir <strong>HTML <\/strong>dosyas\u0131 haz\u0131rlar.<\/li>\n\n\n\n<li><strong>\u0130stemciye G\u00f6nderme<\/strong>: Olu\u015fturulan <strong>HTML<\/strong>, taray\u0131c\u0131ya g\u00f6nderilir. Kullan\u0131c\u0131, sayfay\u0131 an\u0131nda g\u00f6r\u00fcnt\u00fcleyebilir.<\/li>\n\n\n\n<li><strong>Hydration (Canland\u0131rma)<\/strong>: <strong>HTML <\/strong>y\u00fcklendikten sonra, taray\u0131c\u0131 JavaScript\u2019i indirir ve \u00e7al\u0131\u015ft\u0131r\u0131r. Bu a\u015famada, sayfa dinamik etkile\u015fimler (t\u0131klama, form g\u00f6nderme) i\u00e7in haz\u0131r hale gelir.<\/li>\n<\/ol>\n\n\n\n<p>Bu s\u00fcre\u00e7te, kullan\u0131c\u0131&nbsp;<strong>bo\u015f bir sayfa<\/strong>&nbsp;yerine anlaml\u0131 bir i\u00e7erik g\u00f6r\u00fcr. \u00d6rne\u011fin, bir blog sitesinde makale metni hemen y\u00fcklenirken, yorumlar veya &#8220;be\u011fen&#8221; butonlar\u0131 gibi etkile\u015fimli \u00f6\u011feler sonradan aktif olur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/blog.markergroupe.com\/wp-content\/uploads\/2025\/05\/Server-Side-Rendering-SSR-Nedir-ve-Nasil-Calisir-1024x489.webp\" alt=\"\" class=\"wp-image-41192\" style=\"width:680px;height:auto\" title=\"\" srcset=\"https:\/\/blog.markergroupe.com\/wp-content\/uploads\/2025\/05\/Server-Side-Rendering-SSR-Nedir-ve-Nasil-Calisir-1024x489.webp 1024w, https:\/\/blog.markergroupe.com\/wp-content\/uploads\/2025\/05\/Server-Side-Rendering-SSR-Nedir-ve-Nasil-Calisir-300x143.webp 300w, https:\/\/blog.markergroupe.com\/wp-content\/uploads\/2025\/05\/Server-Side-Rendering-SSR-Nedir-ve-Nasil-Calisir-768x367.webp 768w, https:\/\/blog.markergroupe.com\/wp-content\/uploads\/2025\/05\/Server-Side-Rendering-SSR-Nedir-ve-Nasil-Calisir.webp 1230w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"avantajlari\"><span class=\"ez-toc-section\" id=\"Avantajlari\"><\/span>Avantajlar\u0131<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>H\u0131zl\u0131 \u0130lk Y\u00fckleme<\/strong>: Kullan\u0131c\u0131, i\u00e7eri\u011fi an\u0131nda g\u00f6r\u00fcnt\u00fcler, bu da \u00f6zellikle yava\u015f internet ba\u011flant\u0131lar\u0131nda kritiktir.<\/li>\n\n\n\n<li><strong>SEO Dostu<\/strong>: Arama motoru botlar\u0131, sunucudan gelen <strong>HTML\u2019i <\/strong>kolayca tarayabilir. Bu, SPA\u2019larda (Single Page Application) ya\u015fanan <strong>SEO <\/strong>sorunlar\u0131n\u0131 \u00e7\u00f6zer.<\/li>\n\n\n\n<li><strong>Eri\u015filebilirlik<\/strong>: JavaScript\u2019in devre d\u0131\u015f\u0131 kald\u0131\u011f\u0131 durumlarda bile temel i\u00e7erik g\u00f6r\u00fcnt\u00fclenebilir.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dezavantajlari\"><span class=\"ez-toc-section\" id=\"Dezavantajlari\"><\/span>Dezavantajlar\u0131<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sunucu Y\u00fck\u00fc<\/strong>: Her istekte <strong>HTML <\/strong>olu\u015fturmak, sunucu kaynaklar\u0131n\u0131 daha fazla t\u00fcketir.<\/li>\n\n\n\n<li><strong>Karma\u015f\u0131kl\u0131k<\/strong>: <strong>SSR <\/strong>i\u00e7in Next.js (React), Nuxt.js (Vue) gibi framework\u2019ler kullan\u0131lsa bile, yap\u0131land\u0131rma ve optimizasyon ek efor gerektirebilir.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ne-zaman-kullanilmali\"><span class=\"ez-toc-section\" id=\"Ne_Zaman_Kullanilmali\"><\/span>Ne Zaman Kullan\u0131lmal\u0131?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><strong>SSR<\/strong>,\u00a0i\u00e7erik a\u011f\u0131rl\u0131kl\u0131 siteler\u00a0(haber, blog, e-ticaret) veya\u00a0<strong>SEO odakl\u0131 projeler<\/strong>\u00a0i\u00e7in idealdir. Ancak, \u00e7ok fazla kullan\u0131c\u0131 etkile\u015fimi gerektiren uygulamalarda (dashboard\u2019lar, ara\u00e7lar) Client-Side Rendering (CSR) daha uygun olabilir.<\/p>\n\n\n\n<p><strong>SSR<\/strong>, modern web geli\u015ftirmede dengeyi sa\u011flayan bir tekniktir. Performans ve <strong>SEO <\/strong>avantajlar\u0131na kar\u015f\u0131l\u0131k, do\u011fru senaryolarda kullan\u0131ld\u0131\u011f\u0131nda kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. Framework\u2019lerin sundu\u011fu ara\u00e7larla entegrasyonu kolayla\u015fsa da, proje gereksinimlerine g\u00f6re <strong>SSR\u2019nin <\/strong>avantaj ve dezavantajlar\u0131 dikkatlice de\u011ferlendirilmelidir.<\/p>\n\n\n\n<p><strong><em>Marker Groupe\u2019un geli\u015ftirme hizmetleri hakk\u0131nda bilgi edinmek i\u00e7in bizimle\u00a0<a href=\"https:\/\/www.markergroupe.com\/tr\/iletisim\">MarkerGroupe.com<\/a>\u00a0web sitesi veya hello@markergroupe.com e-posta adresi \u00fczerinden ileti\u015fime ge\u00e7ebilirsiniz.<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini optimize etmek ve performans\u0131 art\u0131rmak i\u00e7in farkl\u0131 render teknikleri kullan\u0131l\u0131r. Bunlardan biri olan\u00a0Server-Side Rendering (SSR), sunucu taraf\u0131nda HTML\u2019in olu\u015fturulup istemciye (taray\u0131c\u0131ya) g\u00f6nderilmesi s\u00fcrecini ifade eder. Peki SSR tam olarak nedir, nas\u0131l \u00e7al\u0131\u015f\u0131r ve neden \u00f6nemlidir? SSR Nedir? SSR, bir web sayfas\u0131n\u0131n HTML i\u00e7eri\u011finin sunucu taraf\u0131nda olu\u015fturulmas\u0131 ve bu haz\u0131r HTML\u2019in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":41192,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","footnotes":""},"categories":[1477],"tags":[1495,1227,2455],"class_list":["post-41191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-yazilim","tag-dijital-pazarlama","tag-seo","tag-ssr"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/posts\/41191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/comments?post=41191"}],"version-history":[{"count":0,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/posts\/41191\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/media\/41192"}],"wp:attachment":[{"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/media?parent=41191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/categories?post=41191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/tags?post=41191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}