เปรียบเทียบการ strategy rendering แต่ละแบบ
- Server-side Rendering (SSR) => การ render เกิดขึ้นที่ server
- Static Site Generation (SSG) => build เป็น static ถ้า update ต้อง build ใหม่
- Client-side Rendering (CSR) =>
React Server Component vs React Server Rendering
- React Server Component => สร้าง HTML ของ React Component แล้ว Steam มาให้ Client อัตโนมัติ
- React Server Rendering => สร้าง HTML ของ React Component เมื่อ Client request
| คุณสมบัติ | React Server Components (RSC) | Next.js Server-Side Rendering (SSR) |
|---|---|---|
| Rendering | เรนเดอร์ HTML บนเซิร์ฟเวอร์แล้วสตรีมไปยังลูกค้า | เรนเดอร์ HTML บนเซิร์ฟเวอร์เมื่อฝั่งลูกค้าร้องขอ |
| CSS | สามารถจัดการ CSS โดยใช้วิธีการที่แตกต่างกัน เช่น CSS-in-JS หรือการแยกไฟล์ CSS ตามคอมโพเนนต์ | สามารถใช้ CSS-in-JS หรือวิธีการอื่น ๆ ที่เหมาะสมกับการจัดการ CSS |
| JS | ลดปริมาณ JavaScript ที่ส่งไปยังลูกค้า เนื่องจากคอมโพเนนต์บางส่วนเรนเดอร์บนเซิร์ฟเวอร์ | ต้องการ JavaScript ฝั่งลูกค้าเพื่อทำให้ HTML โต้ตอบได้ |
| SEO | ดีสำหรับ SEO เนื่องจากเนื้อหาถูกเรนเดอร์บนเซิร์ฟเวอร์ | ดีสำหรับ SEO เพราะ HTML ถูกสร้างและส่งไปยังลูกค้าโดยตรง |
| Components | คอมโพเนนต์ที่ทำงานบนเซิร์ฟเวอร์และคอมโพเนนต์ที่ทำงานบนลูกค้าต้องแยกออกจากกัน | คอมโพเนนต์ทั้งหมดเรนเดอร์บนเซิร์ฟเวอร์ก่อนที่จะส่งให้ลูกค้า |
| Interactive | คอมโพเนนต์ที่ทำงานบนลูกค้าสามารถจัดการการโต้ตอบและการอัปเดตแบบไดนามิก | HTML ที่เรนเดอร์จากเซิร์ฟเวอร์จะถูกทำให้เป็นโต้ตอบโดย JavaScript ฝั่งลูกค้า |
| Usecase | เหมาะสำหรับการลดปริมาณ JavaScript และการจัดการเนื้อหาที่ไม่ต้องการการโต้ตอบมาก | เหมาะสำหรับการสร้างเนื้อหาไดนามิกและการโหลดข้อมูลเมื่อมีการร้องขอ |
Client-side Rendering (CSR)
Static Site Generation (SSG)
Server-side Rendering (SSR)