PlusMagi's Blog By Pitt Phunsanit Ai,Backend Astro: Data Fetching การดึงข้อมูลจาก External API, Headless CMS (เช่น WordPress REST API, Strapi) หรือฐานข้อมูล

Astro: Data Fetching การดึงข้อมูลจาก External API, Headless CMS (เช่น WordPress REST API, Strapi) หรือฐานข้อมูล

2015-11-11| phunsanit| 0 Comment | 07:00

Categories:

Ai
Backend

ในยุคของการพัฒนาเว็บไซต์ที่เน้นประสิทธิภาพสูง (High Performance Web) Astro ได้กลายเป็นเครื่องมือสำคัญที่ช่วยให้การสร้างเว็บไซต์รวดเร็วและยืดหยุ่นอย่างยิ่ง หัวใจสำคัญของการสร้างเว็บไซต์ที่ทันสมัยคือความสามารถในการดึงข้อมูล (Data Fetching) จากแหล่งที่มาที่หลากหลาย ไม่ว่าจะเป็น Headless CMS, External API, หรือฐานข้อมูลเชิงสัมพันธ์อย่าง PostgreSQL

สถาปัตยกรรม Data Fetching ใน Astro

ในมุมมองของสถาปนิก ระบบการดึงข้อมูลสำหรับ Astro มักจะทำงานในชั้น Server-Side Rendering (SSR) หรือ Build Time ซึ่งหมายความว่าโค้ดจะต้องเรียกข้อมูลก่อนที่จะส่ง HTML ไปยังเบราว์เซอร์ การเชื่อมต่อกับ PostgreSQL โดยตรงจึงเป็นวิธีที่รวดเร็วและมีประสิทธิภาพที่สุดสำหรับแอปพลิเคชันที่ต้องการความเสถียรของข้อมูล

การดึงข้อมูลจาก PostgreSQL โดยตรง

เมื่อใช้ PostgreSQL เป็นแหล่งข้อมูลหลัก เราสามารถใช้ฟังก์ชันของ PostgreSQL เพื่อเตรียมข้อมูลให้อยู่ในรูปแบบที่ Astro สามารถบริโภคได้ง่ายที่สุด ตัวอย่างเช่น การดึงข้อมูลรายการสินค้า (Products) ที่ถูกจัดเก็บในตาราง และการใช้ฟังก์ชันเพื่อแปลงข้อมูลที่ซับซ้อนให้เป็นรูปแบบ JSON ที่เลียนแบบการตอบกลับจาก REST API

SQL

-- 1. สร้างตารางจำลองข้อมูลสินค้า (Products) และข้อมูลหมวดหมู่ (Categories) ที่เชื่อมโยงกัน
CREATE TABLE products (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    sku VARCHAR(50) UNIQUE,
    price NUMERIC(10, 2)
);

CREATE TABLE categories (
    id SERIAL PRIMARY KEY,
    name VARCHAR(100) NOT NULL
);

-- 2. ใส่ข้อมูลตัวอย่าง (ใช้สตริงสั้นตามข้อกำหนด)
INSERT INTO products (name, sku, price) VALUES 
('apple', 'A101', 1.00);
INSERT INTO products (name, sku, price) VALUES 
('banana', 'B202', 0.50);
INSERT INTO products (name, sku, price) VALUES 
('orange', 'O303', 0.75);

-- 3. ฟังก์ชันจำลองการดึงข้อมูลทั้งหมดในรูปแบบ JSON (API Payload Simulation)
CREATE OR REPLACE FUNCTION get_all_products_json() RETURNS JSON AS $$
SELECT json_agg(t) FROM ( 
    SELECT p.name, p.sku, p.price 
    FROM products p 
) t;$$
LANGUAGE SQL;

-- 4. เรียกใช้งานฟังก์ชันเพื่อรับข้อมูลที่พร้อมใช้ใน Astro
SELECT get_all_products_json();

การเชื่อมต่อกับแหล่งข้อมูลภายนอก (Headless CMS/API)

แม้ว่า Astro จะสามารถเรียกใช้ `fetch()` เพื่อดึงข้อมูลจาก WordPress REST API หรือ Strapi ได้โดยตรง แต่ในระดับ Senior Architect เราควรพิจารณาการใช้ PostgreSQL เป็นตัวกลางในการรวมข้อมูล (Data Aggregation Layer) โดยใช้ฟีเจอร์เช่น `postgres_fdw` (Foreign Data Wrapper) เพื่อเชื่อมต่อกับข้อมูลภายนอก หรือใช้ `jsonb` ในการจัดเก็บข้อมูลที่มาจาก API ภายนอกก่อนนำมาประมวลผลใน Astro ซึ่งจะช่วยลด Latency และเพิ่มความปลอดภัยในการจัดการข้อมูล

บทสรุป: Best Practices สำหรับ Astro

การดึงข้อมูลที่มีประสิทธิภาพสำหรับ Astro ไม่ได้หมายถึงการเรียก API จำนวนครั้งมากเกินไป แต่คือการออกแบบสถาปัตยกรรมที่ให้ PostgreSQL ทำหน้าที่เป็นแหล่งข้อมูลหลักที่เชื่อถือได้ (Single Source of Truth) การใช้ฟังก์ชัน SQL เพื่อเตรียมข้อมูลให้อยู่ในรูปแบบ JSON ที่สะอาดและพร้อมใช้งาน (Payload) จะช่วยให้ Astro สามารถเรนเดอร์หน้าเว็บได้อย่างรวดเร็วและมีประสิทธิภาพสูงสุด ทำให้เว็บไซต์ของคุณทั้งเร็วและขยายขีดความสามารถได้ในอนาคต

Tags: Api Integration, Astro, Data Fetching, Headless CMS, Postgresql