G\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, kullan\u0131c\u0131 deneyimi, performans ve arama motoru optimizasyonu (SEO) gibi fakt\u00f6rler a\u00e7\u0131s\u0131ndan beklentileri olduk\u00e7a y\u00fckseltmi\u015ftir. Geleneksel tek sayfa uygulamalar\u0131 (SPA’lar) zengin kullan\u0131c\u0131 deneyimi sunarken, ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcreleri ve SEO konusunda baz\u0131 zorluklarla kar\u015f\u0131la\u015fabilirler. Bu zorluklar\u0131 a\u015fmak i\u00e7in ortaya \u00e7\u0131kan “Evrensel Uygulamalar” (Universal Applications) veya di\u011fer ad\u0131yla “\u0130zomorfik Uygulamalar”, hem istemci taraf\u0131nda (Client-Side Rendering – CSR) hem de sunucu taraf\u0131nda (Server-Side Rendering – SSR) \u00e7al\u0131\u015fabilen, bu iki d\u00fcnyan\u0131n en iyi \u00f6zelliklerini bir araya getiren bir yakla\u015f\u0131md\u0131r.<\/p>\n
Evrensel uygulamalar, ilk sayfa y\u00fcklemesinde i\u00e7eri\u011fi sunucu taraf\u0131nda olu\u015fturarak taray\u0131c\u0131ya g\u00f6nderir. Bu sayede, kullan\u0131c\u0131 daha h\u0131zl\u0131 bir ilk y\u00fckleme deneyimi ya\u015far ve arama motoru botlar\u0131 i\u00e7eri\u011fi kolayca indeksleyebilir. Sayfa y\u00fcklendikten sonra ise uygulama, tam bir SPA gibi davranarak istemci taraf\u0131nda dinamik etkile\u015fimler sunmaya devam eder. Bu hibrit yakla\u015f\u0131m, performans, SEO ve geli\u015ftirici deneyimi a\u00e7\u0131s\u0131ndan \u00f6nemli avantajlar sa\u011flar.<\/p>\n
Bu makalede, modern web geli\u015ftirmenin iki g\u00fc\u00e7l\u00fc arac\u0131 olan Nuxt.js ve Django’yu kullanarak nas\u0131l evrensel bir uygulama geli\u015ftirebilece\u011fimizi ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. Nuxt.js, Vue.js tabanl\u0131, sezgisel ve g\u00fc\u00e7l\u00fc bir evrensel uygulama \u00e7at\u0131s\u0131 olarak \u00f6n plana \u00e7\u0131karken; Django, Python ekosisteminin sa\u011flam, g\u00fcvenli ve \u00f6l\u00e7eklenebilir bir web \u00e7at\u0131s\u0131 olarak arka u\u00e7 (backend) API ihtiya\u00e7lar\u0131m\u0131z\u0131 kar\u015f\u0131layacakt\u0131r. Bu iki teknolojinin birle\u015fimi, hem geli\u015ftirme verimlili\u011fi hem de nihai \u00fcr\u00fcn kalitesi a\u00e7\u0131s\u0131ndan m\u00fckemmel bir sinerji yarat\u0131r.<\/p>\n
Bir evrensel uygulama geli\u015ftirirken, frontend ve backend aras\u0131ndaki ayr\u0131m\u0131 ve her bir bile\u015fenin rol\u00fcn\u00fc iyi anlamak kritik \u00f6neme sahiptir.<\/p>\n
Nuxt.js, Vue.js ekosisteminde evrensel uygulamalar olu\u015fturmak i\u00e7in tasarlanm\u0131\u015f, a\u00e7\u0131k kaynakl\u0131 ve sezgisel bir framework’t\u00fcr. Temel olarak, Nuxt.js bize \u00fc\u00e7 ana renderlama stratejisi sunar:<\/p>\n
* Client-Side Rendering (CSR):<\/strong> Geleneksel SPA yakla\u015f\u0131m\u0131d\u0131r. Taray\u0131c\u0131ya bo\u015f bir HTML dosyas\u0131 ve JavaScript paketi g\u00f6nderilir. JavaScript y\u00fcklendikten sonra i\u00e7eri\u011fi taray\u0131c\u0131da olu\u015fturur ve g\u00f6sterir. Dinamik etkile\u015fimler i\u00e7in harikad\u0131r ancak ilk y\u00fckleme s\u00fcresi ve SEO i\u00e7in zorluklar yaratabilir. Nuxt.js, bu renderlama stratejilerini y\u00f6netmekle kalmaz, ayn\u0131 zamanda dosya tabanl\u0131 y\u00f6nlendirme (file-system routing), durum y\u00f6netimi (Vuex), meta etiket y\u00f6netimi, kod b\u00f6lme (code splitting) ve otomatik kod transpilasyonu gibi bir\u00e7ok \u00f6zelli\u011fi de haz\u0131r olarak sunar. Bu sayede geli\u015ftiriciler, altyap\u0131 detaylar\u0131yla u\u011fra\u015fmak yerine do\u011frudan uygulama mant\u0131\u011f\u0131na odaklanabilirler.<\/p>\n Evrensel bir uygulaman\u0131n backend’i, frontend’e veri sa\u011flayan bir API g\u00f6revi g\u00f6r\u00fcr. Django, Python tabanl\u0131, “pil dahil” felsefesiyle bilinen, y\u00fcksek seviyeli bir web \u00e7at\u0131s\u0131d\u0131r. G\u00fc\u00e7l\u00fc ORM’i, y\u00f6netici paneli, kimlik do\u011frulama sistemi ve g\u00fcvenlik \u00f6zellikleriyle h\u0131zl\u0131 ve g\u00fcvenli API’ler geli\u015ftirmek i\u00e7in ideal bir platformdur.<\/p>\n Bu mimaride Django’nun rol\u00fc \u015funlard\u0131r: Django tek ba\u015f\u0131na bir “evrensel” uygulama \u00e7at\u0131s\u0131 de\u011fildir; geleneksel olarak sunucu taraf\u0131nda HTML render eden bir yap\u0131ya sahiptir. Ancak, Django REST Framework (DRF) gibi g\u00fc\u00e7l\u00fc eklentilerle birle\u015fti\u011finde, modern, ayr\u0131k (decoupled) bir frontend ile \u00e7al\u0131\u015facak RESTful API’ler olu\u015fturmak i\u00e7in m\u00fckemmel bir se\u00e7im haline gelir.<\/p>\n Nuxt.js projesini ba\u015flatmak ve temel bile\u015fenlerini anlamak, evrensel uygulaman\u0131n frontend taraf\u0131n\u0131 olu\u015fturman\u0131n ilk ad\u0131m\u0131d\u0131r.<\/p>\n Yeni bir Nuxt.js projesi olu\u015fturmak olduk\u00e7a basittir:<\/p>\n Bu komut, size baz\u0131 sorular soracakt\u0131r (paket y\u00f6neticisi, UI framework, server-side framework, linter vb.). Se\u00e7imlerinizi yapt\u0131ktan sonra, Nuxt.js otomatik olarak bir proje yap\u0131s\u0131 olu\u015fturur:<\/p>\n * Evrensel uygulamalarda veri \u00e7ekme, hem sunucu hem de istemci taraf\u0131nda ger\u00e7ekle\u015febilece\u011fi i\u00e7in \u00f6zel bir \u00f6nem ta\u015f\u0131r. Nuxt.js, bu konuda \u00e7e\u015fitli y\u00f6ntemler sunar:<\/p>\n * Evrensel uygulamalar\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan biri SEO performans\u0131d\u0131r. Nuxt.js, her sayfa i\u00e7in dinamik meta etiketleri ve ba\u015fl\u0131klar tan\u0131mlaman\u0131za olanak tan\u0131r.<\/p>\n Bu Nuxt.js, Vuex’i entegre bir \u015fekilde sunar. Nuxt.js’in Django, sa\u011flam ve g\u00fcvenli bir API backend’i olu\u015fturmak i\u00e7in m\u00fckemmel bir temel sa\u011flar. Django REST Framework (DRF) ile bu yetenekler daha da art\u0131r\u0131l\u0131r.<\/p>\n Django, Python ile yaz\u0131lm\u0131\u015f, h\u0131zl\u0131 geli\u015ftirme ve temiz, pragmatik bir tasar\u0131m sunan y\u00fcksek seviyeli bir web \u00e7at\u0131s\u0131d\u0131r. “Piller dahil” felsefesi, bir\u00e7ok yayg\u0131n web geli\u015ftirme g\u00f6revini (ORM, kimlik do\u011frulama, y\u00f6netici paneli, URL y\u00f6nlendirme vb.) haz\u0131r \u00e7\u00f6z\u00fcmlerle gelmesini sa\u011flar. Bu \u00f6zellikler, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k API’ler olu\u015ftururken geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r ve g\u00fcvenli\u011fi art\u0131r\u0131r.<\/p>\n Django REST Framework, Django \u00fczerinde g\u00fc\u00e7l\u00fc ve esnek Web API’leri olu\u015fturmak i\u00e7in kullan\u0131lan bir ara\u00e7 tak\u0131m\u0131d\u0131r. DRF, serile\u015ftiriciler (serializers), g\u00f6r\u00fcn\u00fcm k\u00fcmeleri (viewsets), kimlik do\u011frulama ve yetkilendirme s\u0131n\u0131flar\u0131, API taray\u0131c\u0131s\u0131 gibi bir\u00e7ok kullan\u0131\u015fl\u0131 \u00f6zellik sunar. Bu sayede, veri modelinizi API’ye d\u00f6n\u00fc\u015ft\u00fcrmek, istekleri i\u015flemek ve yan\u0131tlar\u0131 bi\u00e7imlendirmek olduk\u00e7a kolayla\u015f\u0131r.<\/p>\n Yeni bir Django projesi olu\u015fturduktan sonra DRF’yi kurun:<\/p>\n DRF’nin temel yap\u0131 ta\u015flar\u0131 \u015funlard\u0131r:<\/p>\n 1. Model:<\/strong> Django’nun ORM’i ile veritaban\u0131 \u015feman\u0131z\u0131 tan\u0131mlars\u0131n\u0131z.<\/p>\n 2. Serializer:<\/strong> Python nesnelerini JSON\/XML gibi formatlara d\u00f6n\u00fc\u015ft\u00fcrmek ve tersine \u00e7evirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n 3. Viewset:<\/strong> CRUD (Olu\u015fturma, Okuma, G\u00fcncelleme, Silme) i\u015flemlerini tek bir s\u0131n\u0131f alt\u0131nda birle\u015ftirir.<\/p>\n 4. URL Yap\u0131lar\u0131:<\/strong> Viewset’leri URL’lere ba\u011flamak i\u00e7in DRF’nin router’\u0131n\u0131 kullan\u0131n.<\/p>\n SPA ve evrensel uygulamalarda, oturum tabanl\u0131 kimlik do\u011frulama yerine genellikle Token tabanl\u0131 (\u00f6zellikle JWT – JSON Web Tokens) kimlik do\u011frulama tercih edilir. DRF i\u00e7in Bu u\u00e7 noktalar arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131lar kullan\u0131c\u0131 ad\u0131\/\u015fifre ile Frontend (Nuxt.js) ve backend (Django) farkl\u0131 domainlerde veya portlarda \u00e7al\u0131\u015ft\u0131\u011f\u0131nda taray\u0131c\u0131lar “Cross-Origin Resource Sharing” (CORS) politikalar\u0131 nedeniyle istekleri engelleyebilir. Frontend ve backend’in birbirleriyle nas\u0131l ileti\u015fim kurdu\u011funu anlamak, evrensel uygulaman\u0131n kalbidir.<\/p>\n Nuxt.js uygulamas\u0131nda, Kimlik Do\u011frulama ile \u0130stekler:<\/strong> Kullan\u0131c\u0131 giri\u015fi yapt\u0131ktan sonra al\u0131nan JWT Bu eklentiyi Nuxt.js’in Vuex entegrasyonu, kullan\u0131c\u0131 kimlik do\u011frulama durumu, global ayarlar veya s\u0131k kullan\u0131lan veriler gibi payla\u015f\u0131lan verileri y\u00f6netmek i\u00e7in idealdir. \u00d6rne\u011fin, kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, JWT token’lar\u0131 ve kullan\u0131c\u0131 bilgileri Vuex store’a kaydedilir. Bu sayede, uygulaman\u0131n herhangi bir bile\u015feni bu bilgilere kolayca eri\u015febilir.<\/p>\n * JWT G\u00fcvenli\u011fi:<\/strong> Evrensel bir uygulaman\u0131n da\u011f\u0131t\u0131m\u0131, hem frontend (Nuxt.js) hem de backend (Django) bile\u015fenlerinin ayr\u0131 ayr\u0131 ancak koordineli bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 gerektirir.<\/p>\n Nuxt.js uygulamas\u0131 * SSR (Node.js Sunucusu):<\/strong> Nuxt.js, kendi Node.js sunucusunu kullanarak SSR yapabilir. Bu sunucu genellikle PM2 gibi bir s\u00fcre\u00e7 y\u00f6neticisi ile \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r ve Nginx gibi bir ters proxy \u00f6n\u00fcne konulur. Nginx, gelen istekleri Nuxt.js sunucusuna y\u00f6nlendirir ve statik dosyalar\u0131 do\u011frudan sunar.<\/p>\n * SSG (Statik Bar\u0131nd\u0131rma):<\/strong> E\u011fer uygulaman\u0131z SSG modunda \u00e7al\u0131\u015f\u0131yorsa ( Django uygulamas\u0131 i\u00e7in tipik bir \u00fcretim da\u011f\u0131t\u0131m\u0131 a\u015fa\u011f\u0131daki bile\u015fenleri i\u00e7erir:<\/p>\n * Web Sunucusu (Nginx):<\/strong> Gelen HTTP isteklerini kar\u015f\u0131lar, statik dosyalar\u0131 (Django’nun * Docker ve Kubernetes:<\/strong> Her iki uygulamay\u0131 da (Nuxt.js ve Django) Docker kapsay\u0131c\u0131lar\u0131na paketlemek, da\u011f\u0131t\u0131m ve \u00f6l\u00e7eklenebilirlik a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck avantajlar sunar. Kubernetes gibi bir konteyner orkestrasyon arac\u0131, bu kapsay\u0131c\u0131lar\u0131 y\u00f6netmek ve \u00f6l\u00e7eklendirmek i\u00e7in kullan\u0131labilir. Bu, geli\u015ftirme ortam\u0131 ile \u00fcretim ortam\u0131 aras\u0131nda tutarl\u0131l\u0131k sa\u011flar. Bu rehberdeki ad\u0131mlar\u0131 kullanarak basit bir blog uygulamas\u0131 geli\u015ftirebiliriz:<\/p>\n 1. Django Backend:<\/strong> 2. Nuxt.js Frontend:<\/strong> Bu yap\u0131, kullan\u0131c\u0131lar\u0131n h\u0131zl\u0131ca blog yaz\u0131lar\u0131n\u0131 g\u00f6rmesini (SSR sayesinde), dinamik olarak yorum yapmas\u0131n\u0131 veya yeni yaz\u0131 olu\u015fturmas\u0131n\u0131 (CSR etkile\u015fimleri) sa\u011flar.<\/p>\n Nuxt.js ve Django ile evrensel bir uygulama geli\u015ftirmek, modern web uygulamalar\u0131n\u0131n performans, SEO ve kullan\u0131c\u0131 deneyimi beklentilerini kar\u015f\u0131lamak i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir yakla\u015f\u0131md\u0131r. Nuxt.js’in evrensel renderlama yetenekleri, SEO dostu ve h\u0131zl\u0131 y\u00fcklenen frontend’ler olu\u015ftururken, Django’nun sa\u011flam ve \u00f6l\u00e7eklenebilir API backend’i, g\u00fcvenli ve verimli veri y\u00f6netimi sa\u011flar.<\/p>\n Bu mimari, geli\u015ftiricilere hem frontend hem de backend taraf\u0131nda en iyi ara\u00e7lar\u0131 kullanma \u00f6zg\u00fcrl\u00fc\u011f\u00fc sunar. Nuxt.js’in dosya tabanl\u0131 y\u00f6nlendirme, Vuex entegrasyonu ve mod\u00fcl sistemi gibi \u00f6zellikleri, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131rken, Django’nun ORM’i, y\u00f6netici paneli ve DRF’nin API olu\u015fturma kolayl\u0131\u011f\u0131, backend geli\u015ftirme y\u00fck\u00fcn\u00fc azalt\u0131r.<\/p>\n Gelecekte, bu t\u00fcr hibrit uygulamalar\u0131n pop\u00fclaritesi artmaya devam edecektir. \u00d6zellikle Web Vitals gibi performans metriklerinin \u00f6nem kazanmas\u0131yla birlikte, SSR ve SSG gibi teknikler kritik hale gelmektedir. Nuxt.js ve Django ikilisi, bu gereksinimleri kar\u015f\u0131lamak ve ayn\u0131 zamanda geli\u015ftirici verimlili\u011finden \u00f6d\u00fcn vermemek isteyen ekipler i\u00e7in m\u00fckemmel bir se\u00e7im olmaya devam edecektir.<\/p>\n Bu rehber, Nuxt.js ve Django ile evrensel uygulama geli\u015ftirme yolculu\u011funuzda size sa\u011flam bir ba\u015flang\u0131\u00e7 noktas\u0131 sunmay\u0131 ama\u00e7lamaktad\u0131r. Her iki teknolojinin de zengin ekosistemlerini ve topluluklar\u0131n\u0131 ke\u015ffederek bilginizi derinle\u015ftirmeye devam etmeniz, daha karma\u015f\u0131k ve \u00f6zellikli uygulamalar geli\u015ftirmenize olanak tan\u0131yacakt\u0131r. Ba\u015far\u0131l\u0131 ve performansl\u0131 web uygulamalar\u0131 in\u015fa etme yolunda iyi \u015fanslar!<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Nuxt.js ve Django ile Evrensel (Universal) Uygulama Geli\u015ftirme Rehberi\nGiri\u015f: Evrensel Uygulamalar\u0131n G\u00fcc\u00fc\nG\u00fcn\u00fcm\u00fcz web uygulamalar\u0131, kulla","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-35747","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
\n* Server-Side Rendering (SSR):<\/strong> Her istekte sunucu, Vue.js uygulamas\u0131n\u0131 HTML dizgisine d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve taray\u0131c\u0131ya g\u00f6nderir. Taray\u0131c\u0131 bu HTML’i hemen g\u00f6sterir. JavaScript daha sonra y\u00fcklenir ve “hidrasyon” (hydration) ad\u0131 verilen bir s\u00fcre\u00e7le mevcut DOM yap\u0131s\u0131n\u0131 devralarak etkile\u015fimli hale getirir. Bu, h\u0131zl\u0131 ilk y\u00fckleme ve m\u00fckemmel SEO sa\u011flar. Nuxt.js’in varsay\u0131lan \u00e7al\u0131\u015fma modudur.
\n* Static Site Generation (SSG):<\/strong> Uygulama, geli\u015ftirme a\u015famas\u0131nda veya da\u011f\u0131t\u0131mdan \u00f6nce t\u00fcm sayfalar\u0131n\u0131 statik HTML dosyalar\u0131 olarak olu\u015fturur. Bu dosyalar bir CDN \u00fczerinden sunulabilir ve sunucu taraf\u0131nda renderlama maliyeti olmadan SSR’\u0131n t\u00fcm avantajlar\u0131n\u0131 sunar. Nuxt.js nuxt generate<\/code> komutu ile bunu destekler.
\n* Hibrit (Universal):<\/strong> Nuxt.js’in as\u0131l g\u00fcc\u00fc, SSR ve CSR’\u0131 birle\u015ftirerek her iki taraf\u0131n avantajlar\u0131ndan yararlanmas\u0131d\u0131r. \u0130lk y\u00fcklemede SSR, sonraki navigasyonlarda ise SPA gibi \u00e7al\u0131\u015f\u0131r.<\/p>\nBackend: Django ve REST API<\/h3>\n
\n* Veri Y\u00f6netimi:<\/strong> Veritaban\u0131 ile etkile\u015fimi y\u00f6netir (PostgreSQL, MySQL, SQLite vb.).
\n* API U\u00e7 Noktalar\u0131:<\/strong> Nuxt.js uygulamas\u0131n\u0131n veri \u00e7ekmek, g\u00f6ndermek, g\u00fcncellemek ve silmek i\u00e7in kullanaca\u011f\u0131 RESTful API u\u00e7 noktalar\u0131n\u0131 sa\u011flar.
\n* \u0130\u015f Mant\u0131\u011f\u0131:<\/strong> Uygulaman\u0131n temel i\u015f mant\u0131\u011f\u0131n\u0131 ve kurallar\u0131n\u0131 i\u00e7erir.
\n* Kimlik Do\u011frulama ve Yetkilendirme:<\/strong> Kullan\u0131c\u0131lar\u0131n kimli\u011fini do\u011frular ve hangi kaynaklara eri\u015febileceklerini belirler.<\/p>\nNuxt.js ile Frontend Geli\u015ftirme<\/h2>\n
Nuxt.js Kurulumu ve Proje Yap\u0131s\u0131<\/h3>\n
npx create-nuxt-app pages\/<\/code>: Uygulaman\u0131z\u0131n sayfalar\u0131n\u0131 ve y\u00f6nlendirmesini tan\u0131mlar (dosya tabanl\u0131 y\u00f6nlendirme).
\n* components\/<\/code>: Yeniden kullan\u0131labilir Vue bile\u015fenlerini i\u00e7erir.
\n* layouts\/<\/code>: Uygulaman\u0131z\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve d\u00fczenini tan\u0131mlar.
\n* store\/<\/code>: Vuex durum y\u00f6netimi mod\u00fcllerini i\u00e7erir.
\n* static\/<\/code>: Do\u011frudan sunulan statik dosyalar (resimler, fontlar vb.).
\n* assets\/<\/code>: Webpack taraf\u0131ndan i\u015flenen statik dosyalar (stil dosyalar\u0131, resimler).
\n* plugins\/<\/code>: Vue.js uygulamas\u0131na eklemek istedi\u011finiz eklentileri i\u00e7erir (\u00f6rn. Axios, kimlik do\u011frulama).
\n* middleware\/<\/code>: Y\u00f6nlendirme s\u0131ras\u0131nda \u00e7al\u0131\u015facak ara yaz\u0131l\u0131mlar\u0131 i\u00e7erir.
\n* nuxt.config.js<\/code>: Nuxt.js uygulamas\u0131n\u0131n ana yap\u0131land\u0131rma dosyas\u0131.<\/p>\nVeri \u00c7ekme (Data Fetching) Mekanizmalar\u0131<\/h3>\n
asyncData(context)<\/code>:<\/strong> Bir sayfa bile\u015feninin (page component) verisini sunucu taraf\u0131nda (veya istemci taraf\u0131nda ilk navigasyonda) \u00e7eker. \u00c7ekilen veri, bile\u015fenin data<\/code> \u00f6zelli\u011fine eklenir. SEO i\u00e7in kritik olan ilk renderlama s\u0131ras\u0131nda verinin HTML’e g\u00f6m\u00fclmesini sa\u011flar.
\n* fetch(context)<\/code>:<\/strong> Nuxt 2.12+ ile gelen bu hook, hem sunucu hem de istemci taraf\u0131nda veri \u00e7ekmek i\u00e7in kullan\u0131labilir. \u00c7ekilen veri do\u011frudan bile\u015fenin data<\/code> \u00f6zelli\u011fine de\u011fil, Vuex store’a veya bile\u015fenin kendi durumuna atan\u0131r. asyncData<\/code>‘dan farkl\u0131 olarak, bile\u015fenin data<\/code>‘s\u0131n\u0131 birle\u015ftirmez; bu nedenle genellikle Vuex ile birlikte kullan\u0131l\u0131r. Sayfa y\u00fcklendikten sonra da tekrar \u00e7al\u0131\u015ft\u0131r\u0131labilir.
\n* $axios<\/code> Mod\u00fcl\u00fc:<\/strong> Nuxt.js’in resmi Axios mod\u00fcl\u00fc, API isteklerini kolayla\u015ft\u0131rmak ve hem sunucu hem de istemci taraf\u0131nda tutarl\u0131 bir \u015fekilde kullanmak i\u00e7in tasarlanm\u0131\u015ft\u0131r. nuxt.config.js<\/code> i\u00e7inde yap\u0131land\u0131r\u0131labilir ve t\u00fcm bile\u015fenlerde $axios<\/code> olarak eri\u015filebilir.<\/p>\n\/\/ pages\/posts\/_id.vue \u00f6rne\u011fi\nexport default {\n async asyncData({ $axios, params }) {\n const post = await $axios.$get(\/api\/posts\/${params.id}<\/code>);\n return { post };\n },\n data() {\n return {\n post: null\n }\n }\n}<\/code><\/pre>\nSEO Optimizasyonu ve Meta Etiket Y\u00f6netimi<\/h3>\n
\/\/ pages\/posts\/_id.vue \u00f6rne\u011fi\nexport default {\n \/\/ ... asyncData veya fetch metodu ile post verisi \u00e7ekildi\n head() {\n return {\n title: this.post.title,\n meta: [\n {\n hid: 'description',\n name: 'description',\n content: this.post.excerpt\n },\n \/\/ Open Graph, Twitter Card meta etiketleri de eklenebilir\n ]\n };\n }\n}<\/code><\/pre>\nhead()<\/code> metodu, sunucu taraf\u0131nda render edildi\u011finde HTML <\/code> etiketine otomatik olarak eklenir ve arama motorlar\u0131 taraf\u0131ndan indekslenebilir.<\/p>\nState Y\u00f6netimi (Vuex)<\/h3>\n
store\/<\/code> dizini alt\u0131nda olu\u015fturulan her .js<\/code> dosyas\u0131, otomatik olarak bir Vuex mod\u00fcl\u00fc haline gelir. Bu, uygulaman\u0131n genel durumunu y\u00f6netmek i\u00e7in merkezi ve \u00f6ng\u00f6r\u00fclebilir bir yol sa\u011flar. \u00d6zellikle fetch<\/code> hook’u ile \u00e7ekilen verilerin Vuex store’a kaydedilmesi yayg\u0131n bir yakla\u015f\u0131md\u0131r.<\/p>\nAPI Entegrasyonu<\/h3>\n
@nuxtjs\/axios<\/code> mod\u00fcl\u00fc, backend API ile ileti\u015fim kurmak i\u00e7in en iyi yoldur. Kurulumu nuxt.config.js<\/code> dosyas\u0131na eklemekle ba\u015flar:<\/p>\n\/\/ nuxt.config.js\nexport default {\n modules: [\n '@nuxtjs\/axios',\n ],\n axios: {\n \/\/ API'nizin temel URL'sini belirtin\n baseURL: process.env.API_URL || 'http:\/\/localhost:8000\/api'\n },\n \/\/ ... di\u011fer yap\u0131land\u0131rmalar\n}<\/code><\/pre>\nbaseURL<\/code>‘i ortam de\u011fi\u015fkenlerinden almak, farkl\u0131 ortamlar (geli\u015ftirme, \u00fcretim) i\u00e7in esneklik sa\u011flar.<\/p>\nDjango ile Backend Geli\u015ftirme<\/h2>\n
Django Nedir? Neden API i\u00e7in uygun?<\/h3>\n
Django REST Framework (DRF) Nedir?<\/h3>\n
DRF Kurulumu ve Temel Yap\u0131land\u0131rma<\/h3>\n
pip install djangorestframework django-cors-headers<\/code><\/pre>\nsettings.py<\/code> dosyan\u0131za ekleyin:<\/p>\n# settings.py\nINSTALLED_APPS = [\n # ... di\u011fer Django uygulamalar\u0131\n 'rest_framework',\n 'corsheaders', # CORS i\u00e7in\n 'your_app_name', # Kendi uygulaman\u0131z\n]\n\nREST Framework ayarlar\u0131<\/h2>\nREST_FRAMEWORK = {\n 'DEFAULT_AUTHENTICATION_CLASSES': [\n 'rest_framework_simplejwt.authentication.JWTAuthentication',\n 'rest_framework.authentication.SessionAuthentication', # Geli\u015ftirme i\u00e7in iste\u011fe ba\u011fl\u0131\n ],\n 'DEFAULT_PERMISSION_CLASSES': [\n 'rest_framework.permissions.IsAuthenticatedOrReadOnly', # Varsay\u0131lan olarak okuma izni, yazma i\u00e7in yetkilendirme\n ],\n 'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',\n 'PAGE_SIZE': 10\n}\n\n
CORS ayarlar\u0131<\/h2>\nCORS_ALLOWED_ORIGINS = [\n \"http:\/\/localhost:3000\", # Nuxt.js uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131 adres\n # \"https:\/\/your-nuxt-domain.com\", # \u00dcretim ortam\u0131 i\u00e7in\n]\nCORS_ALLOW_CREDENTIALS = True # E\u011fer kimlik do\u011frulama tokenlar\u0131 kullan\u0131yorsan\u0131z<\/code><\/pre>\n
Model, Serializer, Viewset ve URL Yap\u0131lar\u0131<\/h3>\n
# your_app_name\/models.py\n from django.db import models\n\n class Post(models.Model):\n title = models.CharField(max_length=200)\n content = models.TextField()\n created_at = models.DateTimeField(auto_now_add=True)\n updated_at = models.DateTimeField(auto_now=True)\n author = models.ForeignKey('auth.User', on_delete=models.CASCADE)\n\n def __str__(self):\n return self.title<\/code><\/pre>\n# your_app_name\/serializers.py\n from rest_framework import serializers\n from .models import Post\n\n class PostSerializer(serializers.ModelSerializer):\n author_username = serializers.ReadOnlyField(source='author.username')\n\n class Meta:\n model = Post\n fields = ['id', 'title', 'content', 'created_at', 'updated_at', 'author', 'author_username']\n read_only_fields = ['author'] # Olu\u015fturma s\u0131ras\u0131nda author'\u0131 otomatik atayabiliriz<\/code><\/pre>\n# your_app_name\/views.py\n from rest_framework import viewsets, permissions\n from .models import Post\n from .serializers import PostSerializer\n\n class PostViewSet(viewsets.ModelViewSet):\n queryset = Post.objects.all().order_by('-created_at')\n serializer_class = PostSerializer\n permission_classes = [permissions.IsAuthenticatedOrReadOnly] # Sadece yetkili kullan\u0131c\u0131lar d\u00fczenleyebilir\n\n def perform_create(self, serializer):\n serializer.save(author=self.request.user) # Yeni g\u00f6nderiyi olu\u015fturan kullan\u0131c\u0131y\u0131 atar<\/code><\/pre>\n# project_name\/urls.py\n from django.contrib import admin\n from django.urls import path, include\n from rest_framework.routers import DefaultRouter\n from your_app_name.views import PostViewSet\n\n router = DefaultRouter()\n router.register(r'posts', PostViewSet)\n\n urlpatterns = [\n path('admin\/', admin.site.urls),\n path('api\/', include(router.urls)),\n path('api-auth\/', include('rest_framework.urls', namespace='rest_framework')), # DRF login\/logout i\u00e7in\n ]<\/code><\/pre>\nKimlik Do\u011frulama ve Yetkilendirme (JWT)<\/h3>\n
djangorestframework-simplejwt<\/code> paketi bu konuda pop\u00fcler bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\npip install djangorestframework-simplejwt<\/code><\/pre>\nsettings.py<\/code> dosyan\u0131za ekleyin:<\/p>\n# settings.py\n...<\/h2>\nINSTALLED_APPS = [\n # ...\n 'rest_framework_simplejwt',\n]\n\n
...<\/h2>\nREST_FRAMEWORK = {\n 'DEFAULT_AUTHENTICATION_CLASSES': [\n 'rest_framework_simplejwt.authentication.JWTAuthentication',\n # ...\n ],\n # ...\n}\n\nfrom datetime import timedelta\n\nSIMPLE_JWT = {\n 'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),\n 'REFRESH_TOKEN_LIFETIME': timedelta(days=1),\n 'ROTATE_REFRESH_TOKENS': True,\n 'BLACKLIST_AFTER_ROTATION': True,\n 'ALGORITHM': 'HS256',\n 'SIGNING_KEY': SECRET_KEY, # Django SECRET_KEY'inizi kullan\u0131n\n 'VERIFYING_KEY': None,\n 'AUDIENCE': None,\n 'ISSUER': None,\n 'AUTH_HEADER_TYPES': ('Bearer',),\n 'USER_ID_FIELD': 'id',\n 'USER_ID_CLAIM': 'user_id',\n 'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',),\n 'TOKEN_TYPE_CLAIM': 'token_type',\n 'JTI_CLAIM': 'jti',\n 'SLIDING_TOKEN_REFRESH_EXP_CLAIM': 'refresh_exp',\n 'SLIDING_TOKEN_LIFETIME': timedelta(minutes=5),\n 'SLIDING_TOKEN_REFRESH_LIFETIME': timedelta(days=1),\n}<\/code><\/pre>\n
project_name\/urls.py<\/code> i\u00e7ine JWT u\u00e7 noktalar\u0131n\u0131 ekleyin:<\/p>\n# project_name\/urls.py\nfrom rest_framework_simplejwt.views import (\n TokenObtainPairView,\n TokenRefreshView,\n TokenVerifyView,\n)\n\nurlpatterns = [\n # ...\n path('api\/token\/', TokenObtainPairView.as_view(), name='token_obtain_pair'),\n path('api\/token\/refresh\/', TokenRefreshView.as_view(), name='token_refresh'),\n path('api\/token\/verify\/', TokenVerifyView.as_view(), name='token_verify'),\n]<\/code><\/pre>\naccess<\/code> ve refresh<\/code> token’lar\u0131 alabilirler. access<\/code> token, yetkilendirilmi\u015f API istekleri i\u00e7in kullan\u0131l\u0131rken, refresh<\/code> token, access<\/code> token s\u00fcresi doldu\u011funda yenisini almak i\u00e7in kullan\u0131l\u0131r.<\/p>\nCORS Ayarlar\u0131<\/h3>\n
django-cors-headers<\/code> paketi bu sorunu \u00e7\u00f6zmek i\u00e7in kullan\u0131l\u0131r. settings.py<\/code> i\u00e7inde CORS_ALLOWED_ORIGINS<\/code> veya CORS_ALLOW_ALL_ORIGINS = True<\/code> (geli\u015ftirme ortam\u0131 i\u00e7in) ayar\u0131n\u0131 yaparak izin verilen kaynaklar\u0131 belirtmelisiniz.<\/p>\n# settings.py\nMIDDLEWARE = [\n 'corsheaders.middleware.CorsMiddleware', # CORS middleware'\u0131 di\u011fer middleware'lardan \u00f6nce olmal\u0131\n # ... di\u011fer middleware'lar\n]\n\nCORS_ALLOWED_ORIGINS = [\n \"http:\/\/localhost:3000\",\n \"http:\/\/127.0.0.1:3000\",\n # \u00dcretim ortam\u0131 i\u00e7in Nuxt uygulaman\u0131z\u0131n domainini ekleyin\n # \"https:\/\/www.yourdomain.com\",\n]\n\nYa da t\u00fcm origin'lere izin vermek i\u00e7in (sadece geli\u015ftirme ortam\u0131nda \u00f6nerilir!)<\/h2>\n
CORS_ALLOW_ALL_ORIGINS = True<\/code><\/pre>\n<\/h2>\n
Nuxt.js ve Django Entegrasyonu<\/h2>\n
Frontend’den Backend API’ye \u0130stek G\u00f6nderme<\/h3>\n
asyncData<\/code> veya fetch<\/code> hook’lar\u0131 i\u00e7inde $axios<\/code> mod\u00fcl\u00fcn\u00fc kullanarak Django API’sine istekler g\u00f6nderebiliriz.<\/p>\n\/\/ Nuxt.js component\/page\nexport default {\n async asyncData({ $axios }) {\n try {\n const posts = await $axios.$get('\/api\/posts\/');\n return { posts };\n } catch (error) {\n console.error('G\u00f6nderiler \u00e7ekilemedi:', error);\n return { posts: [] };\n }\n },\n data() {\n return {\n posts: []\n };\n },\n methods: {\n async createPost(newPost) {\n try {\n const response = await this.$axios.$post('\/api\/posts\/', newPost);\n this.posts.push(response); \/\/ Yeni g\u00f6nderiyi listeye ekle\n } catch (error) {\n console.error('G\u00f6nderi olu\u015fturulamad\u0131:', error);\n }\n }\n }\n}<\/code><\/pre>\naccess<\/code> token’\u0131, $axios<\/code>‘un varsay\u0131lan ba\u015fl\u0131klar\u0131na eklenmelidir. Bu genellikle bir Nuxt.js eklentisi (plugins\/axios.js<\/code>) veya Vuex aksiyonlar\u0131 arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r.<\/p>\n\/\/ plugins\/axios.js\nexport default function ({ $axios, store }) {\n $axios.onRequest(config => {\n if (store.state.auth.token) { \/\/ Vuex store'da token varsa\n config.headers.common['Authorization'] = Bearer ${store.state.auth.token}<\/code>;\n }\n return config;\n });\n\n $axios.onResponseError(error => {\n \/\/ Token s\u00fcresi dolarsa refresh token ile yenileme veya kullan\u0131c\u0131y\u0131 \u00e7\u0131k\u0131\u015f yapmaya y\u00f6nlendirme\n if (error.response.status === 401 && error.response.data.code === 'token_not_valid') {\n \/\/ Refresh token ile yeni access token almaya \u00e7al\u0131\u015f\n \/\/ Ba\u015far\u0131s\u0131z olursa kullan\u0131c\u0131y\u0131 \u00e7\u0131k\u0131\u015f yapmaya y\u00f6nlendir\n }\n return Promise.reject(error);\n });\n}<\/code><\/pre>\nnuxt.config.js<\/code> i\u00e7inde kaydetmeyi unutmay\u0131n:<\/p>\n\/\/ nuxt.config.js\nexport default {\n plugins: [\n '~\/plugins\/axios.js'\n ],\n \/\/ ...\n}<\/code><\/pre>\nOrtak Veri Ak\u0131\u015f\u0131 ve Durum Y\u00f6netimi<\/h3>\n
G\u00fcvenlik Konular\u0131<\/h3>\n
access<\/code> token’lar k\u0131sa \u00f6m\u00fcrl\u00fc olmal\u0131 ve refresh<\/code> token’lar daha uzun \u00f6m\u00fcrl\u00fc olabilir ancak g\u00fcvenli bir \u015fekilde saklanmal\u0131d\u0131r (\u00f6rn. HTTP-only \u00e7erezler). Nuxt.js taraf\u0131nda access<\/code> token’\u0131 localStorage<\/code>‘da saklamak yayg\u0131n olsa da, XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 savunmas\u0131z olabilir. Daha g\u00fcvenli bir yakla\u015f\u0131m, access<\/code> token’\u0131 Vuex store’da tutmak ve sayfalar aras\u0131 ge\u00e7i\u015flerde yeniden almakt\u0131r, ancak bu da kullan\u0131c\u0131 deneyimini etkileyebilir. En g\u00fcvenli y\u00f6ntem, refresh<\/code> token’\u0131 HTTP-only \u00e7erezlerde saklamak ve access<\/code> token’\u0131 sadece bellekte tutmakt\u0131r.
\n* CSRF Korumas\u0131:<\/strong> DRF, oturum tabanl\u0131 kimlik do\u011frulama kullan\u0131ld\u0131\u011f\u0131nda CSRF korumas\u0131n\u0131 otomatik olarak sa\u011flar. JWT kullan\u0131ld\u0131\u011f\u0131nda, token’\u0131n kendisi bir CSRF token’\u0131 gibi davrand\u0131\u011f\u0131 i\u00e7in ayr\u0131 bir CSRF korumas\u0131na genellikle gerek kalmaz, ancak yine de frontend’den gelen isteklerin kaynak kontrol\u00fc (CORS) \u00f6nemlidir.
\n* XSS ve SQL Enjeksiyonu:<\/strong> Django ORM ve templating sistemi, SQL enjeksiyonu ve XSS sald\u0131r\u0131lar\u0131na kar\u015f\u0131 yerle\u015fik korumalar sunar. DRF’nin serile\u015ftiricileri de veri do\u011frulama yaparak bu t\u00fcr zafiyetleri azalt\u0131r. Yine de, frontend’den gelen kullan\u0131c\u0131 girdilerini her zaman sanitize etmek ve do\u011frulamak \u00f6nemlidir.<\/p>\nDa\u011f\u0131t\u0131m (Deployment)<\/h2>\n
Nuxt.js Uygulamas\u0131n\u0131n Da\u011f\u0131t\u0131m\u0131<\/h3>\n
npm run build<\/code> komutu ile \u00fcretim i\u00e7in optimize edilir. Bu komut, uygulaman\u0131n JavaScript, CSS ve di\u011fer varl\u0131klar\u0131n\u0131 olu\u015fturur. Da\u011f\u0131t\u0131m stratejisi, se\u00e7ti\u011finiz renderlama moduna (SSR, SSG) g\u00f6re de\u011fi\u015fir:<\/p>\nserver {\n listen 80;\n server_name yourdomain.com;\n\n location \/_nuxt\/ {\n alias \/path\/to\/your\/nuxt-app\/.nuxt\/dist\/client\/;\n expires 1y;\n add_header Cache-Control \"public\";\n }\n\n location \/ {\n proxy_pass http:\/\/localhost:3000; # Nuxt.js uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131 port\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection 'upgrade';\n proxy_set_header Host $host;\n proxy_cache_bypass $http_upgrade;\n }\n }<\/code><\/pre>\nnuxt generate<\/code>), t\u00fcm sayfalar statik HTML, CSS ve JS dosyalar\u0131 olarak olu\u015fturulur. Bu dosyalar, Netlify, Vercel, AWS S3\/CloudFront veya herhangi bir statik dosya bar\u0131nd\u0131rma hizmetinde bar\u0131nd\u0131r\u0131labilir. Bu, en uygun maliyetli ve en h\u0131zl\u0131 da\u011f\u0131t\u0131m y\u00f6ntemlerinden biridir.<\/p>\nDjango Uygulamas\u0131n\u0131n Da\u011f\u0131t\u0131m\u0131<\/h3>\n
collectstatic<\/code> ile toplad\u0131\u011f\u0131) ve medya dosyalar\u0131n\u0131 sunar. Django uygulamas\u0131n\u0131n kendisi i\u00e7in gelen istekleri bir WSGI sunucusuna (Gunicorn veya uWSGI) y\u00f6nlendirir.
\n* WSGI Sunucusu (Gunicorn\/uWSGI):<\/strong> Python web uygulamalar\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rmak i\u00e7in bir aray\u00fczd\u00fcr. Django uygulaman\u0131z\u0131 \u00e7al\u0131\u015ft\u0131r\u0131r ve Nginx’ten gelen istekleri i\u015fler.
\n* Veritaban\u0131 (PostgreSQL):<\/strong> \u00dcretim ortam\u0131nda SQLite yerine PostgreSQL gibi sa\u011flam bir veritaban\u0131 kullanmak \u00f6nerilir.
\n* S\u00fcre\u00e7 Y\u00f6neticisi (Supervisor\/Systemd):<\/strong> Gunicorn\/uWSGI s\u00fcrecini izler ve \u00e7\u00f6kmesi durumunda otomatik olarak yeniden ba\u015flat\u0131r.<\/p>\n# Nginx yap\u0131land\u0131rmas\u0131 (Django i\u00e7in)\nserver {\n listen 80;\n server_name api.yourdomain.com; # API i\u00e7in ayr\u0131 bir subdomain\n\n location \/static\/ {\n alias \/path\/to\/your\/django-app\/static\/; # collectstatic ile toplanan statik dosyalar\n }\n\n location \/media\/ {\n alias \/path\/to\/your\/django-app\/media\/; # Kullan\u0131c\u0131 taraf\u0131ndan y\u00fcklenen medya dosyalar\u0131\n }\n\n location \/ {\n proxy_pass http:\/\/unix:\/path\/to\/your\/django-app\/gunicorn.sock; # Gunicorn socket dosyas\u0131\n proxy_set_header Host $host;\n proxy_set_header X-Real-IP $remote_addr;\n proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n }\n}<\/code><\/pre>\nOrtak Da\u011f\u0131t\u0131m Stratejileri<\/h3>\n
\n* Bulut Platformlar\u0131:<\/strong> AWS, Google Cloud, Azure gibi bulut sa\u011flay\u0131c\u0131lar\u0131, hem Nuxt.js (\u00f6rn. AWS Amplify, Vercel) hem de Django (\u00f6rn. AWS EC2, Google App Engine, Heroku) uygulamalar\u0131n\u0131 bar\u0131nd\u0131rmak ve y\u00f6netmek i\u00e7in \u00e7e\u015fitli hizmetler sunar.<\/p>\n\u00d6rnek Uygulama Senaryosu: Basit Bir Blog<\/h2>\n
\n * Post<\/code> modeli (ba\u015fl\u0131k, i\u00e7erik, yazar, yay\u0131nlanma tarihi) ve Comment<\/code> modeli olu\u015fturulur.
\n * PostSerializer<\/code> ve CommentSerializer<\/code> tan\u0131mlan\u0131r.
\n * PostViewSet<\/code> ve CommentViewSet<\/code> (yorumlar i\u00e7in Post<\/code> ile ili\u015fkili) olu\u015fturulur.
\n * JWT tabanl\u0131 kimlik do\u011frulama ayarlan\u0131r, kullan\u0131c\u0131lar\u0131n giri\u015f yapmas\u0131 ve g\u00f6nderi\/yorum olu\u015fturmas\u0131 sa\u011flan\u0131r.
\n * CORS ayarlar\u0131 yap\u0131l\u0131r.<\/p>\n
\n * Ana sayfa (pages\/index.vue<\/code>): T\u00fcm blog g\u00f6nderilerini listeler. asyncData<\/code> ile g\u00f6nderileri \u00e7eker.
\n * G\u00f6nderi detay\u0131 sayfas\u0131 (pages\/posts\/_id.vue<\/code>): Belirli bir g\u00f6nderinin i\u00e7eri\u011fini ve yorumlar\u0131n\u0131 g\u00f6sterir. asyncData<\/code> ile g\u00f6nderi ve yorumlar\u0131 \u00e7eker.
\n * G\u00f6nderi olu\u015fturma\/d\u00fczenleme sayfas\u0131 (pages\/posts\/create.vue<\/code>): Yetkili kullan\u0131c\u0131lar\u0131n yeni g\u00f6nderi olu\u015fturmas\u0131na veya mevcut g\u00f6nderileri d\u00fczenlemesine olanak tan\u0131r.
\n * Giri\u015f\/Kay\u0131t sayfalar\u0131 (pages\/auth\/login.vue<\/code>, pages\/auth\/register.vue<\/code>): Kullan\u0131c\u0131lar\u0131n Django API ile etkile\u015fim kurarak giri\u015f yapmas\u0131n\u0131 ve kaydolmas\u0131n\u0131 sa\u011flar.
\n * Vuex store: Kullan\u0131c\u0131 kimlik do\u011frulama durumunu ve JWT token’lar\u0131n\u0131 saklar.
\n * Axios eklentisi: T\u00fcm API isteklerine yetkilendirme ba\u015fl\u0131\u011f\u0131n\u0131 otomatik olarak ekler.
\n * Meta etiketleri: Her g\u00f6nderi detay\u0131 sayfas\u0131 i\u00e7in dinamik ba\u015fl\u0131k ve a\u00e7\u0131klama ayarlan\u0131r.<\/p>\nSonu\u00e7 ve Gelecek Perspektifleri<\/h2>\n