Server-side rendering (SSR) ใน Angular เป็นเทคนิคการสร้างหน้าเว็บแบบไดนามิกบนเซิร์ฟเวอร์และส่งผลลัพธ์เป็น HTML ไปยังเบราว์เซอร์
SSR มีข้อดีหลายประการ เช่น:
- เพิ่มประสิทธิภาพการโหลดหน้าแรก (FCP) เนื่องจากไม่จำเป็นต้องรอให้เบราว์เซอร์ดาวน์โหลดและประมวลผล JavaScript ก่อนที่จะเริ่มแสดงหน้าเว็บ
- ปรับปรุง SEO เนื่องจากเครื่องมือค้นหาสามารถเข้าใจและจัดทำดัชนีหน้าเว็บที่สร้างขึ้นโดย SSR ได้ดีขึ้น
- ปรับปรุงประสบการณ์ใช้งานสำหรับผู้ใช้เนื่องจากหน้าเว็บจะเริ่มแสดงขึ้นทันทีที่ผู้ใช้เข้าถึง URL
Angular มีฟีเจอร์ที่เรียกว่า Universal ซึ่งช่วยให้เราสามารถสร้าง SSR apps ได้อย่างง่ายดาย
การติดตั้ง Universal
ในการติดตั้ง Universal เราต้องติดตั้ง @angular/platform-server ลงในแอปพลิเคชันของเรา
1 | npm install @angular/platform-server |
การสร้าง SSR app
เราสามารถสร้าง SSR app โดยใช้คำสั่ง ng new ดังนี้
1 | ng new my-ssr-app --universal |
คำสั่งนี้จะสร้างแอปพลิเคชัน Angular ใหม่พร้อมกับการตั้งค่าที่จำเป็นสำหรับ SSR
การรัน SSR app
เราสามารถรัน SSR app โดยใช้คำสั่ง ng serve ดังนี้
1 | ng serve --ssr |
คำสั่งนี้จะรันเซิร์ฟเวอร์ SSR ที่จะสร้างหน้าเว็บแบบไดนามิกและส่งผลลัพธ์เป็น HTML ไปยังเบราว์เซอร์
การทดสอบ SSR app
เราสามารถทดสอบ SSR app ได้โดยเปิดเบราว์เซอร์และไปที่ URL ของแอปพลิเคชันของเรา
หน้าเว็บจะเริ่มแสดงขึ้นทันทีเนื่องจากไม่จำเป็นต้องรอให้เบราว์เซอร์ดาวน์โหลดและประมวลผล JavaScript ก่อนที่จะเริ่มแสดงหน้าเว็บ
สรุป
SSR เป็นเทคนิคที่มีประโยชน์สำหรับแอปพลิเคชัน Angular ที่ต้องการเพิ่มประสิทธิภาพการโหลดหน้าแรกและปรับปรุง SEO
Angular มีฟีเจอร์ที่เรียกว่า Universal ซึ่งช่วยให้เราสามารถสร้าง SSR apps ได้อย่างง่ายดาย