จาก Flutter 2 ที่ออกมา โดยรองรับการพัฒนา web application ด้วย
จึงมีปัญหาหนึ่งเรื่องที่ใน community ของกันเยอะ
นั่นก็คือเรื่องของ SEO Friendly
หรือใน Flutter User Experience Research (UXR) ก็มีเช่นกัน
รวมทั้ง feature อื่น ๆ เช่น Hot Reload (ไม่ต้องมากดได้ไหม) เป็นต้น
ดังนั้นวิธีการยังไม่มีเลย
เนื่องจากจะทำการแปลงจาก Flutter/Dart มาเป็น HTML/CSS/JS ให้
ทำให้เราทำอะไรมากไม่ค่อยได้
แต่จากที่ลองทำใน project เบื้องต้น สรุปสิ่งที่พอทำได้ดังนี้
ซึ่งผลที่ออกมาก็ถือว่าน่าพอใจ และตรงกับที่ต้องการ
นั่นคือเรื่องของ SEO และการ share content
ใน Social media ต่าง ๆ ได้ง่ายและเหมาะสมขึ้น
ขั้นตอนมีดังนี้
ขั้นตอนที่ 1 ใน web app ก็มีการใช้งาน routing ปกติ
โดยจะแบ่งตามหน้ารายการ รวมทั้ง detail เช่น
- Main page ใช้ /
- Promotion page ใช้ #/promotion
- ใน promotion detail page ใช้ #/promotion/1
โดยทุกหน้าสามารถเข้าถึงด้วย URL ข้างต้นได้ทั้งหมด
ขั้นตอนที่ 2 เปลี่ยนการ reference หรืออ้างถึง URL ใน page ต่าง ๆ
โดยทำการกำหนด slug หรือ URL ที่ friendly ขึ้นมาของแต่ละหน้า
โดยเฉพาะในหน้า promotion detail
ซึ่งกำหนดใหม่ให้เป็น /promotion/slug
รวมทั้งมีการ custom header ต่าง ๆ ของ page ตามที่ต้องการ
และนำข้อมูลจาก #/promotion/1 มาใช้
ขั้นตอนนี้เหมือนการทำ template นั่นเอง
ขั้นตอนที่ 3 ใช้ Puppeteer มาเพื่อสร้างหรือ generate หน้าที่ต้องการไว้
และบันทึกไว้บน server ที่สร้างไว้
และสร้าง server route เข้าถึง
ทำให้ทางฝั่งคนเรียกหรือผู้ใช้งานเข้าถึงได้ง่าย
รวมทั้งก็เอาไปใส่ sitemap และการ share ได้ง่ายขึ้น
แต่ปัญหาที่ตามมาคือ เมื่อทุกครั้ง content เพิ่มหรือเปลี่ยนแปลง
ก็ต้องมี run puppeteer ใหม่ทุกครั้ง ซึ่งกิน resource น่าดู
จึงทำการแยกส่วนงานนี้ออกไปอีกเครื่อง
รวมทั้งเรื่องการ monitoring task การทำงานนี้ตลอดเวลาด้วย
และทำให้ระบบงานทำการเริ่มซับซ้อนขึ้น
แต่ผลที่ออกมาก็เป็นที่น่าพอใจ ได้ไปต่อในตอนนี้