Meningkatkan Performa Next.js

Ada banyak cara untuk melakukan optimization di Next.js, yaitu dengan Image Optimization, Font Optimization, atau Script Optimization. Tapi pada artikel ini saya tidak akan membahas itu, melainkan Caching.

Apa itu caching?

Sederhananya caching adalah menyimpan data di tempat sementara (RAM), biasanya di memory aplikasi, atau di memory database (Redis). Keuntungan menerapkan caching ini bisa meningkatkan waktu respons dan mengurangi jumlah permintaan ke server. Tapi nyatanya menerapkan caching tidaklah semudah yang dibanyangkan.

Beruntungnya di Next.js secara otomatis telah menerapkan caching di /_next/static yang dapat menampung file JavaScript, CSS, gambar, dan media lainnya.

Dan kerennya lagi kamu juga dapat menggunakan caching di dalam header getServerSideProps dan API Routes untuk respons dinamis. dengan menggunakan stale-while-revalidate.

1// This value is considered fresh for ten seconds (s-maxage=10).
2// If a request is repeated within the next 10 seconds, the previously
3// cached value will still be fresh. If the request is repeated before 59 seconds,
4// the cached value will be stale but still render (stale-while-revalidate=59).
5//
6// In the background, a revalidation request will be made to populate the cache
7// with a fresh value. If you refresh the page, you will see the new value.
8
9export async function getServerSideProps({ res }) {
10  res.setHeader(
11    'Cache-Control',
12    'public, s-maxage=10, stale-while-revalidate=59'
13  );
14
15  const data = await getDataFromAPI();
16	
17  if (!data) return { notFound: true }
18	
19  return {
20    props: { data },
21  }
22}
23
jsxCopy

Note: Your deployment provider must support edge caching for dynamic responses. If you are self-hosting, you will need to add this logic to the edge yourself using a key/value store. If you are using Vercel, edge caching works without configuration.

Gimana, mantap bukan ? mungkin ini saja yang bisa saya bagikan semoga bermanfaat. See You 👋.