ทำไมต้องใช้ Angular Universal
นักพัฒนาหลายที่พัฒนาเว็บไซต์ด้วย Angular ซึ่งเป็น SPA (Single Page Application) จะมีข้อด้อย เรื่องของการทำ SEO เพราะว่า Search Engine Bot หรือ Crawler จะไม่สามารถเห็น Content ของเว็บได้ทั้งหมด เพราะSPA มันจะโหลดแค่หน้า Index และไฟล์ javascript บางไฟล์ซึ่ง Browser มันจะมา render ทีหลัง ดังตัวอย่างนี้ซึ่ง Angular เวอร์ชันที่ผมใช้คือ Angular เวอร์ชัน 10 นะครับ
1. สร้าง Angular Application ขึ้นมา ด้วย Command ต่อไปนี้ครับ
ng new angular-universal-example2. จากนั้น Run คำสั่งต่อไปนี้ ให้ Angular ทำงานได้ครับ
cd angular-universal-example
ng serve3. เมื่อตัว Angular CLI Compile เสร็จ จะได้หน้าตาแบบนี้ครับ
4. แล้วถ้าเราลอง View Page Source โดยใช้ Chrome Dev Tool เราจะเห็น Tag HTML แบบนี้ครับ
จะเห็นได้ว่า สิ่งที่ Browser มันเห็น มีแค่ app-root เท่านั้นเอง ซึ่งไม่ว่าเราจะเพิ่ม Content ไปซักเท่าไหร่ สิ่งที่ Search Engine Bot เห็นก็มีเพียงเท่านี้ครับ ก็เลยทำให้ Angular นั้น ติดหน้าแรกๆ ของ google หรือ search engine ตัวอื่นๆ ยากครับ
วิธีการแก้ปัญหา
วิธีการแก้ปัญหาที่ผมจะนำมาแชร์ ก็คือการใช้ Angular Universal ครับ ซึ่งเป็น Library ของทีม Angular เอง นอกจาก Angular Universal จะช่วยแก้ปัญหาเรื่อง SEO แล้ว ยังช่วยเรื่อง Server Side Rendering (SSR) ซึ่งจะช่วยเพิ่มประสิทธิภาพของเว็บไซต์ขึ้นไปอีกครับ เพราะแทนที่จะโหลดข้อมูลทั้งหมด SSR จะโหลดแค่ข้อมูลที่จำเป็นเท่านั้นครับ
การติดตั้ง Angular Universal ให้กับ โปรเจคที่เราเพิ่งสร้าง
cd angular-universal-example
ng add @nguniversal/express-engineจบครับ!! ง่ายอย่างงั้นเลย
เอาละครับ ทีนี้มาลองรันดูครับ
npm run dev:ssrผลลัพท์ที่ได้ก็หน้าตาเหมือนเดิมครับ
แต่ว่าถ้าลอง View Page Source ดู จะเห็นว่าเปลี่ยนไปดังนี้ครับ
นี่ก็คือหน้าผลลัพท์จากการใช้งาน Angular Universal ครับ
สรุป
การใช้ Angular Universal ช่วยทำให้เว็บไซต์ที่เป็น SPA ทำงานแบบ Server Side Rendering ซึ่งนอกจะช่วยเพิ่มประสิทธิภาพของ SEO ยังช่วยให้เว็บไซต์ทำงานได้เร็วขึ้นครับ
บทความนี้ ผมอธิบายวิธีใช้งานกับ Angular ที่เป็น Static Site ผมยังมีบทความ ที่ช่วยให้ใช้งานกับเว็บไซต์ที่เป็น Dynamic Site เช่น Blog E-Commerce ให้เก่งด้าน SEO ด้วยครับ
