Next.js Gelişmiş Önbellekleme Stratejileri
Next.js, performans odaklı uygulamalar geliştirmek için mükemmel bir frameworktür. Uygulama performansını artırmanın en önemli yollarından biri de önbelleklemedir. Next.js, önbelleklemeyi kolaylaştırmak için yerleşik özellikler sunmaktadır. Ancak, uygulamanız büyüdükçe daha gelişmiş önbellekleme stratejileri kullanmanız gerekebilir. Bu makalede, Next.js’de kullanabileceğiniz gelişmiş önbellekleme stratejilerini ele alacağız.
Statik Önbellekleme
Statik önbellekleme, bir dosyanın önbelleğe alınması ve istekler için sunucunun bu önbelleğe alınmış sürümü döndürmesi işlemidir. Next.js, bu tür önbelleklemeyi desteklemek için yerleşik bir özellik olan `getServerSideProps` işlevini sağlar.
`getServerSideProps` İşlevi
`getServerSideProps` işlevi, sunucu tarafında her istekte verileri almanıza ve render etmenize olanak tanır. Ayrıca bu işlev, sayfaları önbelleğe almanıza ve yeniden oluşturmanıza olanak tanır. Örneğin, sayfanızda bir API’den veri çekiyorsanız, `getServerSideProps` işlevini kullanarak verileri önbelleğe alabilir ve her istekte API’ye yeniden istek göndermekten kaçınabilirsiniz.
Örnek bir `getServerSideProps` işlevi:
“`javascript
export async function getServerSideProps() {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
return {
props: { data },
};
}
“`
`revalidate` Özelliği
`revalidate` özelliği, sayfalarınızı önbelleğe alıp belirli bir süre sonra veya bir olay gerçekleştiğinde yeniden oluşturmanızı sağlar. `getServerSideProps` işlevine `revalidate` özelliğini ekleyerek önbelleğe alınmış verilerin ne sıklıkla yenileneceğini belirtebilirsiniz.
Örnek bir `revalidate` kullanımı:
“`javascript
export async function getServerSideProps() {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
return {
props: { data },
revalidate: 60, // Her 60 saniyede bir yeniden oluştur
};
}
“`
Dinamik Önbellekleme
Dinamik önbellekleme, sayfalarınızı kullanıcının girişine veya diğer değişkenlere göre önbelleğe almanıza olanak tanır. Next.js, bu tür önbelleklemeyi desteklemek için `getStaticProps` ve `getServerSideProps` işlevlerini sunmaktadır.
`getStaticProps` İşlevi
`getStaticProps` işlevi, sayfaları oluşturma zamanında verileri önbelleğe almanızı sağlar. Bu işlev, kullanıcının isteğine bağlı olmayan statik verilere erişmenizi sağlar. Örneğin, bir blog yazısı listesi görüntülemek için `getStaticProps` işlevini kullanabilirsiniz.
Örnek bir `getStaticProps` işlevi:
“`javascript
export async function getStaticProps() {
const response = await fetch(‘https://api.example.com/posts’);
const posts = await response.json();
return {
props: { posts },
revalidate: 60, // Her 60 saniyede bir yeniden oluştur
};
}
“`
`getServerSideProps` İşlevi
Daha önce de belirtildiği gibi, `getServerSideProps` işlevi, sunucu tarafında her istekte verileri almanıza ve render etmenize olanak tanır. Bu işlev, kullanıcının isteğine bağlı dinamik verilere erişmenizi sağlar. Örneğin, bir kullanıcı profilini görüntülemek için `getServerSideProps` işlevini kullanabilirsiniz.
Örnek bir `getServerSideProps` işlevi:
“`javascript
export async function getServerSideProps(context) {
const { userId } = context.query;
const response = await fetch(`https://api.example.com/users/${userId}`);
const user = await response.json();
return {
props: { user },
};
}
“`
Next.js Önbellekleme Özellikleri
Next.js, gelişmiş önbellekleme stratejileri uygulamanıza yardımcı olmak için birkaç özellik sunmaktadır.
`next/cache`
Next.js, `next/cache` paketi aracılığıyla önbelleğe alma işlevleri sunmaktadır. Bu paket, önbelleğe alma için `cache` nesnesi sağlar. `cache` nesnesi, verileri önbelleğe almak için kullanılabilen çeşitli yöntemler sağlar.
Örnek bir `next/cache` kullanımı:
“`javascript
import { cache } from ‘next/cache’;
export async function getServerSideProps() {
const key = ‘my-api-data’;
const cachedData = await cache.get(key);
if (cachedData) {
return { props: { data: cachedData } };
}
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
await cache.set(key, data);
return { props: { data } };
}
“`
`next/image`
`next/image` bileşeni, resimleri önbelleğe almanıza ve optimize etmenize olanak tanır. Bu bileşen, resimleri otomatik olarak yeniden boyutlandırır ve formatlar ve performansı iyileştirmek için yerleşik bir önbelleğe alma mekanizması sunar.
Örnek bir `next/image` kullanımı:
“`javascript
import Image from ‘next/image’;
“`
Önbellekleme Stratejileri Uygulama
Uygulamanız için en uygun önbellekleme stratejisi, uygulamanızın gereksinimlerine bağlı olacaktır.
Statik İçerik için Statik Önbellekleme
Statik içerik (örneğin, blog yazıları, ürün sayfaları) için `getStaticProps` işlevini kullanabilirsiniz. Bu işlev, sayfaları oluşturma zamanında verileri önbelleğe alır ve daha sonra bu veriler kullanılarak sayfalar oluşturulur.
Dinamik İçerik için Dinamik Önbellekleme
Dinamik içerik (örneğin, kullanıcı profilleri, haber başlıkları) için `getServerSideProps` işlevini kullanabilirsiniz. Bu işlev, her istekte verileri önbelleğe alır ve daha sonra bu veriler kullanılarak sayfalar oluşturulur.
API İstekleri için Önbellekleme
API istekleri için önbelleğe almayı kullanabilirsiniz. Bu, API’ye gereksiz istekler göndermekten kaçınmanıza yardımcı olabilir. `next/cache` paketi, API istekleri için verileri önbelleğe almak için kullanılabilir.
Sonuç
Next.js, gelişmiş önbellekleme stratejileri uygulamanıza yardımcı olmak için çeşitli özelliklere sahiptir. Uygulamanızın gereksinimlerine uygun bir strateji seçmek, uygulamanızın performansını önemli ölçüde iyileştirebilir. Önbelleklemeyi etkili bir şekilde uygulamak, sayfaların hızlı bir şekilde yüklenmesine yardımcı olabilir ve kullanıcılara daha iyi bir deneyim sağlayabilir.
Önbellekleme, web uygulamaları için olmazsa olmaz bir optimizasyon yöntemidir. Bu konuda daha fazla bilgi edinmek ve uygulamanız için en uygun stratejiyi belirlemek için web sitemi ziyaret edebilirsiniz.
#Etiketler
Next.js, Önbellekleme, Statik Önbellekleme, Dinamik Önbellekleme, getStaticProps, getServerSideProps, revalidate, next/cache, next/image, Performans Optimizasyonu