การใช้ฟังก์ชัน cacheLife ใน Next.js 16.x (ฟีเจอร์ CacheComponents)
ฟังก์ชัน cacheLife ใช้สำหรับกำหนดอายุการเก็บแคช (cache lifetime) ของฟังก์ชันหรือคอมโพเนนต์ โดยใช้ร่วมกับคำสั่ง use cache และต้องอยู่ภายในขอบเขตของฟังก์ชันหรือคอมโพเนนต์นั้นเท่านั้นครับ
.
ตัวอย่างคำสั่ง:
‘use cache’
import { cacheLife } from ‘next/cache’
export default async function BlogPage() {
cacheLife(‘days’) // Blog content updated daily
const posts = await getBlogPosts()
return <div>{/* render posts */}</div>
}
.
จากโค้ดเป็นการ cache BlogPage ด้วยการใช้ฟังก์ชัน cacheLife โดยมีการส่งพารามิเตอร์ คือ days เรียกว่า cache profiles หมายถึง
– ผู้ใช้จะได้เนื้อหาจาก cache ทันที (ฝั่ง client) เป็นระยะเวลา 5 นาที ก่อนที่จะตรวจสอบการกับฝั่ง server เพื่ออัปเดตใหม่ (stale)
– หลังครบ 1 วัน หากมี request ครั้งถัดไปจะเริ่มมีการรีเฟรชเบื้องหลัง (revalidate)
– หากไม่มีคำร้องขอเลยจนถึง 1 สัปดาห์ข้อมูลแคชจะถือว่า “หมดอายุ” และคำร้องขอครั้งถัดไปจะต้องรีสร้างก่อนส่ง (expire)
.
การใช้โปรไฟล์ Cache สำเร็จรูป (Preset cache profiles)
โปรไฟล์แคช (Cache profiles) จะควบคุมพฤติกรรมการแคชของระบบ Next.js ผ่านคุณสมบัติด้านเวลา 3 ค่า ได้แก่
1. stale: ระยะเวลาที่ฝั่ง client สามารถใช้ข้อมูลในแคชได้ โดยไม่ต้องตรวจสอบกับ server ใหม่
2. revalidate: เมื่อเวลานี้ผ่านไป เมื่อมี request ครั้งถัดไปจะกระตุ้นให้ server ทำการรีเฟรชข้อมูลในพื้นหลัง (background refresh)
3. expire: เมื่อเวลานี้ผ่านไปโดยไม่มีการร้องขอใด ๆ การร้องขอครั้งถัดไปจะต้องรอให้ server สร้างข้อมูลใหม่ก่อนจึงจะส่งกลับมา
.
ทุกคนสามารถดูตามภาพตาราง และเลือกให้เหมาะสมกับงานของตัวเองได้เลยนะครับ จริงๆ แล้วนอกจาก preset ที่ Next.js เตรียมไว้ให้ เรายังสามารถ custom แบบละเอียดได้ด้วยนะครับ