Qwik Resumability Troubleshooting แก้ปัญหา —

Qwik Resumability

Qwik Framework Resumability Hydration Serialization Lazy Loading TTI Performance SSR QwikCity Edge Rendering

Framework	Loading Strategy	TTI	Bundle Size	Complexity
Qwik	Resumability (O(1))	เร็วมาก	เล็กมาก (ตาม Interaction)	ปานกลาง
React (Next.js)	Hydration (O(n))	ช้าตาม App Size	ใหญ่ (Full Bundle)	ต่ำ (คุ้นเคย)
Vue (Nuxt)	Hydration (O(n))	ปานกลาง	ปานกลาง	ต่ำ
Astro	Islands (Partial)	เร็ว	เล็ก (Islands only)	ต่ำ
SolidJS	No VDOM Fine-grained	เร็ว	เล็ก	ปานกลาง

ปัญหาและวิธีแก้

# === Qwik Common Issues & Fixes ===

# Issue 1: Serialization Error
# ❌ Wrong - Function in store
# const store = useStore({
#   data: [],
#   fetchData: async () => { ... }  // Cannot serialize function!
# });
#
# ✅ Correct - Use separate handler
# const store = useStore({ data: [] });
# const fetchData = $(() => {
#   // ... fetch logic
#   store.data = await response.json();
# });

# Issue 2: useSignal vs React useState
# ❌ Wrong - React style
# const [count, setCount] = useState(0);
#
# ✅ Correct - Qwik style
# const count = useSignal(0);
# // Read: count.value
# // Write: count.value = count.value + 1;

# Issue 3: Event Handler without $
# ❌ Wrong
# 
#
# ✅ Correct
# 

# Issue 4: Third-party library not compatible
# ❌ Wrong - Direct import
# import Chart from 'chart.js';
#
# ✅ Correct - Use useVisibleTask$ for client-only
# useVisibleTask$(() => {
#   const Chart = await import('chart.js');
#   // Use Chart here
# });

from dataclasses import dataclass

@dataclass
class QwikIssue:
    issue: str
    symptom: str
    cause: str
    fix: str
    prevention: str

issues = [
    QwikIssue("Serialization Error",
        "Error: Cannot serialize Function/Class/DOM",
        "เก็บ Object ที่ Serialize ไม่ได้ใน State",
        "ใช้ noSerialize() หรือย้ายไป useVisibleTask$",
        "เก็บเฉพาะ Primitive, Array, Plain Object ใน State"),
    QwikIssue("Closure Scope Issue",
        "ตัวแปรใน Handler มีค่าเก่า/ผิด",
        "Closure ไม่ถูก Capture ถูกต้องเมื่อ Resume",
        "ใช้ useSignal/useStore แทน Local Variable",
        "ใช้ Reactive State เสมอ ไม่ใช่ let/const"),
    QwikIssue("SSR Mismatch",
        "Hydration mismatch warning ใน Console",
        "Server render HTML ไม่ตรงกับ Client",
        "ใช้ useVisibleTask$ สำหรับ Client-only Logic",
        "หลีกเลี่ยง window/document ใน Component Body"),
    QwikIssue("Third-party Library Error",
        "Library ใช้ window/document ตอน Import",
        "Library ไม่รองรับ SSR/Serialization",
        "Dynamic import ใน useVisibleTask$",
        "ตรวจสอบ SSR Compatibility ก่อนใช้"),
    QwikIssue("Slow Initial Load",
        "Prefetch มากเกินไป หรือ Bundle ใหญ่",
        "ไม่ใช้ component$ ครอบ หรือ Import ทั้ง Library",
        "ใช้ component$ ทุกที่ ใช้ Dynamic Import",
        "ดู Qwik Insights วิเคราะห์ Bundle"),
]

print("=== Common Issues ===")
for i in issues:
    print(f"\n  [{i.issue}]")
    print(f"    Symptom: {i.symptom}")
    print(f"    Cause: {i.cause}")
    print(f"    Fix: {i.fix}")
    print(f"    Prevention: {i.prevention}")