ตัวสร้าง Cache-Control Header

สร้าง Cache-Control header ด้วย max-age, s-maxage, immutable และ stale-while-revalidate พร้อม snippet ของ nginx, Apache .htaccess และ Express.js ทันที

Loading tool...

ตัวสร้าง Cache-Control Header คืออะไร?

ตัวสร้าง Cache-Control Header ที่ประกอบค่าตามมาตรฐานจากทุก directive — max-age, s-maxage, public/private, no-cache, no-store, must-revalidate, proxy-revalidate, immutable, stale-while-revalidate และ stale-if-error — พร้อมคืน snippet ของ nginx, Apache และ Express.js ที่ตรงกัน

ประโยชน์หลัก

ได้ syntax ถูกต้องโดยไม่ต้องจำ RFC
strategy เดียวกันทั้ง server, CDN และ app
preset ปรับมาแล้วสำหรับงาน static, API, SPA และ CDN
ใช้ offline ใน static export — ไม่มีการอัปโหลด

กรณีการใช้งาน

•ตั้ง cache แบบ immutable หนึ่งปีสำหรับ bundle JS/CSS ที่มี fingerprint
•เพิ่มหน้าต่าง stale-while-revalidate ให้ API response
•ตั้ง s-maxage ให้ CDN ที่อยู่หน้า origin
•วาง rule ชุดเดียวกันลง nginx.conf, .htaccess หรือ Express middleware

วิธีสร้าง Cache-Control header

เริ่มจาก preset: เลือก Static Assets, API Response, SPA / HTML หรือ Immutable CDN ซึ่งเติมค่าที่พิสูจน์แล้วให้ทันที และการแก้ค่าใด ๆ จะเปลี่ยนตัวเลือกเป็น Custom
ปรับอายุแคชและ directive: ตั้ง max-age และ s-maxage เป็นวินาที เพิ่ม stale-while-revalidate หรือ stale-if-error เพื่อความทนทานของ CDN และติ๊ก directive อย่าง no-cache, no-store, must-revalidate หรือ immutable
เลือก visibility: ใช้ dropdown public / private โดย private จะบอก shared cache อย่าง CDN ไม่ให้เก็บ response ซึ่งสำคัญกับเนื้อหาที่แสดงเฉพาะตัวหรือต้องล็อกอิน
คัดลอก header และ snippet: กด Copy เพื่อคัดลอกค่า Cache-Control หยิบ snippet ของ nginx, Apache .htaccess หรือ Express.js ที่ต้องการ หรือกด Download เพื่อบันทึกทุกอย่างเป็น cache-control.txt

คุณสมบัติหลัก

builder ครบทุก directive ของ Cache-Control: max-age, s-maxage, public/private, no-cache, no-store, must-revalidate, proxy-revalidate, immutable, stale-while-revalidate และ stale-if-error
4 preset สำหรับ production: ไฟล์ static, API response, SPA HTML และ immutable CDN
snippet ของ nginx, Apache .htaccess และ Express.js middleware พร้อมวาง สร้างจากค่าที่ตั้งไว้ตอนนั้น
hint แปลงวินาทีเป็นหน่วยอ่านง่ายทุกช่อง 31536000 อ่านเป็น 365d
ทำงานฝั่ง client ใน static export ทั้งหมด — ไม่เรียก API ไม่อัปโหลด ใช้ offline ได้

คำถามที่พบบ่อย

ควรเลือก preset แบบไหน

Static Assets แคชหนักสำหรับไฟล์ fingerprint (public, max-age=31536000, immutable), API Response บังคับ revalidate แบบ private, SPA / HTML ส่ง no-cache เพื่อให้ HTML ตรวจทุกครั้ง และ Immutable CDN เพิ่ม s-maxage พร้อม stale-while-revalidate สำหรับของหลัง CDN

max-age กับ s-maxage ต่างกันอย่างไร

max-age คืออายุแคชในเบราว์เซอร์ ส่วน s-maxage ใช้กับ shared cache อย่าง CDN และ proxy เท่านั้น ตั้งทั้งคู่เพื่อให้ CDN เก็บได้นานกว่าเบราว์เซอร์ของผู้ใช้ปลายทาง

นำ header ไปใช้บนเซิร์ฟเวอร์อย่างไร

ใต้ header มี snippet สำเร็จรูปสำหรับ nginx, Apache .htaccess และ Express.js middleware พร้อมปุ่ม copy แยกกัน โดย snippet ของ nginx จะเปลี่ยนเป็น location block สำหรับไฟล์ fingerprint เมื่อ max-age ตั้งแต่หนึ่งวันขึ้นไป

no-cache กับ no-store หน้าตาคล้ายกัน ควรใช้ตัวไหน

no-store ห้ามบันทึก response ไว้เลย ส่วน no-cache อนุญาตให้เก็บแต่ต้อง revalidate ก่อนใช้ซ้ำ ใช้ no-store กับข้อมูลที่อ่อนไหวจริง ๆ และ no-cache กับเนื้อหาที่ต้องเทียบกับ origin เสมอ

คู่มือฉบับละเอียด

Cache-Control Header Generator: สร้าง Header แคชที่แม่นยำในไม่กี่นาที

อ่านคู่มือฉบับเต็ม →

ตัวสร้าง Cache-Control Header

Preset

max-age (วินาทีที่ browser cache)

อายุ cache ของ browser · 365d

s-maxage (วินาทีที่ CDN cache)

อายุ cache ของ shared/CDN · ปิดอยู่

stale-while-revalidate (วินาที)

เสิร์ฟของเก่าไปก่อนระหว่างดึงของใหม่ · ปิดอยู่

stale-if-error (วินาที)

เสิร์ฟของเก่าเมื่อ origin error · ปิดอยู่

public / private

private ปิดการ cache ของ shared/CDN

Header Cache-Control

public, max-age=31536000, immutable

snippet สำหรับ nginx

# nginx.conf
# Fingerprinted static assets — cache hard
location ~* \.(?:css|js|png|jpg|jpeg|gif|svg|ico|woff2?)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
    etag on;
    access_log off;
}

snippet สำหรับ Apache .htaccess

# .htaccess
<IfModule mod_headers.c>
  <FilesMatch "\.(?:css|js|png|jpg|jpeg|gif|svg|ico|woff2?)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
</IfModule>

snippet สำหรับ Express.js

// Express.js middleware
app.use((req, res, next) => {
  res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
  next();
});

เกี่ยวกับตัวสร้าง Cache-Control Header

เครื่องมือนี้สร้าง Cache-Control header ที่ถูก syntax ครบทุก directive มาตรฐาน — max-age, s-maxage, public/private, no-cache, no-store, must-revalidate, proxy-revalidate, immutable, stale-while-revalidate และ stale-if-error พร้อมสร้าง snippet ของ nginx, Apache .htaccess และ Express.js ให้พร้อมวาง ทั้งหมดทำงานใน browser ไม่มีการอัปโหลดข้อมูล

ทำไมต้องใช้เครื่องมือนี้?

•ได้ syntax ของ Cache-Control ถูกต้องตั้งแต่ครั้งแรก — พิมพ์ผิดนิดเดียวอาจกลายเป็นคอนเทนต์เก่าหรือ revalidation รัว ๆ
•มี 4 preset สำหรับงานจริง: ไฟล์ static, API response, HTML ของ SPA และคอนเทนต์ immutable บน CDN
•เทียบกับ HTTP Cache Header Generator ตัวก่อน ๆ เครื่องมือนี้เปิดทุก directive (รวม proxy-revalidate และ stale-if-error) พร้อมปรับหน้าต่าง stale ได้อิสระ
•สร้าง snippet ของ nginx, Apache และ Express.js พร้อมกันในคลิกเดียว server, CDN และ app ใช้ strategy เดียวกันทั้งชุด
•ทำงาน 100% ฝั่ง client — โดเมนและ path ของคุณไม่หลุดออกจาก browser

คุณสมบัติ

✓builder ครบทุก directive ของ Cache-Control: max-age, s-maxage, public/private, no-cache, no-store, must-revalidate, proxy-revalidate, immutable, stale-while-revalidate, stale-if-error
✓4 preset สำหรับ production: ไฟล์ static, API response, SPA HTML, immutable CDN
✓snippet พร้อมวาง 3 แบบ: nginx.conf, Apache .htaccess และ middleware ของ Express.js
✓มี hint แปลงวินาทีเป็นหน่วยอ่านง่ายข้างช่องกรอกทุกช่อง (730h → 30d)
✓คัดลอกแต่ละ snippet แยกกัน หรือดาวน์โหลดทั้งชุดเป็นไฟล์ text — ใช้งาน offline ได้

Loading tool...