Next.js Geli\u015fmi\u015f \u00d6nbellekleme Stratejileri<\/p>\n
Next.js, performans odakl\u0131 uygulamalar geli\u015ftirmek i\u00e7in m\u00fckemmel bir frameworkt\u00fcr. Uygulama performans\u0131n\u0131 art\u0131rman\u0131n en \u00f6nemli yollar\u0131ndan biri de \u00f6nbelleklemedir. Next.js, \u00f6nbelleklemeyi kolayla\u015ft\u0131rmak i\u00e7in yerle\u015fik \u00f6zellikler sunmaktad\u0131r. Ancak, uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e daha geli\u015fmi\u015f \u00f6nbellekleme stratejileri kullanman\u0131z gerekebilir. Bu makalede, Next.js’de kullanabilece\u011finiz geli\u015fmi\u015f \u00f6nbellekleme stratejilerini ele alaca\u011f\u0131z.<\/p>\n
Statik \u00f6nbellekleme, bir dosyan\u0131n \u00f6nbelle\u011fe al\u0131nmas\u0131 ve istekler i\u00e7in sunucunun bu \u00f6nbelle\u011fe al\u0131nm\u0131\u015f s\u00fcr\u00fcm\u00fc d\u00f6nd\u00fcrmesi i\u015flemidir. Next.js, bu t\u00fcr \u00f6nbelleklemeyi desteklemek i\u00e7in yerle\u015fik bir \u00f6zellik olan `getServerSideProps` i\u015flevini sa\u011flar.<\/p>\n
`getServerSideProps` i\u015flevi, sunucu taraf\u0131nda her istekte verileri alman\u0131za ve render etmenize olanak tan\u0131r. Ayr\u0131ca bu i\u015flev, sayfalar\u0131 \u00f6nbelle\u011fe alman\u0131za ve yeniden olu\u015fturman\u0131za olanak tan\u0131r. \u00d6rne\u011fin, sayfan\u0131zda bir API’den veri \u00e7ekiyorsan\u0131z, `getServerSideProps` i\u015flevini kullanarak verileri \u00f6nbelle\u011fe alabilir ve her istekte API’ye yeniden istek g\u00f6ndermekten ka\u00e7\u0131nabilirsiniz. <\/p>\n
\u00d6rnek bir `getServerSideProps` i\u015flevi:<\/p>\n
“`javascript
\nexport async function getServerSideProps() {
\n const response = await fetch(‘https:\/\/api.example.com\/data’);
\n const data = await response.json();<\/p>\n
return {
\n props: { data },
\n };
\n}
\n“`<\/p>\n
`revalidate` \u00f6zelli\u011fi, sayfalar\u0131n\u0131z\u0131 \u00f6nbelle\u011fe al\u0131p belirli bir s\u00fcre sonra veya bir olay ger\u00e7ekle\u015fti\u011finde yeniden olu\u015fturman\u0131z\u0131 sa\u011flar. `getServerSideProps` i\u015flevine `revalidate` \u00f6zelli\u011fini ekleyerek \u00f6nbelle\u011fe al\u0131nm\u0131\u015f verilerin ne s\u0131kl\u0131kla yenilenece\u011fini belirtebilirsiniz. <\/p>\n
\u00d6rnek bir `revalidate` kullan\u0131m\u0131:<\/p>\n
“`javascript
\nexport async function getServerSideProps() {
\n const response = await fetch(‘https:\/\/api.example.com\/data’);
\n const data = await response.json();<\/p>\n
return {
\n props: { data },
\n revalidate: 60, \/\/ Her 60 saniyede bir yeniden olu\u015ftur
\n };
\n}
\n“`<\/p>\n
Dinamik \u00f6nbellekleme, sayfalar\u0131n\u0131z\u0131 kullan\u0131c\u0131n\u0131n giri\u015fine veya di\u011fer de\u011fi\u015fkenlere g\u00f6re \u00f6nbelle\u011fe alman\u0131za olanak tan\u0131r. Next.js, bu t\u00fcr \u00f6nbelleklemeyi desteklemek i\u00e7in `getStaticProps` ve `getServerSideProps` i\u015flevlerini sunmaktad\u0131r. <\/p>\n
`getStaticProps` i\u015flevi, sayfalar\u0131 olu\u015fturma zaman\u0131nda verileri \u00f6nbelle\u011fe alman\u0131z\u0131 sa\u011flar. Bu i\u015flev, kullan\u0131c\u0131n\u0131n iste\u011fine ba\u011fl\u0131 olmayan statik verilere eri\u015fmenizi sa\u011flar. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131 listesi g\u00f6r\u00fcnt\u00fclemek i\u00e7in `getStaticProps` i\u015flevini kullanabilirsiniz. <\/p>\n
\u00d6rnek bir `getStaticProps` i\u015flevi:<\/p>\n
“`javascript
\nexport async function getStaticProps() {
\n const response = await fetch(‘https:\/\/api.example.com\/posts’);
\n const posts = await response.json();<\/p>\n
return {
\n props: { posts },
\n revalidate: 60, \/\/ Her 60 saniyede bir yeniden olu\u015ftur
\n };
\n}
\n“`<\/p>\n
Daha \u00f6nce de belirtildi\u011fi gibi, `getServerSideProps` i\u015flevi, sunucu taraf\u0131nda her istekte verileri alman\u0131za ve render etmenize olanak tan\u0131r. Bu i\u015flev, kullan\u0131c\u0131n\u0131n iste\u011fine ba\u011fl\u0131 dinamik verilere eri\u015fmenizi sa\u011flar. \u00d6rne\u011fin, bir kullan\u0131c\u0131 profilini g\u00f6r\u00fcnt\u00fclemek i\u00e7in `getServerSideProps` i\u015flevini kullanabilirsiniz.<\/p>\n
\u00d6rnek bir `getServerSideProps` i\u015flevi:<\/p>\n
“`javascript
\nexport async function getServerSideProps(context) {
\n const { userId } = context.query;<\/p>\n
const response = await fetch(`https:\/\/api.example.com\/users\/${userId}`);
\n const user = await response.json();<\/p>\n
return {
\n props: { user },
\n };
\n}
\n“`<\/p>\n
Next.js, geli\u015fmi\u015f \u00f6nbellekleme stratejileri uygulaman\u0131za yard\u0131mc\u0131 olmak i\u00e7in birka\u00e7 \u00f6zellik sunmaktad\u0131r.<\/p>\n
Next.js, `next\/cache` paketi arac\u0131l\u0131\u011f\u0131yla \u00f6nbelle\u011fe alma i\u015flevleri sunmaktad\u0131r. Bu paket, \u00f6nbelle\u011fe alma i\u00e7in `cache` nesnesi sa\u011flar. `cache` nesnesi, verileri \u00f6nbelle\u011fe almak i\u00e7in kullan\u0131labilen \u00e7e\u015fitli y\u00f6ntemler sa\u011flar. <\/p>\n
\u00d6rnek bir `next\/cache` kullan\u0131m\u0131:<\/p>\n
“`javascript
\nimport { cache } from ‘next\/cache’;<\/p>\n
export async function getServerSideProps() {
\n const key = ‘my-api-data’;
\n const cachedData = await cache.get(key);<\/p>\n
if (cachedData) {
\n return { props: { data: cachedData } };
\n }<\/p>\n
const response = await fetch(‘https:\/\/api.example.com\/data’);
\n const data = await response.json();<\/p>\n
await cache.set(key, data);<\/p>\n
return { props: { data } };
\n}
\n“`<\/p>\n
`next\/image` bile\u015feni, resimleri \u00f6nbelle\u011fe alman\u0131za ve optimize etmenize olanak tan\u0131r. Bu bile\u015fen, resimleri otomatik olarak yeniden boyutland\u0131r\u0131r ve formatlar ve performans\u0131 iyile\u015ftirmek i\u00e7in yerle\u015fik bir \u00f6nbelle\u011fe alma mekanizmas\u0131 sunar.<\/p>\n
\u00d6rnek bir `next\/image` kullan\u0131m\u0131:<\/p>\n
“`javascript
\nimport Image from ‘next\/image’;<\/p>\n
\n“`<\/p>\n
Uygulaman\u0131z i\u00e7in en uygun \u00f6nbellekleme stratejisi, uygulaman\u0131z\u0131n gereksinimlerine ba\u011fl\u0131 olacakt\u0131r. <\/p>\n
Statik i\u00e7erik (\u00f6rne\u011fin, blog yaz\u0131lar\u0131, \u00fcr\u00fcn sayfalar\u0131) i\u00e7in `getStaticProps` i\u015flevini kullanabilirsiniz. Bu i\u015flev, sayfalar\u0131 olu\u015fturma zaman\u0131nda verileri \u00f6nbelle\u011fe al\u0131r ve daha sonra bu veriler kullan\u0131larak sayfalar olu\u015fturulur. <\/p>\n
Dinamik i\u00e7erik (\u00f6rne\u011fin, kullan\u0131c\u0131 profilleri, haber ba\u015fl\u0131klar\u0131) i\u00e7in `getServerSideProps` i\u015flevini kullanabilirsiniz. Bu i\u015flev, her istekte verileri \u00f6nbelle\u011fe al\u0131r ve daha sonra bu veriler kullan\u0131larak sayfalar olu\u015fturulur. <\/p>\n
API istekleri i\u00e7in \u00f6nbelle\u011fe almay\u0131 kullanabilirsiniz. Bu, API’ye gereksiz istekler g\u00f6ndermekten ka\u00e7\u0131nman\u0131za yard\u0131mc\u0131 olabilir. `next\/cache` paketi, API istekleri i\u00e7in verileri \u00f6nbelle\u011fe almak i\u00e7in kullan\u0131labilir.<\/p>\n
Next.js, geli\u015fmi\u015f \u00f6nbellekleme stratejileri uygulaman\u0131za yard\u0131mc\u0131 olmak i\u00e7in \u00e7e\u015fitli \u00f6zelliklere sahiptir. Uygulaman\u0131z\u0131n gereksinimlerine uygun bir strateji se\u00e7mek, uygulaman\u0131z\u0131n performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir. \u00d6nbelleklemeyi etkili bir \u015fekilde uygulamak, sayfalar\u0131n h\u0131zl\u0131 bir \u015fekilde y\u00fcklenmesine yard\u0131mc\u0131 olabilir ve kullan\u0131c\u0131lara daha iyi bir deneyim sa\u011flayabilir. <\/p>\n