tiktok นับยอดวิวยังไง

Caching เป็นกระบวนการจัดเก็บข้อมูลเพื่อให้สามารถเข้าถึงได้อย่างรวดเร็วในอนาคต

Caching สามารถใช้เพื่อปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณโดยการลดจำนวนคำขอไปยังแหล่งข้อมูลภายนอก

Next.js มีระบบแคชในตัวที่ช่วยให้คุณสามารถแคชข้อมูลได้หลายวิธี

แคชข้อมูลแบบคงที่

Next.js แคชข้อมูลแบบคงที่โดยอัตโนมัติ ซึ่งหมายความว่าไฟล์แบบคงที่ทั้งหมดในโฟลเดอร์ public จะถูกแคชโดยอัตโนมัติ

สิ่งนี้รวมถึงไฟล์ HTML, CSS, JavaScript, รูปภาพ และไฟล์อื่นๆ

แคชข้อมูลแบบคงจะมีประโยชน์สำหรับการปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณโดยลดจำนวนคำขอ HTTP ที่ต้องทำเพื่อโหลดหน้าเว็บ

แคชข้อมูลแบบไดนามิก

Next.js ยังอนุญาตให้คุณแคชข้อมูลแบบไดนามิกได้อีกด้วย

ข้อมูลแบบไดนามิกคือข้อมูลที่สามารถเปลี่ยนแปลงได้เมื่อเวลาผ่านไป เช่น ข้อมูลจาก API

คุณสามารถแคชข้อมูลแบบไดนามิกโดยใช้ useMemo hook หรือ useCallback hook

useMemo hook จะแคชผลลัพธ์ของนิพจน์ที่คุณระบุไว้

useCallback hook จะแคชฟังก์ชันที่คุณระบุไว้

แคชข้อมูลแบบไดนามิกสามารถช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณโดยลดจำนวนคำขอไปยังแหล่งข้อมูลภายนอก

แคชข้อมูลแบบฝั่งเซิร์ฟเวอร์

Next.js ยังอนุญาตให้คุณแคชข้อมูลแบบฝั่งเซิร์ฟเวอร์ได้อีกด้วย

ข้อมูลแบบฝั่งเซิร์ฟเวอร์คือข้อมูลที่ถูกแคชโดยเซิร์ฟเวอร์ของ Next.js

คุณสามารถแคชข้อมูลแบบฝั่งเซิร์ฟเวอร์โดยใช้ getStaticProps หรือ getServerSideProps

getStaticProps จะแคชผลลัพธ์ของฟังก์ชันที่คุณระบุไว้

getServerSideProps จะแคชผลลัพธ์ของฟังก์ชันที่คุณระบุไว้และส่งกลับไปยังไคลเอนต์

แคชข้อมูลแบบฝั่งเซิร์ฟเวอร์สามารถช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณโดยลดจำนวนคำขอไปยังแหล่งข้อมูลภายนอก

การรีเฟรชแคช

คุณสามารถรีเฟรชแคชได้โดยใช้ useEffect hook

ตัวอย่างเช่น ไฟล์ต่อไปนี้จะรีเฟรชแคชข้อมูลแบบไดนามิกทุกๆ 5 นาที:

import React, { useEffect } from 'react';

export default function MyComponent() {
  useEffect(() => {
    // Refresh the cache every 5 minutes
    setInterval(() => {
      // Refresh the cache
    }, 300000);
  }, []);

  // ...
}

ไฟล์นี้ใช้ useEffect hook เพื่อเรียกใช้ฟังก์ชัน setInterval() ซึ่งจะตั้งเวลาเพื่อเรียกใช้ฟังก์ชันที่กำหนดทุกๆ 5 นาที

ฟังก์ชันที่กำหนดจะรีเฟรชแคชข้อมูลแบบไดนามิก

เคล็ดลับในการแคชข้อมูลใน Next.js

• แคชข้อมูลที่คุณใช้บ่อยๆ
• แคชข้อมูลที่มีขนาดใหญ่หรือซับซ้อน
• แคชข้อมูลที่เปลี่ยนแปลงไม่บ่อยนัก
• รีเฟรชแคชเป็นระยะๆ

การแคชข้อมูลใน Next.js เป็นวิธีที่ดีในการปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณ