{"id":12539,"date":"2025-02-15T13:30:12","date_gmt":"2025-02-15T10:30:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/symfony-react-spa-uygulamasi-yenileme-sorunu\/"},"modified":"2025-02-15T13:30:12","modified_gmt":"2025-02-15T10:30:12","slug":"symfony-react-spa-uygulamasi-yenileme-sorunu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/symfony-react-spa-uygulamasi-yenileme-sorunu\/","title":{"rendered":"Symfony – React SPA Uygulamas\u0131: Yenileme Sorunu"},"content":{"rendered":"

<\/p>\n

Symfony – React SPA Uygulamas\u0131: Yenileme Sorunu<\/p>\n

Merhaba! Bu makalede, Symfony ve React ile geli\u015ftirdi\u011finiz tek sayfa uygulamalar\u0131nda (SPA) s\u0131kl\u0131kla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z yenileme sorununu ele alaca\u011f\u0131z. \u00d6zellikle, sayfa yenilendi\u011finde verilerin kaybolmas\u0131 veya uygulaman\u0131n beklenmedik \u015fekilde davranmas\u0131 gibi durumlar inceleyece\u011fiz. Bu sorun, frontend ve backend aras\u0131nda do\u011fru ileti\u015fim kurulmamas\u0131ndan kaynaklanabilir.<\/p>\n

\u00d6ncelikle, SPA mimarisinin temel prensiplerini hat\u0131rlayal\u0131m. SPA’larda, kullan\u0131c\u0131 etkile\u015fimleri sonucu sayfa tamamen yeniden y\u00fcklenmez. Bunun yerine, JavaScript kullanarak sadece gerekli olan k\u0131s\u0131mlar g\u00fcncellenir. Bu, daha h\u0131zl\u0131 ve daha etkile\u015fimli bir kullan\u0131c\u0131 deneyimi sa\u011flar. Ancak, bu mimari, sayfa yenileme i\u015flemlerinde baz\u0131 zorluklar getirir.<\/p>\n

Sorunun Kayna\u011f\u0131:<\/strong> Sayfa yenilendi\u011finde, taray\u0131c\u0131 t\u00fcm JavaScript kodunu ve uygulama durumunu kaybeder. Sonu\u00e7 olarak, uygulaman\u0131z\u0131n \u00f6nceki durumu geri y\u00fcklenmez ve bo\u015f bir sayfa ile kar\u015f\u0131la\u015fabilirsiniz. Bu sorunun \u00fcstesinden gelmek i\u00e7in birka\u00e7 \u00e7\u00f6z\u00fcm y\u00f6ntemi mevcuttur.<\/p>\n

\u00c7\u00f6z\u00fcm Yollar\u0131<\/h2>\n

Bu sorunu a\u015fmak i\u00e7in birka\u00e7 teknik kullanabilirsiniz. Bunlardan en yayg\u0131n olanlar\u0131 \u015funlard\u0131r:<\/p>\n

    \n
  1. API \u0130leti\u015fimi:<\/strong> Symfony’de olu\u015fturdu\u011funuz API u\u00e7 noktalar\u0131n\u0131 kullanarak, React uygulaman\u0131z\u0131n verilerini sunucudan \u00e7ekmesini sa\u011flayabilirsiniz. B\u00f6ylece, sayfa yenilendi\u011finde bile veriler sunucudan yeniden \u00e7ekilecek ve uygulama do\u011fru \u015fekilde \u00e7al\u0131\u015fmaya devam edecektir. Bu y\u00f6ntem, verilerin g\u00fcvenli bir \u015fekilde saklanmas\u0131 ve y\u00f6netilmesi a\u00e7\u0131s\u0131ndan da olduk\u00e7a \u00f6nemlidir.<\/li>\n
  2. Local Storage\/Session Storage:<\/strong> Taray\u0131c\u0131da yerel depolama mekanizmalar\u0131 (localStorage ve sessionStorage) kullanarak, uygulaman\u0131z\u0131n durumunu kaydedebilir ve sayfa yenilendi\u011finde geri y\u00fckleyebilirsiniz. Ancak, bu y\u00f6ntemin g\u00fcvenlik a\u00e7\u0131s\u0131ndan s\u0131n\u0131rl\u0131l\u0131klar\u0131 oldu\u011funu unutmamak \u00f6nemlidir. Hassas verileri bu \u015fekilde saklamaktan ka\u00e7\u0131nmal\u0131s\u0131n\u0131z.<\/li>\n
  3. Redux\/Context API:<\/strong> React uygulamalar\u0131nda durum y\u00f6netimi i\u00e7in Redux veya Context API gibi k\u00fct\u00fcphaneler kullanarak, uygulaman\u0131z\u0131n durumunu merkezi bir yerde y\u00f6netmenizi ve sayfa yenilemelerinde kay\u0131p ya\u015famaman\u0131z\u0131 sa\u011flayabilirsiniz. Bu y\u00f6ntem, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in \u00f6zellikle faydal\u0131d\u0131r.<\/li>\n<\/ol>\n

    Kod \u00d6rne\u011fi (API \u0130leti\u015fimi)<\/h2>\n

    \u0130\u015fte Symfony’de bir API u\u00e7 noktas\u0131 ve React’te bu u\u00e7 noktay\u0131 kullanan bir \u00f6rnek:<\/p>\n

    \n\/\/ Symfony (Controller)\npublic function getDatasAction(): Response\n{\n    $data = ['name' => 'Fatih Soysal', 'website' => 'https:\/\/fatihsoysal.com'];\n    return new JsonResponse($data);\n}\n\n\/\/ React (Component)\nuseEffect(() => {\n    fetch('\/api\/data')\n        .then(response => response.json())\n        .then(data => setData(data));\n}, []);\n<\/code><\/pre>\n
    Bu \u00f6rnekte, Symfony API u\u00e7 noktas\u0131 verileri d\u00f6nd\u00fcr\u00fcr ve React uygulamas\u0131 bu verileri  useEffect<\/code> hook’u  ile \u00e7eker.  Sayfa yenilendi\u011finde,  useEffect<\/code>  tekrar \u00e7al\u0131\u015f\u0131r ve veriler yeniden al\u0131n\u0131r.<\/p>\n
    Ayr\u0131ca,  uygulaman\u0131z\u0131n performans\u0131n\u0131 optimize etmek i\u00e7in  React Router gibi k\u00fct\u00fcphaneleri kullanmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Bu k\u00fct\u00fcphaneler,  SPA’lerde  navigasyonu daha  verimli hale getirir.<\/p>\n
    Umar\u0131m bu makale,  Symfony ve React SPA uygulamalar\u0131nda  yenileme sorununu anlamak ve \u00e7\u00f6zmek i\u00e7in size yard\u0131mc\u0131 olmu\u015ftur. Daha fazla bilgi ve destek i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
    Faydal\u0131 bulabilece\u011finiz di\u011fer kaynaklar:<\/p>\n