Meningkatkan Performa Next.js

Published on 07 Dec, 2021 and it's getting updated on 23 Sep

Written by Alfian Naufal

Fill in Next.js

ArticlesMeningkatkan 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.

// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.

export async function getServerSideProps({ res }) {
  res.setHeader(
    'Cache-Control',
    'public, s-maxage=10, stale-while-revalidate=59'
  );

  const data = await getDataFromAPI();
	
  if (!data) return { notFound: true }
	
  return {
    props: { data },
  }
}

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 👋.

Alfian Naufal

Kami tidak tahu banyak tentang dia, tetapi kami yakin dia adalah seseorang yang hebat.
5

Share on

Parsinta is a Trademark of Irsyad A. Panjaitan.

© Copyright 2022 Parsinta. All rights reserved. Yes, all of them (EC00202255558).