ดึงข้อมูล 100k CSV/Excel ลง DataTable ไม่ให้ Browser ค้าง พร้อม Prompt AI!

byBoonyadol Morruchai (Senior Full-stack Developer) •09:29

0

ดึงข้อมูล 100k ลง DataTable ยังไงไม่ให้ Browser ค้าง? พร้อมแจกสูตร Prompt สั่งงาน AI ครั้งเดียวจบ

ผมเคยเจอปัญหาแบบนี้ตอนทำระบบจัดการข้อมูลสำหรับแพลตฟอร์มอีคอมเมิร์ซขนาดกลาง ช่วงนั้นเรากำลังพัฒนา feature ใหม่ที่ต้องดึงข้อมูลสินค้าทั้งหมด (ราวๆ 100,000 รายการ) เพื่อนำมาแสดงบนหน้าเว็บไซต์ ปัญหาคือ Browser ของผู้ใช้งานค้างเป็นระยะๆ บางคนถึงกับต้องรีสตาร์ทเครื่องเลย! ตอนนั้นเรากำลังใช้ JavaScript และ Fetch API ดึงข้อมูลมาแสดงผลแบบเรียลไทม์ ซึ่งมันเริ่มไม่ไหวแล้ว เพราะแต่ละ request ส่งข้อมูลจำนวนมาก ทำให้เกิด bottleneck ที่ Browser

ปัญหาหลักคือ Browser มีข้อจำกัดในการจัดการกับข้อมูลขนาดใหญ่ในคราวเดียว มันไม่สามารถประมวลผลข้อมูล 100,000 รายการพร้อมกันได้ ทำให้เกิดปัญหาเรื่อง memory และ processing power ส่งผลให้ Browser ค้าง การดึงข้อมูลแบบดึงทีละน้อย (small chunks) อาจจะช่วยได้บ้าง แต่ก็ยังไม่สามารถแก้ปัญหาได้อย่างยั่งยืน เพราะยังคงต้องมีการแลกเปลี่ยนข้อมูลระหว่าง Browser และ Server จำนวนมาก ยิ่งถ้าข้อมูลมีโครงสร้างซับซ้อน หรือมีการทำ transformation เพิ่มเติมด้วย JavaScript ก็จะยิ่งทำให้ปัญหาแย่ลง

1. Pagination และ Chunking: เทคนิคพื้นฐาน

วิธีแก้ปัญหาที่ง่ายที่สุดและเป็นที่นิยมคือการใช้ Pagination และ Chunking เราจะแบ่งข้อมูลออกเป็น chunk ขนาดเล็กๆ แล้วดึงมาแสดงผลทีละ chunk พร้อมกับหน้า pagination ให้ผู้ใช้งานสามารถเลือกหน้าได้เอง ตัวอย่าง code (JavaScript) จะเป็นดังนี้:


    async function fetchData(page, pageSize) {
      const url = `https://api.example.com/products?page=${page}&pageSize=${pageSize}`;
      const response = await fetch(url);
      const data = await response.json();
      return data;
    }

    // ตัวอย่างการใช้งาน
    const page = 1;
    const pageSize = 50;
    const products = [];
    for (let i = (page - 1) * pageSize; i < page * pageSize; i++) {
      const product = await fetchData(page, pageSize);
      products.push(product);
    }
    console.log(products);

จริงๆ ผมไม่ค่อยชอบวิธีนี้เพราะมันซับซ้อน และต้องเขียน code เอง แต่ก็เป็นจุดเริ่มต้นที่ดีในการทำความเข้าใจปัญหา

2. Server-Side Rendering (SSR) และ Pre-fetching

การใช้ SSR จะช่วยลดภาระของ Browser ได้อย่างมาก เพราะ Server จะทำการ render ข้อมูล HTML ให้เสร็จสิ้นก่อนส่งให้ Browser ทำให้ Browser ไม่ต้องทำอะไรมากนัก แค่แสดงผล HTML ที่ได้มาเท่านั้น นอกจากนี้ เรายังสามารถทำ Pre-fetching ข้อมูลได้อีกด้วย คือ Server จะดึงข้อมูลที่ผู้ใช้งานน่าจะสนใจมาไว้ใน Browser ล่วงหน้า เพื่อให้ผู้ใช้งานไม่ต้องรอ Browser ดึงข้อมูลมาทีละรายการ

เทคโนโลยีที่เหมาะกับการทำ SSR คือ Next.js หรือ Gatsby ซึ่งมี built-in support สำหรับ SSR และ Pre-fetching การทำ Pre-fetching อาจจะใช้ Intersection Observer API ร่วมด้วย เพื่อให้ Server ดึงข้อมูลเฉพาะส่วนที่ Browser มองเห็นเท่านั้น ซึ่งจะช่วยลดปริมาณข้อมูลที่ต้องส่งให้ Browser ได้อย่างมาก

3. Prompt Engineering และ AI สำหรับ Data Transformation

ตอนนี้มาถึงส่วนที่น่าสนใจ! เราสามารถใช้ AI (เช่น ChatGPT) ช่วยในการ transform ข้อมูลได้ด้วย Prompt Engineering ที่ดี แทนที่จะเขียน JavaScript เองเพื่อทำ transformation เราสามารถสั่งงาน AI ให้ทำ transformation แทนได้


    import openai

    openai.api_key = "YOUR_API_KEY"

    def transform_data(data):
      prompt = f"Transform the following JSON data into a CSV format with columns: 'id', 'name', 'price', 'category': {data}"
      response = openai.Completion.create(
        engine="text-davinci-003",
        prompt=prompt,
        max_tokens=200
      )
      return response.choices[0].text

    # ตัวอย่างการใช้งาน
    data = '{"id": 1, "name": "Product A", "price": 10.99, "category": "Electronics"}'
    csv_data = transform_data(data)
    print(csv_data)

เราสามารถสร้าง Prompt ที่ซับซ้อนขึ้นได้ เช่น "Transform the following JSON data into a CSV format with columns: 'id', 'name', 'price', 'category', and also calculate the total price for each product. Output the result in JSON format." การใช้ AI ช่วย transform ข้อมูลจะช่วยลดภาระในการเขียน JavaScript และทำให้ code ชัดเจนขึ้น

สิ่งที่ควรระวัง / ข้อผิดพลาดที่เจอบ่อย

Over-fetching: การดึงข้อมูลที่เกินความจำเป็น ควรใช้ query ที่เฉพาะเจาะจง และใช้ database query optimization เพื่อให้ได้ข้อมูลที่ต้องการเท่านั้น
Data Serialization: การแปลงข้อมูลเป็น JSON หรือ XML อาจทำให้ขนาดข้อมูลเพิ่มขึ้น ควรใช้ data format ที่เหมาะสม และหลีกเลี่ยงการแปลงข้อมูลที่ไม่จำเป็น
JavaScript Errors: JavaScript errors จะทำให้ Browser ค้าง ควรใช้ debugging tools และ error handling เพื่อแก้ไข errors อย่างรวดเร็ว
Browser Limitations: Browser มีข้อจำกัดในการจัดการกับข้อมูลขนาดใหญ่ ควรพิจารณาใช้ Server-Side Rendering หรืออื่นๆ เพื่อลดภาระของ Browser

ตอนนั้นผมใช้ Python 3.11 เพื่อทำ backend และ React เพื่อทำ frontend เราใช้ Node.js เพื่อทำ API การทำระบบนี้ใช้เวลาประมาณ 3 สัปดาห์ และมีทีมประกอบด้วยผม 2 คน และเพื่อนร่วมทีมอีก 2 คน เราได้เรียนรู้มากมายเกี่ยวกับประสิทธิภาพของ Browser และการจัดการกับข้อมูลขนาดใหญ่

Use Case: เหมาะสำหรับเว็บไซต์หรือแอปพลิเคชันที่มีข้อมูลจำนวนมาก เช่น อีคอมเมิร์ซ, ระบบจัดการเนื้อหา, หรือ Data Visualization ไม่เหมาะสำหรับเว็บไซต์ขนาดเล็กที่มีข้อมูลน้อย

SEO 2026: การใช้เทคนิคเหล่านี้จะช่วยเพิ่มประสิทธิภาพของเว็บไซต์ ทำให้เว็บไซต์โหลดเร็วขึ้น และ Google ค้นพบเว็บไซต์ได้ง่ายขึ้น

Internal Linking:

คำถาม

1. ควรใช้เทคนิคอะไรในการดึงข้อมูลจำนวนมากจาก Server?

คำตอบ: ควรใช้ Pagination, Chunking, Server-Side Rendering, และ Pre-fetching ร่วมกัน การเลือกใช้เทคนิคใดขึ้นอยู่กับ Use Case และข้อจำกัดของระบบ

คำถาม

2. AI สามารถช่วยในการ transform ข้อมูลได้อย่างไร?

คำตอบ: AI สามารถช่วยในการ transform ข้อมูลได้โดยการใช้ Prompt Engineering เพื่อสั่งงาน AI ให้ทำ transformation ซึ่งจะช่วยลดภาระในการเขียน JavaScript และทำให้ code ชัดเจนขึ้น