Streaming และ Caching

การ Init แบบ One-Shot (Default)

โดย default gb.init() ทำ HTTP fetch ครั้งเดียวเพื่อดึง feature definitions ล่าสุดจาก GrowthBook CDN วิธีนี้เหมาะกับหลาย use case แต่หมายความว่า flag changes จะมีผลก็ต่อเมื่อ init() ทำงานครั้งถัดไป — โดยทั่วไปคือเมื่อ page load หรือ server restart

Streaming ผ่าน SSE

GrowthBook รองรับ Server-Sent Events เพื่อ push definition updates แบบ realtime ส่ง streaming: true ใน init() หรือเรียก gb.startStreaming() เมื่อ flag values เปลี่ยนใน GrowthBook UI SDK จะรับ update ภายในไม่กี่วินาที — ไม่ต้อง redeploy

วิธีนี้มีประโยชน์มากสำหรับ long-lived processes (Node servers, SPA ที่เปิดอยู่หลายชั่วโมง) ที่ต้องการให้ flag changes มีผลทันทีโดยไม่ต้อง restart

Feature Cache

SDK เก็บ in-memory cache โดยใช้ clientKey เป็น key cache นี้รองรับค่า staleTTL (default 60 วินาที) หลังจาก TTL หมดอายุ การเรียก init() ครั้งถัดไปจะ re-fetch ได้ ตั้งค่าด้วย configure({ staleTTL: 30000 })

เมื่อเปิดใช้ streaming cache จะถูก update โดย SSE events ที่เข้ามา ทำให้ TTL มีความสำคัญน้อยลง — ทำหน้าที่เป็น fallback สำหรับ reconnection scenarios

Manual Refresh

await gb.refreshFeatures() บังคับ re-fetch ทันที โดยไม่สนใจ cache ใช้หลังจาก user action ที่อาจสัมพันธ์กับ flag change (เช่น หลังจาก user อัปเกรด plan) หรือเมื่อ reconnect หลังเครือข่ายขัดข้อง

setPayload

gb.setPayload(payload) inject feature definitions object โดยตรงเข้าสู่ SDK โดยไม่ต้องทำ network request เป็น pattern ที่แนะนำสำหรับ SSR: ดึง definitions บน server (cache ได้ตามต้องการ) แล้ว serialize ลงในหน้า จากนั้นเรียก setPayload บน client SDK ฝั่ง client จะเริ่มต้นด้วย flag values ที่ถูกต้องทันที — ไม่ต้องรอ round-trip เพิ่มเติม

import { GrowthBook, configure } from '@growthbook/growthbook';

// Configure global cache TTL (30 seconds)
configure({ staleTTL: 30000 });

const gb = new GrowthBook({
  apiHost: 'https://cdn.growthbook.io',
  clientKey: 'sdk-abc123',
});

// Init with streaming enabled — flags update in real time
await gb.init({
  timeout: 3000,
  streaming: true,
});

// The SDK now listens for SSE updates automatically.
// Flags will refresh within seconds when changed in the UI.

// Manual refresh (useful after a user event or on reconnect)
await gb.refreshFeatures();

// Inject a payload fetched server-side (avoids a client-side request)
const ssrPayload = { features: { 'dark-mode': { defaultValue: true } } };
gb.setPayload(ssrPayload);

console.log(gb.isOn('dark-mode')); // true

ข้อแลกเปลี่ยน

ตัวเลือก	Benefit	Cost
Streaming update (SSE)	flag เปลี่ยนแบบ real-time ทันทีที่แก้ใน UI	เพิ่ม connection overhead ต่อ client
Polling / cache แบบปกติ	ประหยัด resource กว่า	มี delay กว่าจะเห็นการเปลี่ยนแปลง

ข้อผิดพลาดที่พบบ่อย

ตั้ง cache TTL นานเกินไปทำให้ flag เปลี่ยนใน UI แต่ผู้ใช้ไม่เห็นผลเป็นเวลานาน
ไม่ปิด SSE connection ตอน component unmount ทำให้ connection รั่ว
ไม่มี fallback เมื่อ streaming connection หลุด

💡 ตัวอย่างจากของจริง

แอป mobile ขนาดใหญ่มักใช้ cache แบบ local-first ร่วมกับ background refresh เพื่อให้ flag ทำงานได้แม้ตอน network ไม่ดี