{"id":7779,"date":"2024-12-27T00:15:13","date_gmt":"2024-12-26T21:15:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-tembel-yukleme-komple-bir-kilavuz\/"},"modified":"2024-12-27T00:15:13","modified_gmt":"2024-12-26T21:15:13","slug":"reactte-tembel-yukleme-komple-bir-kilavuz","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-tembel-yukleme-komple-bir-kilavuz\/","title":{"rendered":"React’te Tembel Y\u00fckleme: Komple Bir K\u0131lavuz"},"content":{"rendered":"

<\/p>\n

React’te Tembel Y\u00fckleme: Komple Bir K\u0131lavuz<\/p>\n

Merhaba! Ben Fatih Soysal ve bu yaz\u0131da React uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilecek g\u00fc\u00e7l\u00fc bir teknik olan tembel y\u00fcklemeyi (lazy loading) ele alaca\u011f\u0131z. \u00d6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, tembel y\u00fckleme olmazsa olmaz bir optimizasyon stratejisi haline gelir. Bu sayede, uygulaman\u0131z\u0131n ilk y\u00fcklenme s\u00fcresi k\u0131sal\u0131r ve kullan\u0131c\u0131 deneyimi iyile\u015fir. \u00d6ncelikle, tembel y\u00fcklemenin ne oldu\u011funu ve neden \u00f6nemli oldu\u011funu anlamam\u0131z gerek.<\/p>\n

Tembel Y\u00fckleme Nedir ve Neden \u00d6nemlidir?<\/h2>\n

Basit\u00e7e s\u00f6ylemek gerekirse, tembel y\u00fckleme, uygulaman\u0131z\u0131n t\u00fcm bile\u015fenlerini ba\u015flang\u0131\u00e7ta y\u00fcklemek yerine, yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda bile\u015fenleri y\u00fckleme i\u015flemidir. \u00d6rne\u011fin, bir e-ticaret sitesinde, ana sayfada t\u00fcm \u00fcr\u00fcn detaylar\u0131n\u0131n y\u00fcklenmesi yerine, yaln\u0131zca kullan\u0131c\u0131 bir \u00fcr\u00fcne t\u0131klad\u0131\u011f\u0131nda ilgili \u00fcr\u00fcn detaylar\u0131 y\u00fcklenir. Bu yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck uygulamalar i\u00e7in, ilk y\u00fcklenme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r. Sonu\u00e7 olarak, kullan\u0131c\u0131lar daha h\u0131zl\u0131 bir uygulama deneyimi ya\u015far ve sayfa y\u00fcklenme s\u00fcreleri iyile\u015fir. Ayr\u0131ca, uygulama boyutu k\u00fc\u00e7\u00fcld\u00fc\u011f\u00fc i\u00e7in daha az bant geni\u015fli\u011fi kullan\u0131l\u0131r.<\/p>\n

React’te Tembel Y\u00fcklemeyi Uygulama<\/h2>\n

React’te tembel y\u00fckleme i\u00e7in iki ana y\u00f6ntem kullanabiliriz: React.lazy<\/code> ve Suspense<\/code>. React.lazy<\/code> fonksiyonu, bile\u015fenleri dinamik olarak y\u00fcklememizi sa\u011flar. Suspense<\/code> ise, bile\u015fen y\u00fcklenirken kullan\u0131c\u0131ya bir y\u00fckleme g\u00f6stergesi g\u00f6stermemizi m\u00fcmk\u00fcn k\u0131lar. Bu, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n

React.lazy ile Tembel Y\u00fckleme<\/h3>\n

React.lazy<\/code> ile bir bile\u015feni tembel y\u00fcklemek olduk\u00e7a kolayd\u0131r. A\u015fa\u011f\u0131daki \u00f6rnekte, About<\/code> bile\u015feni tembel olarak y\u00fckleniyor:<\/p>\n

\nimport React, { lazy, Suspense } from 'react';\n\nconst About = lazy(() => import('.\/About'));\n\nfunction App() {\n  return (\n    <div>\n      <Suspense fallback={<div>Y\u00fckleniyor...<\/div>}>\n        <About \/>\n      <\/Suspense>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
Bu kodda, import('.\/About')<\/code> fonksiyonu, About<\/code> bile\u015fenini dinamik olarak y\u00fckler.  Suspense<\/code> bile\u015feni ise, About<\/code> bile\u015feni y\u00fcklenirken bir “Y\u00fckleniyor…” mesaj\u0131 g\u00f6sterir.  Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n
Suspense ile Kullan\u0131c\u0131 Deneyimini \u0130yile\u015ftirme<\/h3>\n
Suspense<\/code> bile\u015feni, tembel y\u00fckleme i\u015flemi s\u0131ras\u0131nda kullan\u0131c\u0131ya geri bildirim sa\u011flar.  Bu, uygulaman\u0131n donmu\u015f gibi g\u00f6r\u00fcnmesini \u00f6nler ve kullan\u0131c\u0131 deneyimini iyile\u015ftirir.  fallback<\/code> \u00f6zelli\u011fi, bile\u015fen y\u00fcklenirken g\u00f6sterilecek i\u00e7eri\u011fi belirler.<\/p>\n
Sonu\u00e7<\/h2>\n
React’te tembel y\u00fckleme, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirmek i\u00e7in hayati \u00f6neme sahiptir.  React.lazy<\/code> ve Suspense<\/code> bile\u015fenlerini kullanarak, uygulaman\u0131z\u0131n y\u00fcklenme s\u00fcresini k\u0131saltabilir ve kullan\u0131c\u0131 deneyimini iyile\u015ftirebilirsiniz.  Bu k\u0131lavuzda ele ald\u0131\u011f\u0131m\u0131z teknikleri uygulayarak, uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 optimize edebilir ve daha iyi bir kullan\u0131c\u0131 deneyimi sa\u011flayabilirsiniz. Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Faydal\u0131 bulabilece\u011finiz kaynaklar:<\/p>\n