เทคโนโลยีในการพัฒนาเว็บไซต์ / Web application เกิดขึ้นใหม่ทุกวัน ทำให้นักพัฒนาต้องมีการศึกษา ค้นคว้า เรียนรู้ ทดลองสิ่งใหม่ๆ อยู่ตลอดเวลา แม้แต่การทำ static web (เว็บที่ไม่มีการเปลี่ยนแปลงของข้อมูลมากนัก) ยังมี framework ให้เลือกใช้อยู่มากมาย เราจะมาอัปเดตกันว่า การพัฒนาเว็บสมัยนี้ มีอะไรให้เลือกใช้บ้าง กับคุณชินธิป แต้มแก้ว จาก kohlife บริษัทจองตั๋วเดินทางสำหรับ Backpacker พาไปเกาะ จากสนามบินไปถึงเกาะ ให้บริการ 4 ปีแล้ว

Web Development เว็บที่เราเข้า จะมีหน้าบ้าน หลังบ้าน ที่เราเห็นหน้าบ้าน คือเห็นบนหน้าจอ หลังบ้านคือ เรากดคลิก จอง ได้ตั๋ว มีกลไกหลังบ้าน ระบบหลังบ้าน เทคโนโลยีหลังบ้าน ตอนนี้พัฒนากันมาไกลมา หลักๆ 3 ส่วน คือ HTML โครงสร้าง คานตัวบ้าน CSS ตกแต่งบ้านให้สวยงาม JavaScript คนรับใช้คอยจัดการ ปัจจุบัน หลักๆ ก็ยังเป็น 3 ภาษานี้ แต่ใน 5 ปีที่ผ่านมา มีการเปลี่ยนแปลงเยอะ ก่อนหน้านี้มี Framework Ruby on Rails ทำให้ ทำหน้าบ้านและหลังบ้านได้พร้อมกัน แยกกัน HTML CSS JavaScript หลังๆ โปรเจคใหญ่ขึ้น เลยทำ Dynamic Web เปลี่ยนแปลงข้อมูลได้ มี 1 ก้อน แต่มีฟังก์ชั่นเยอะมากๆ จนทำให้ JavaScript ใหญ่มากๆ โฟกัสการทำงานหลักๆ บน JavaScript เลยเกิด Framework บน JavaScript

เมื่อก่อนไม่ซับซ้อน แต่พอโปรเจคใหญ่ขึ้น นอกจากทำ B2C แล้วต้องทำอะไรเยอะขึ้น ชิ้นส่วนต่างๆ ประกอบกันง่ายขึ้น กลไลการทำงาน State Management จัดการการเปลี่ยนแปลงข้อมูลบนเว็บไซต์ในแต่ละหน้า ใช้ Framework เข้ามาจัดการ

มีการใช้ Angular กับ React เป็นเครื่องมือให้สามารถจัดการแอปได้ง่ายและสะดวกขึ้น ก่อนหน้านี้ไม่ได้คิดองค์รวม คิดเป็นภาพใหญ่ ตอนนี้ขึ้น component 3 ภาษา React ทำให้ขึ้นโครงและจัดการ state ของแอปได้ด้วย State Management ล่าสุด Angular ที่ยังแยกชิ้นส่วน เวอร์ชั่นล่าสุด จัดการ Component ง่ายขึ้นเยอะ ก้าวกระโดด ทำให้ทำงานร่วมกันได้คล่องตัวขึ้น

หากเราใช้หลายตัวแล้วเจอความไม่เข้ากัน ความไม่ compatibility เจอปัญหา พอทำงานที่ซับซ้อน ก็เลยรู้สึกต้องหาทางออก ให้ 3 ภาษา ทำงานร่วมกันได้แบบคล่องตัวมากที่สุด CSS ซับซ้อนมากขึ้น มี Framework เลยมีคนทำ Component สวยๆ แต่กลับเจอความไม่ compatibility จากความซับซ้อน 3 ภาษา Kevin ตัด JavaScript ทิ้ง ให้ง่ายขึ้น

เรื่อง SEO ล่ะ?

สำหรับ SEO กับ Reactive Web คือไม่ support SEO แต่อย่างใด การทำ Dynamic Web ด้วย JavaScript มีการเปลี่ยนแปลงตัวเองได้ตลอดเวลา ทำให้ SEO มีปัญหา เพราะปรับตัวไม่ทันกับเว็บไซต์ใหม่ๆ ทำให้ Google หาไม่เจอ ก็เลยใช้ Next.js มีค่า SSR กับ SSG ทำให้ช่วยแก้ปัญหาการที่ Dynamic Web ไม่รองรับ SEO

เว็บไซต์นึงมี 2 ฝั่ง หน้าบ้าน - หลังบ้าน ก่อนหน้าที่คุยกันเรื่องหลังบ้าน แต่ Dynamic Web ไม่รองรับ SEO ก็เลยทำให้ หลังบ้าน ช่วยจัดการ Google Bot รับรู้ มีคนเข้าเว็บ กระบวนการทำงานคือส่งคำสั่งจาก server กระตุ้นหน้าบ้าน ให้แสดงบนหน้าจอ render แสดงข้อมูลไม่ทัน Bot Google ก็อาจจะเจอหน้าเปล่า ไม่มีข้อมูล มองไม่เห็นข้อมูล SSR เข้ามาช่วย กระตุ้นให้หลังบ้านแสดงข้อมูล server site rendering ส่งข้อมูลกลับมา ทำให้ Google รู้จัก อีกอันคือ SSG เว็บทำมีคนเข้าถึงเยอะมากๆ เช่น Lazada คนเข้าเยอะๆ กระตุ้นให้ bot แทนที่จะเข้ามา หลังบ้าน render ทีละหน้า เลยทำให้หน้าเว็บพร้อมใช้งานทันที เตรียมให้พร้อมใช้งานได้เลย สะดวกมาก ไม่ต้องรออะไรเลย

ต่อไปหลายๆ คนคงจะมองหาวิธีที่จะทำงานได้ง่ายขึ้น ถ้าเราใช้เทคโนโลยีมาช่วยให้ตอบโจทย์ชีวิตได้เยอะมาก จากที่ใช้หลายภาษา ซับซ้อน ความสะดวกสบายในการ deploy เว็บไซต์ สิ่งที่พบคือ next.js ช่วย engine ในการ deploy เว็บไซต์ง่ายขึ้น