{"id":39130,"date":"2026-02-15T03:40:53","date_gmt":"2026-02-15T00:40:53","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=39130"},"modified":"2026-02-15T03:40:53","modified_gmt":"2026-02-15T00:40:53","slug":"nuxt-js-kullanarak-sunucu-tarafli-olusturmaya-ssr-baslangic","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/nuxt-js-kullanarak-sunucu-tarafli-olusturmaya-ssr-baslangic\/","title":{"rendered":"Nuxt.js Kullanarak Sunucu Tarafl\u0131 Olu\u015fturmaya (SSR) Ba\u015flang\u0131\u00e7"},"content":{"rendered":"

<\/p>\n

Nuxt.js Kullanarak Sunucu Tarafl\u0131 Olu\u015fturmaya (SSR) Ba\u015flang\u0131\u00e7<\/h2>\n

Web geli\u015ftirme d\u00fcnyas\u0131, kullan\u0131c\u0131 deneyimini, arama motoru optimizasyonunu (SEO) ve performans\u0131 art\u0131rmak i\u00e7in s\u00fcrekli yeni y\u00f6ntemler sunmaktad\u0131r. Bu y\u00f6ntemlerden biri de Sunucu Tarafl\u0131 Olu\u015fturma (Server-Side Rendering – SSR) olarak \u00f6ne \u00e7\u0131kmaktad\u0131r. \u00d6zellikle modern JavaScript \u00e7er\u00e7eveleri (frameworks) ile geli\u015ftirilen tek sayfa uygulamalar\u0131n\u0131n (Single Page Applications – SPAs) kar\u015f\u0131la\u015ft\u0131\u011f\u0131 baz\u0131 zorluklara \u00e7\u00f6z\u00fcm sunan SSR, web uygulamalar\u0131n\u0131n hem kullan\u0131c\u0131lar hem de arama motorlar\u0131 i\u00e7in daha eri\u015filebilir ve h\u0131zl\u0131 olmas\u0131n\u0131 sa\u011flar. Bu makalede, SSR kavram\u0131n\u0131 derinlemesine inceleyecek, Nuxt.js gibi g\u00fc\u00e7l\u00fc bir Vue.js \u00e7er\u00e7evesi kullanarak SSR uygulamalar\u0131 geli\u015ftirmeye nas\u0131l ba\u015flayaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m ele alacak ve bu s\u00fcrecin inceliklerini ke\u015ffedece\u011fiz.<\/p>\n

Sunucu Tarafl\u0131 Olu\u015fturma (SSR) Nedir ve Neden \u00d6nemlidir?<\/h3>\n

Web sitelerinin i\u00e7eri\u011finin taray\u0131c\u0131da g\u00f6r\u00fcnt\u00fclenme \u015feklini belirleyen \u00e7e\u015fitli olu\u015fturma stratejileri bulunmaktad\u0131r. Geleneksel olarak, dinamik i\u00e7erik sunan web siteleri genellikle sunucu tarafl\u0131 olu\u015fturma kullan\u0131rd\u0131; sunucu, her istekte tam HTML sayfas\u0131n\u0131 olu\u015fturur ve taray\u0131c\u0131ya g\u00f6nderirdi. Modern web geli\u015ftirmeyle birlikte, \u0130stemci Tarafl\u0131 Olu\u015fturma (Client-Side Rendering – CSR) pop\u00fclerlik kazand\u0131. CSR’da, taray\u0131c\u0131 sunucudan bo\u015f bir HTML dosyas\u0131 ve JavaScript paketi al\u0131r, ard\u0131ndan JavaScript \u00e7al\u0131\u015farak i\u00e7eri\u011fi taray\u0131c\u0131da olu\u015fturur. Bu yakla\u015f\u0131m, zengin ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in harikayd\u0131, ancak beraberinde baz\u0131 sorunlar\u0131 da getirdi.<\/p>\n

SSR ve CSR Kar\u015f\u0131la\u015ft\u0131rmas\u0131<\/h4>\n

\u0130stemci Tarafl\u0131 Olu\u015fturma (CSR):<\/strong>
\n* Nas\u0131l \u00c7al\u0131\u015f\u0131r:<\/strong> Taray\u0131c\u0131, sunucudan minimum d\u00fczeyde HTML (genellikle sadece bir div<\/code> etiketi) ve uygulaman\u0131n JavaScript kodunu al\u0131r. JavaScript indirildikten ve y\u00fcr\u00fct\u00fcld\u00fckten sonra, sayfan\u0131n t\u00fcm i\u00e7eri\u011fi taray\u0131c\u0131da olu\u015fturulur.
\n* Avantajlar\u0131:<\/strong> Uygulama bir kez y\u00fcklendikten sonra, sonraki sayfa ge\u00e7i\u015fleri h\u0131zl\u0131d\u0131r \u00e7\u00fcnk\u00fc yaln\u0131zca veri \u00e7ekilir ve DOM g\u00fcncellenir. Zengin ve dinamik kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak kolayd\u0131r.
\n* Dezavantajlar\u0131:<\/strong>
\n * \u0130lk Y\u00fckleme S\u00fcresi:<\/strong> Kullan\u0131c\u0131lar, JavaScript indirilip y\u00fcr\u00fct\u00fclene kadar bo\u015f veya y\u00fckleniyor ekran\u0131 g\u00f6r\u00fcrler. Bu durum, yava\u015f internet ba\u011flant\u0131lar\u0131nda veya b\u00fcy\u00fck JavaScript paketlerinde k\u00f6t\u00fc bir deneyim yaratabilir.
\n * SEO Zorluklar\u0131:<\/strong> Arama motoru \u00f6r\u00fcmcekleri (crawlers), JavaScript’i y\u00fcr\u00fctme yetene\u011fine sahip olsalar da, sayfan\u0131n i\u00e7eri\u011finin hemen HTML’de bulunmamas\u0131 indeksleme s\u00fcrecini yava\u015flatabilir veya engelleyebilir. Bu da SEO performans\u0131n\u0131 olumsuz etkileyebilir.
\n * Performans:<\/strong> D\u00fc\u015f\u00fck performansl\u0131 cihazlarda veya zay\u0131f a\u011f ko\u015fullar\u0131nda, JavaScript’in y\u00fcr\u00fct\u00fclmesi ve sayfan\u0131n olu\u015fturulmas\u0131 daha uzun s\u00fcrebilir.<\/p>\n

Sunucu Tarafl\u0131 Olu\u015fturma (SSR):<\/strong>
\n* Nas\u0131l \u00c7al\u0131\u015f\u0131r:<\/strong> Her istekte, sunucu uygulaman\u0131n Vue veya React bile\u015fenlerini HTML dizgelerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve taray\u0131c\u0131ya tam olarak olu\u015fturulmu\u015f bir HTML sayfas\u0131 g\u00f6nderir. Taray\u0131c\u0131 bu HTML’i hemen g\u00f6r\u00fcnt\u00fcleyebilir. Ard\u0131ndan, istemci tarafl\u0131 JavaScript y\u00fcklenir ve “hidrasyon” (hydration) ad\u0131 verilen bir s\u00fcre\u00e7le etkile\u015fimli hale gelir.
\n* Avantajlar\u0131:<\/strong>
\n * Daha H\u0131zl\u0131 \u0130lk Y\u00fckleme:<\/strong> Kullan\u0131c\u0131lar, sayfan\u0131n i\u00e7eri\u011fini hemen g\u00f6r\u00fcrler, bu da alg\u0131lanan performans\u0131 art\u0131r\u0131r. Bo\u015f ekran bekleme s\u00fcresi ortadan kalkar.
\n * Geli\u015fmi\u015f SEO:<\/strong> Arama motoru \u00f6r\u00fcmcekleri, tam olu\u015fturulmu\u015f HTML’i do\u011frudan al\u0131rlar, bu da i\u00e7eri\u011fin daha kolay ve do\u011fru bir \u015fekilde indekslenmesini sa\u011flar. Bu, arama motoru s\u0131ralamalar\u0131 i\u00e7in kritik \u00f6neme sahiptir.
\n * Daha \u0130yi Kullan\u0131c\u0131 Deneyimi:<\/strong> \u00d6zellikle yava\u015f internet ba\u011flant\u0131lar\u0131na sahip veya eski cihaz kullanan kullan\u0131c\u0131lar i\u00e7in daha h\u0131zl\u0131 ve tutarl\u0131 bir deneyim sunar.
\n * Daha \u0130yi Eri\u015filebilirlik:<\/strong> JavaScript devre d\u0131\u015f\u0131 b\u0131rak\u0131lm\u0131\u015f taray\u0131c\u0131larda bile temel i\u00e7eri\u011fin eri\u015filebilir olmas\u0131n\u0131 sa\u011flar (ancak etkile\u015fimli olmayabilir).
\n* Dezavantajlar\u0131:<\/strong>
\n * Daha Karma\u015f\u0131k Sunucu Y\u00fck\u00fc:<\/strong> Her istekte sayfan\u0131n sunucuda olu\u015fturulmas\u0131 gerekti\u011finden, sunucu kaynaklar\u0131 daha fazla kullan\u0131l\u0131r. Bu, y\u00fcksek trafikli uygulamalar i\u00e7in ek sunucu kapasitesi gerektirebilir.
\n * Daha Karma\u015f\u0131k Geli\u015ftirme S\u00fcreci:<\/strong> \u0130stemci ve sunucu ortamlar\u0131 aras\u0131nda uyumluluk sorunlar\u0131, durum y\u00f6netimi ve veri \u00e7ekme gibi konularda ek dikkat gerektirebilir.
\n * Artan \u0130lk Sunucu Yan\u0131t S\u00fcresi (TTFB):<\/strong> Sunucunun HTML’i olu\u015fturup g\u00f6ndermesi i\u00e7in ge\u00e7en s\u00fcre, bo\u015f bir HTML g\u00f6ndermekten daha uzun olabilir. Ancak bu s\u00fcre genellikle JavaScript’in indirilip \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131na k\u0131yasla daha h\u0131zl\u0131 alg\u0131lan\u0131r.<\/p>\n

\u00d6zetle, SSR, uygulaman\u0131n ilk y\u00fckleme performans\u0131n\u0131 ve SEO’sunu \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirme potansiyeline sahiptir. Nuxt.js gibi \u00e7er\u00e7eveler, bu karma\u015f\u0131kl\u0131\u011f\u0131 soyutlayarak geli\u015ftiricilerin SSR’nin avantajlar\u0131ndan kolayca yararlanmas\u0131n\u0131 sa\u011flar.<\/p>\n

Nuxt.js’e Giri\u015f: Vue.js ile SSR’yi Kolayla\u015ft\u0131rmak<\/h3>\n

Nuxt.js, Vue.js ekosisteminde, \u00f6zellikle SSR ve statik site olu\u015fturma (SSG) konular\u0131nda geli\u015ftiricilerin hayat\u0131n\u0131 kolayla\u015ft\u0131rmak i\u00e7in tasarlanm\u0131\u015f a\u00e7\u0131k kaynakl\u0131, sezgisel bir \u00e7er\u00e7evedir. Vue.js \u00fczerine in\u015fa edilmi\u015f olup, bir dizi g\u00fc\u00e7l\u00fc \u00f6zellik ve konvansiyon sunarak geli\u015ftiricilerin h\u0131zl\u0131 bir \u015fekilde karma\u015f\u0131k web uygulamalar\u0131 olu\u015fturmas\u0131na olanak tan\u0131r. Nuxt.js, “meta \u00e7er\u00e7eve” olarak adland\u0131r\u0131l\u0131r \u00e7\u00fcnk\u00fc Vue.js’in \u00fczerine bir soyutlama katman\u0131 ekleyerek, dosya tabanl\u0131 y\u00f6nlendirme, veri \u00e7ekme stratejileri, durum y\u00f6netimi entegrasyonu ve daha fazlas\u0131 gibi bir\u00e7ok yayg\u0131n g\u00f6revi \u00f6nceden yap\u0131land\u0131r\u0131lm\u0131\u015f bir \u015fekilde sunar.<\/p>\n

Neden Nuxt.js Kullanmal\u0131y\u0131z?<\/h4>\n

1. S\u0131f\u0131r Yap\u0131land\u0131rma ile SSR:<\/strong> Nuxt.js’in en b\u00fcy\u00fck avantaj\u0131, SSR’yi varsay\u0131lan olarak desteklemesidir. Geli\u015ftiricilerin Webpack veya Babel gibi ara\u00e7larla karma\u015f\u0131k yap\u0131land\u0131rmalarla u\u011fra\u015fmas\u0131na gerek kalmadan, tek bir komutla SSR \u00f6zellikli bir Vue uygulamas\u0131 ba\u015flatabilirler.
\n2. Dosya Sistemi Tabanl\u0131 Y\u00f6nlendirme:<\/strong> Nuxt.js, pages<\/code> dizininizdeki Vue dosyalar\u0131n\u0131n yap\u0131s\u0131na g\u00f6re otomatik olarak Vue Router rotalar\u0131n\u0131 olu\u015fturur. Bu, rotalar\u0131 manuel olarak tan\u0131mlama ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r.
\n3. Veri \u00c7ekme Kolayl\u0131\u011f\u0131:<\/strong> Nuxt.js, bile\u015fenlerinizde veya sayfalar\u0131n\u0131zda sunucu taraf\u0131nda veri \u00e7ekmek i\u00e7in \u00f6zel y\u00f6ntemler (useAsyncData<\/code>, useFetch<\/code>) sunar. Bu, verilerin sayfa olu\u015fturulmadan \u00f6nce haz\u0131r olmas\u0131n\u0131 sa\u011flar ve hidrasyon sorunlar\u0131n\u0131 minimize eder.
\n4. Otomatik Kod B\u00f6lme (Code Splitting):<\/strong> Her sayfa i\u00e7in otomatik olarak kod b\u00f6lme yapar, bu da uygulaman\u0131n sadece o sayfa i\u00e7in gerekli JavaScript’i y\u00fcklemesini sa\u011flayarak performans\u0131 art\u0131r\u0131r.
\n5. Katmanl\u0131 Yap\u0131 (Layers):<\/strong> Nuxt 3 ile gelen katmanlar \u00f6zelli\u011fi, birden fazla Nuxt projesini veya mod\u00fcl\u00fc bir araya getirerek daha mod\u00fcler ve yeniden kullan\u0131labilir uygulamalar olu\u015fturmay\u0131 sa\u011flar.
\n6. Geli\u015ftirici Deneyimi (DX):<\/strong> Nuxt.js, iyi belgelenmi\u015f, aktif bir toplulu\u011fa sahip ve bir\u00e7ok kullan\u0131\u015fl\u0131 mod\u00fcl (mod\u00fcller) ile geni\u015fletilebilir. Bu, geli\u015ftiricilerin sorunlar\u0131 \u00e7\u00f6zmesini ve yeni \u00f6zellikler eklemesini kolayla\u015ft\u0131r\u0131r.
\n7. \u00c7e\u015fitli Olu\u015fturma Modlar\u0131:<\/strong> SSR’nin yan\u0131 s\u0131ra, Nuxt.js statik site olu\u015fturma (SSG) ve istemci taraf\u0131 olu\u015fturma (SPA) modlar\u0131n\u0131 da destekler. Bu esneklik, projenizin gereksinimlerine en uygun olu\u015fturma stratejisini se\u00e7menize olanak tan\u0131r.<\/p>\n

Nuxt.js, Vue.js’in g\u00fcc\u00fcn\u00fc al\u0131p, modern web uygulamalar\u0131n\u0131n geli\u015ftirilmesi i\u00e7in gerekli olan bir\u00e7ok karma\u015f\u0131k altyap\u0131sal konuyu soyutlayarak geli\u015ftiricilere odaklanmalar\u0131 gereken as\u0131l i\u015fe, yani kullan\u0131c\u0131 aray\u00fcz\u00fc ve i\u015f mant\u0131\u011f\u0131na odaklanma f\u0131rsat\u0131 verir. \u00d6zellikle Nuxt 3, Vue 3, Vite ve Nitro gibi modern ara\u00e7larla birlikte gelerek daha h\u0131zl\u0131 geli\u015ftirme, daha k\u00fc\u00e7\u00fck paket boyutlar\u0131 ve daha iyi performans sunar.<\/p>\n

Nuxt.js Projesi Kurulumu<\/h3>\n

Nuxt.js ile bir SSR uygulamas\u0131 geli\u015ftirmeye ba\u015flamak olduk\u00e7a basittir. \u0130lk olarak, sisteminizde Node.js ve npm veya Yarn’\u0131n kurulu oldu\u011fundan emin olmal\u0131s\u0131n\u0131z. Nuxt.js’in en son stabil s\u00fcr\u00fcm\u00fc olan Nuxt 3’\u00fc kullanarak kurulumu ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n

\u00d6nko\u015fullar<\/h4>\n

* Node.js:<\/strong> En az Node.js 16.x veya daha yenisi (LTS s\u00fcr\u00fcm\u00fc \u00f6nerilir). node -v<\/code> komutu ile kontrol edebilirsiniz.
\n* npm veya Yarn:<\/strong> Node.js ile birlikte gelir. npm -v<\/code> veya yarn -v<\/code> ile kontrol edebilirsiniz.<\/p>\n

Proje Olu\u015fturma<\/h4>\n

Terminalinizde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131rarak yeni bir Nuxt 3 projesi olu\u015fturabilirsiniz:<\/p>\n

npx nuxi init nuxt3-ssr-app<\/code><\/pre>\n
*   npx nuxi init<\/code>: Nuxt.js 3 projeleri olu\u015fturmak i\u00e7in kullan\u0131lan komuttur.
\n*   nuxt3-ssr-app<\/code>: Projenizin ad\u0131. \u0130stedi\u011finiz ismi verebilirsiniz.<\/p>\n
Bu komut \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda, Nuxt.js gerekli dosyalar\u0131 ve ba\u011f\u0131ml\u0131l\u0131klar\u0131 indirip yap\u0131land\u0131racakt\u0131r. \u0130\u015flem tamamland\u0131\u011f\u0131nda, proje dizininize ge\u00e7in:<\/p>\n
cd nuxt3-ssr-app<\/code><\/pre>\n
Ard\u0131ndan, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyin:<\/p>\n
npm install # veya yarn install<\/code><\/pre>\n
Son olarak, geli\u015ftirme sunucusunu ba\u015flat\u0131n:<\/p>\n
npm run dev # veya yarn dev<\/code><\/pre>\n
Bu komut, uygulaman\u0131z\u0131 geli\u015ftirme modunda ba\u015flat\u0131r. Taray\u0131c\u0131n\u0131zda http:\/\/localhost:3000<\/code> adresine giderek Nuxt.js ba\u015flang\u0131\u00e7 sayfas\u0131n\u0131 g\u00f6rmelisiniz.<\/p>\n
Proje Yap\u0131s\u0131<\/h4>\n
Yeni olu\u015fturulan Nuxt.js projesinin temel dizin yap\u0131s\u0131 a\u015fa\u011f\u0131daki gibidir:<\/p>\n
nuxt3-ssr-app\/\n\u251c\u2500\u2500 .nuxt\/             # Nuxt.js taraf\u0131ndan olu\u015fturulan ge\u00e7ici dosyalar\n\u251c\u2500\u2500 .output\/           # \u00dcretim i\u00e7in derlenmi\u015f \u00e7\u0131kt\u0131 (build)\n\u251c\u2500\u2500 assets\/            # CSS, resimler, fontlar gibi statik varl\u0131klar\n\u251c\u2500\u2500 components\/        # Yeniden kullan\u0131labilir Vue bile\u015fenleri\n\u251c\u2500\u2500 composables\/       # Vue 3 Composition API i\u00e7in \u00f6zel hook'lar\n\u251c\u2500\u2500 layouts\/           # Uygulaman\u0131z\u0131n d\u00fczenleri (\u00f6r. default.vue)\n\u251c\u2500\u2500 middleware\/        # Rota ba\u015f\u0131na \u00e7al\u0131\u015fan ara yaz\u0131l\u0131mlar\n\u251c\u2500\u2500 node_modules\/      # Proje ba\u011f\u0131ml\u0131l\u0131klar\u0131\n\u251c\u2500\u2500 pages\/             # Uygulaman\u0131z\u0131n sayfalar\u0131 (dosya tabanl\u0131 y\u00f6nlendirme)\n\u251c\u2500\u2500 plugins\/           # Vue uygulamas\u0131na global olarak eklenecek eklentiler\n\u251c\u2500\u2500 public\/            # Do\u011frudan sunulan statik dosyalar (root dizini gibi)\n\u251c\u2500\u2500 server\/            # API rotalar\u0131 ve sunucu ara yaz\u0131l\u0131mlar\u0131\n\u251c\u2500\u2500 app.vue            # Uygulaman\u0131z\u0131n ana bile\u015feni\n\u251c\u2500\u2500 nuxt.config.ts     # Nuxt.js yap\u0131land\u0131rma dosyas\u0131\n\u251c\u2500\u2500 package.json       # Proje meta verileri ve ba\u011f\u0131ml\u0131l\u0131klar\u0131\n\u251c\u2500\u2500 tsconfig.json      # TypeScript yap\u0131land\u0131rma dosyas\u0131\n\u2514\u2500\u2500 .env               # Ortam de\u011fi\u015fkenleri<\/code><\/pre>\n
*   pages\/<\/code><\/strong>: Bu dizin, Nuxt.js’in dosya sistemi tabanl\u0131 y\u00f6nlendirme sistemini kulland\u0131\u011f\u0131 yerdir. Her .vue<\/code> dosyas\u0131 bir rota haline gelir. \u00d6rne\u011fin, pages\/index.vue<\/code> ana sayfay\u0131, pages\/about.vue<\/code> \/about<\/code> rotas\u0131n\u0131 temsil eder. Dinamik rotalar i\u00e7in pages\/users\/[id].vue<\/code> gibi yap\u0131lar kullanabilirsiniz.
\n*   components\/<\/code><\/strong>: Uygulaman\u0131zda yeniden kullan\u0131labilir Vue bile\u015fenlerini i\u00e7erir. Nuxt.js, bu bile\u015fenleri otomatik olarak i\u00e7e aktar\u0131r (auto-import), bu da import<\/code> ifadelerini yazma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r.
\n*   layouts\/<\/code><\/strong>: Uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmleri i\u00e7in d\u00fczen \u015fablonlar\u0131 tan\u0131mlar. \u00d6rne\u011fin, bir default.vue<\/code> d\u00fczeni, uygulaman\u0131zdaki t\u00fcm sayfalar i\u00e7in ortak bir ba\u015fl\u0131k ve alt bilgi i\u00e7erebilir.
\n*   public\/<\/code><\/strong>: Do\u011frudan web sunucusu taraf\u0131ndan sunulan statik dosyalar\u0131 (\u00f6rne\u011fin, favicon.ico<\/code>, robots.txt<\/code>) i\u00e7erir. Bu dizindeki dosyalar, uygulaman\u0131n k\u00f6k dizininden eri\u015filebilir.
\n*   app.vue<\/code><\/strong>: Nuxt.js uygulaman\u0131z\u0131n ana bile\u015fenidir. Genellikle <\/code> ve <\/code> bile\u015fenlerini i\u00e7erir.
\n*   nuxt.config.ts<\/code><\/strong>: Nuxt.js uygulaman\u0131z\u0131n ana yap\u0131land\u0131rma dosyas\u0131d\u0131r. Mod\u00fcller, ba\u015fl\u0131k ayarlar\u0131, CSS, \u00e7al\u0131\u015fma zaman\u0131 yap\u0131land\u0131rmas\u0131 ve daha fazlas\u0131n\u0131 burada tan\u0131mlars\u0131n\u0131z.<\/p>\n
Bu yap\u0131, Nuxt.js’in “konvansiyonla yap\u0131land\u0131rma” (convention over configuration) felsefesini yans\u0131t\u0131r ve geli\u015ftiricilerin \u00e7o\u011fu durumda ek yap\u0131land\u0131rma yapmadan h\u0131zl\u0131ca \u00e7al\u0131\u015fmaya ba\u015flamas\u0131n\u0131 sa\u011flar.<\/p>\n
Nuxt.js’te SSR’nin Temel Kavramlar\u0131<\/h3>\n
Nuxt.js, SSR’yi kolayla\u015ft\u0131rmak i\u00e7in bir dizi temel kavram ve ara\u00e7 sunar. Bu kavramlar\u0131 anlamak, Nuxt.js uygulamalar\u0131n\u0131zda veri \u00e7ekme, durum y\u00f6netimi ve performans optimizasyonu gibi konularda do\u011fru kararlar vermenizi sa\u011flar.<\/p>\n
Universal Mod (Varsay\u0131lan)<\/h4>\n
Nuxt.js’in varsay\u0131lan \u00e7al\u0131\u015fma modu “Universal” modudur. Bu, uygulaman\u0131z\u0131n hem sunucu taraf\u0131nda (ilk istekte) hem de istemci taraf\u0131nda (sonraki navigasyonlarda ve etkile\u015fimlerde) \u00e7al\u0131\u015ft\u0131r\u0131labilece\u011fi anlam\u0131na gelir.<\/p>\n
*   Sunucu Taraf\u0131:<\/strong> Bir kullan\u0131c\u0131 ilk kez uygulaman\u0131za eri\u015fti\u011finde veya sayfay\u0131 yeniledi\u011finde, Nuxt.js sunucuda Vue bile\u015fenlerini HTML dizgelerine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu HTML, taray\u0131c\u0131ya g\u00f6nderilir ve kullan\u0131c\u0131 hemen i\u00e7eri\u011fi g\u00f6r\u00fcr.
\n*   \u0130stemci Taraf\u0131:<\/strong> HTML taray\u0131c\u0131ya ula\u015ft\u0131ktan sonra, Nuxt.js istemci tarafl\u0131 JavaScript’i y\u00fckler. Bu JavaScript, sunucudan gelen HTML’i “hidrate” eder, yani HTML’i Vue bile\u015fenleriyle e\u015fle\u015ftirir ve etkile\u015fimli hale getirir. Sonraki navigasyonlar i\u00e7in, Nuxt.js bir SPA gibi davran\u0131r; sayfa ge\u00e7i\u015fleri taray\u0131c\u0131da ger\u00e7ekle\u015fir ve sunucuya tam sayfa iste\u011fi yap\u0131lmaz.<\/p>\n
Bu hibrit yakla\u015f\u0131m, hem SEO ve ilk y\u00fckleme performans\u0131 avantajlar\u0131n\u0131 (SSR) hem de h\u0131zl\u0131 sayfa ge\u00e7i\u015fleri ve zengin etkile\u015fim avantajlar\u0131n\u0131 (CSR) bir araya getirir.<\/p>\n
Veri \u00c7ekme (Data Fetching)<\/h4>\n
SSR uygulamalar\u0131nda veri \u00e7ekme, kritik bir konudur. Verilerin sayfa olu\u015fturulmadan \u00f6nce sunucuda haz\u0131r olmas\u0131 gerekir ki, tam olu\u015fturulmu\u015f HTML taray\u0131c\u0131ya g\u00f6nderilebilsin. Nuxt.js 3, veri \u00e7ekme i\u00e7in modern ve g\u00fc\u00e7l\u00fc bir dizi Composition API i\u015flevi sunar:<\/p>\n
*   useAsyncData<\/code>:<\/strong>
\n    Bu, Nuxt.js’in ana veri \u00e7ekme kompozisyonudur. Bir Vue bile\u015feni veya sayfa y\u00fcklenmeden \u00f6nce sunucuda (veya istemcide) asenkron veri \u00e7ekmek i\u00e7in kullan\u0131l\u0131r. useAsyncData<\/code>, bir anahtar, bir veri \u00e7ekme fonksiyonu ve iste\u011fe ba\u011fl\u0131 se\u00e7enekler al\u0131r.<\/p>\n