รู้จัก SSR กับ CSR รูปแบบการทำเว็บไซต์ที่มีผลต่อ SEO

เชื่อว่าคนทำเว็บไซต์สมัยใหม่หลายคนคงเคยได้ยินคำว่า Server-Side Rendering (SSR) และ Client-Side Rendering (CSR) กันมาบ้าง แต่บางคนก็อาจจะยังไม่เข้าใจดีด้วยซ้ำว่ามันคืออะไร มีผลต่อเว็บไซต์ของเราอย่างไร ซึ่งความจริงแล้ว ทั้งสองอย่างนี้เป็นเรื่องที่จำเป็นต้องรู้ เพื่อการเลือกใช้เฟรมเวิร์กที่เหมาะสมสำหรับหน้าเว็บฯ และที่สำคัญ คือ มีผลต่อการทำ SEO หรือ Search Engine Optimisation ด้วย !

ดังนั้น บทความนี้จะพาทุกคนไปดูกันว่า SSR กับ CSR คืออะไร มีข้อแตกต่างอย่างไร และระหว่าง Client-Side vs. Server-Side Rendering อันไหนจะเหมาะกับเว็บไซต์ของเรามากกว่ากัน

Server-Side Rendering คืออะไร

Server-Side Rendering (SSR) คืออะไร

ต้องบอกก่อนว่า SSR กับ CSR คือ รูปแบบการเขียนโปรแกรมที่มีผลต่อการ Render ออกมาบนหน้าจอของผู้ใช้งาน โดยจะเลือกใช้อันไหนขึ้นอยู่กับจุดประสงค์ของเว็บไซต์ เพราะทั้งสองรูปแบบก็มีทั้งข้อดีและข้อจำกัดที่แตกต่างกันไป ดังที่จะอธิบายต่อไปนี้

Server-Side Rendering (SSR) คือ การ Render หน้าเว็บไซต์บนเซิร์ฟเวอร์แทนบนบราวเซอร์ หรือพูดให้เข้าใจง่าย ๆ ก็คือการแสดงผลบนฝั่งเซิร์ฟเวอร์นั่นเอง ซึ่งการแสดงผลนี้จะเกิดขึ้นทุกครั้งที่มีการส่งคำขอ (Request) โดยฝั่งเซิร์ฟเวอร์จะรวบรวมข้อมูลที่อยู่ในฐานข้อมูล และส่งข้อมูลที่ได้ไป Render ให้เป็น HTML Template จากนั้น ค่อยส่งไปยังบราวเซอร์ให้ฝั่ง Client หรือผู้ใช้งานเห็น กล่าวคือ ข้อมูลที่ส่งต่อให้ผู้ใช้งานจะเป็นข้อมูลที่ถูก Render เรียบร้อยแล้ว สามารถนำไปแสดงผลได้เลยทันที ดังนั้น การเขียนโปรแกรมแบบ SSR จึงจะทำให้การเข้าหน้าเว็บไซต์ของผู้ใช้งานมีความรวดเร็วกว่าแบบ CSR

 

Client-Side Rendering (CSR) คืออะไร

Client-Side Rendering (CSR) จะเป็นขั้วตรงข้ามกับ SSR คือ หน้าเพจทั้งหมดจะถูก Render ที่ฝั่ง Client หรือผู้ใช้งาน โดยเมื่อฝั่งเซิร์ฟเวอร์รับคำขอจากฝั่งผู้ใช้งาน เซิร์ฟเวอร์จะส่งเพียงแค่โครง หรือ HTML พื้นฐานของเว็บไซต์มาให้ พร้อมกับไฟล์ JavaScript แต่จะยังไม่มีเนื้อหาใด ๆ จากนั้น จึงค่อยเป็นหน้าที่ของไฟล์ JavaScript ที่จะนำ HTML เหล่านั้นมา Render หน้าเพจให้สามารถแสดงผลได้อย่างสมบูรณ์ โดยเนื้อหาจะถูกส่งในรูปแบบของ REST JSON หรือ GraphQL ตามสมัยนิยม และด้วยการที่ต้องมา Render ที่ฝั่งผู้ใช้งานนี้เองที่ทำให้การโหลดเว็บไซต์ของผู้ใช้งานจะช้ากว่าแบบ SSR แต่ถึงอย่างนั้นก็มีการเปลี่ยนหน้าเพจที่รวดเร็ว เพราะทุกหน้าได้ถูก Render มาตั้งแต่ที่ฝั่งเซิร์ฟเวอร์ส่งไฟล์มาครั้งแรกแล้ว

กล่าวง่าย ๆ CSR คือ โหมดการแสดงผลที่บราวเซอร์จะประมวลผลคำขอเข้าถึงหน้าเพจ โดยใช้ไฟล์ JavaScript เท่านั้นเพื่อสร้างเนื้อหา HTML ให้แสดงผลแก่ผู้ใช้งานนั่นเอง

 

SSR กับ CSR มีข้อดีและข้อจำกัดต่างกันอย่างไร

ข้อดีของ SSR

  • บราวเซอร์มีเนื้อหาครบตั้งแต่การส่ง Request ครั้งแรก
  • ดีต่อ SEO เนื่องจากได้รับข้อมูล HTML ที่มีเนื้อหา
  • ง่ายต่อการเขียนโคด
  • ทำงานแบบแยกส่วน
  • บราวเซอร์ไม่จำเป็นต้องดึงข้อมูลอื่น ๆ อีก ทำให้ประหยัด Request
  • ผู้ใช้งานได้รับประสบการณ์ที่ดีในการใช้งานเว็บไซต์ เพราะสามารถโหลดได้ไว

ข้อจำกัดของ SSR

  • เสียทรัพยากรบนเซิร์ฟเวอร์เยอะกว่า เนื่องจากต้อง Render HTML บนเซิร์ฟเวอร์ และแอปพลิเคชันจำเป็นต้องทำงานตลอดเวลาเพื่อรับ Request
  • ใช้กับ UI Library/Framework บางตัวไม่ได้ เนื่องจากไม่มี Window และ Document ให้เรียกใช้โดยตรง
  • เซิร์ฟเวอร์อาจล่มได้หากได้รับ Request เยอะเกินไป

ข้อดีของ CSR

  • ง่ายต่อการเขียนโคด
  • แสดงผลแต่ละหน้าเพจได้อย่างรวดเร็ว (ยกเว้นการ Request ครั้งแรก)
  • รองรับ Static โดยสามารถนำไฟล์ไปวางบน Static File Hosting ได้เลย ไม่จำเป็นต้องรันแอปพลิเคชันเซิร์ฟเวอร์ทิ้งไว้
  • รองรับ Single Page Application
  • เว็บไซต์สามารถตอบสนองกับผู้ใช้งานได้บ่อย
  • ประหยัดเซิร์ฟเวอร์ เพราะไม่ต้อง Render HTML บนเซิร์ฟเวอร์

ข้อจำกัดของ CSR

  • ไม่ค่อยรองรับ SEO
  • การใช้งานมีความซับซ้อน
  • หากแอปพลิเคชันมีขนาดใหญ่ จะใช้เวลาโหลดนาน
  • ในครั้งแรก ผู้ใช้งานอาจเจอหน้าว่างนานหากอินเทอร์เน็ตช้า

Client-Side Rendering คืออะไร

Client-Side vs. Server-Side Rendering อันไหนดีกว่า

จากที่ได้เห็นกันไปแล้วว่า SSR กับ CSR ต่างก็มีข้อดีและข้อจำกัดที่แตกต่างกัน ดังนั้น ใครจะเลือกใช้อะไรก็ขึ้นอยู่กับจุดประสงค์ของเว็บไซต์ว่าอยากให้เป็นแบบไหน โดย SSR ที่แสดงผลฝั่งเซิร์ฟเวอร์ ก็จะเหมาะกับเว็บไซต์ที่เน้นแสดงผลเนื้อหา ไม่เน้นการโต้ตอบกับผู้ใช้งาน เพราะการโต้ตอบแต่ละครั้งจะส่งผลให้เซิร์ฟเวอร์ต้องทำงานหนัก ซึ่งอาจทำให้เซิร์ฟเวอร์ล่มได้ แต่สำหรับใครที่อยากให้หน้าเว็บไซต์โหลดไว ๆ SSR ก็เป็นตัวเลือกที่ไม่ควรมองข้าม และที่สำคัญ ยังรองรับ SEO ได้ดีกว่าแบบ CSR อีกด้วย เพราะข้อมูลที่ Google Bot จะเข้าไปเก็บได้ ก็คือข้อมูลเดียวกับที่ผู้ใช้งานเห็น ซึ่งเป็นข้อมูลที่ถูก Render มาเรียบร้อยแล้ว ทำให้อัลกอริทึมสามารถ Crawl ได้ไวกว่า ดังนั้น ถ้าอยากเน้น SEO ก็ต้องเป็นการเขียนโปรแกรมแบบ Server-Side Rendering เท่านั้น

ในทางกลับกัน Client-Side Rendering หรือ CSR จะเหมาะสำหรับเว็บไซต์ที่ต้องการตอบสนองกับผู้ใช้งานบ่อยครั้ง รวมถึงเน้นให้มีการเข้าใช้งานแบบนาน ๆ เพราะรองรับ Single Page Application ทำให้แต่ละหน้าเพจสามารถโหลดได้ไว แต่การโหลดหน้าเว็บไซต์เมื่อเข้าครั้งแรกจะยังช้ากว่า SSR อยู่บ้าง เพราะเนื้อหาที่ถูกส่งมาแสดงผลเป็นข้อมูลที่ยังไม่ได้รับการ Render เหมือนอย่างของ SSR และด้วยเหตุนี้ ทำให้ CSR ไม่เฟรนด์ลีต่อ SEO เนื่องจาก Google Bot เข้ามาแล้วไม่สามารถเก็บข้อมูลได้ในทันที

อย่างไรก็ตาม คงปฏิเสธไม่ได้ว่ายุคหลังมานี้ คนทำเว็บไซต์หันไปใช้รูปแบบ CSR กันเยอะ เพราะมีความทันสมัยกว่า และไม่ต้องรับหน้า HTML ทั้งหมดเหมือนกับ SSR ซึ่งจะทำให้แต่ละหน้าเพจโหลดช้าลง และโต้ตอบกับผู้ใช้งานได้น้อยกว่า

 

สรุป

ดังนั้น ระหว่าง Client-Side vs. Server-Side Rendering คงไม่อาจบอกได้ 100% ว่าอันไหนดีกว่า เพราะขึ้นอยู่กับว่าเจ้าของเว็บไซต์ต้องการอะไร หากจำเป็นต้องใช้ SEO ก็ให้เลือก SSR ไว้ก่อน แต่ถ้าอยากเน้นการตอบสนองแต่ละหน้าเพจ หรือมีการทำ Single Page Application ก็ควรเลือก CSR แต่อย่าลืมเช็กข้อได้เปรียบและข้อจำกัดของทั้งสองอย่างก่อนตัดสินใจด้วยล่ะ !

หากคุณเป็นผู้ประกอบการที่ไม่เชี่ยวชาญด้านการทำเว็บไซต์ และยังไม่มีทีมงานคอยดูแลส่วนดังกล่าว Primal Digital Agency บริษัทรับทำการตลาดครบวงจร พร้อมให้ความช่วยเหลือการทำธุรกิจของคุณอย่างครอบคลุม ติดต่อเราเพื่อรับคำปรึกษาได้เลยวันนี้