關於 react single page application ，我們在網路上蒐集到這些相關的討論、資訊與評價

🔥 หากใครกำลังสงสัยว่า Client-Side Rendering และ Server-Side Rendering มันแตกต่างกันยังไง? เหมาะกับการใช้งานแบบไหน วันนี้แอดสรุปมาให้เพื่อนๆ แล้วจ้า ไปอ่านไปเลย!!
.
✨ Client-Side Rendering (CSR) - การแสดงผลฝั่ง Client
การทำงานของมันคือเมื่อเราสร้างเว็บด้วย React, Angular, หรือ Vue จะมีการทำงานแบบ SPA (Single Page Application) คือในช่วงแรกที่ผู้ใช้เปิดเว็บมา มันจะมีแค่คำสั่ง HTML พื้นฐาน หรือแสดงแค่ Template การแสดงผลเนื้อหาเบราว์เซอร์จะทำการส่ง Request ให้ Server ก่อน จากนั้นจะดึง Code JavaScript ออกมา และแสดงผลเนื้อหาต่างๆ ให้กับผู้ใช้ได้เห็นนั่นเอง
.
👍 ข้อดี
ง่ายต่อการเขียน Code
แสดงผลอย่างรวดเร็ว (ยกเว้นการ Request ครั้งแรก)
เป็นการทำงานแบบแยกส่วน
.
👎 ข้อจำกัด
ไม่ค่อยรองรับ SEO
มีความซับซ้อน
.
🙋 เหมาะกับ: เว็บไซต์ที่ต้องการโต้ตอบกับผู้ใช้อยู่บ่อยครั้ง และมีการเข้าใช้งานแบบนานๆ
.
✨ Server-Side Rendering (SSR) - การแสดงผลฝั่งเซิร์ฟเวอร์
การแสดงผลฝั่งเซิร์ฟเวอร์จะแสดงผลทุกครั้งที่มีการ Request ซึ่งเซิร์ฟเวอร์จะทำการรวบรวมข้อมูลที่อยู่ในฐานข้อมูลและส่งข้อมูลที่ได้ไป Render เป็น HTML Template จากนั้นจะถูกส่งไปยังเบราว์เซอร์เพื่อแสดงผลให้ผู้ใช้เห็น
.
👍 ข้อดี
รองรับ SEO
ง่ายต่อการเขียน Code
ทำงานแบบแยกส่วน
.
👎 ข้อจำกัด
มีความซับซ้อน
.
🙋 เหมาะกับ : เว็บไซต์ที่แสดงผลเนื้อหา โดยที่ไม่มีการโต้ตอบกับผู้ใช้
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน

เล่าสู่ฟัง สำหรับโปรแกรมสายเว็บแอพลิเคชั่น (มือใหม่)
React คืออะไร
.
✔ React เป็นไลบรารี่ในภาษาในจาวาสคริปต์ ไม่ใช่เฟรมเวิร์ค (framework) จะไม่เหมือน Angular หรือ Vue
✔ React เป็นโปรเจคโอเพ่นซอร์ส (open-source) ของ Facebook
✔ React เอาไว้ใช้สร้างหน้าจอ user interfaces (UI) ฝั่ง Front-end
✔ React เอาไว้สร้างเว็บแอพพลิเคชั่นแบบ single-page applications(SPAs) หมายถึงทำเว็บหน้าเดียวแบบแอพลิเคชั่น (ไม่ต้อง reflesh หน้าเว็บบ่อยๆ)
✔ React อยู่ฝั่ง View เลเยอร์ในสถาปัตยกรรมเว็บแอพลิเคชั่นแบบ MVC application (Model View Controller)
.
.
React + Node.js สามารพัฒนาเว็บแอพลิเคชั่นด้วย JavaScript ล้วนๆ รวมกับ CSS+HTML
ติวเตอร์เอกสารตอนนี้มีเยอะ
ลิงก์นี้รู้สึกน่าจะอ่านง่ายๆ หน่อย สำหรับมือใหม่ (ภาษาอังกฤษ)
https://ibaslogic.com/react-tutorial-for-beginners/
.
.
ผู้เรียนต้องมี
- พื้นฐาน JavaScript ES6 (ขั้นต่ำ)
- พื้นฐาน HTML + CSS
- พื้นฐาน Node.js + NPM
- ชื่นชอบการใช้คำสั่งคอมมานไลน์
- ที่บ้านต้องต่อเน็ต เพราะ ต้องใช้ดาวน์โหลดแพ็กเกจต่างๆ ของ javascript
.
แอบกระซิบตอนนี้กำลังนิยมแถมรายได้ดีด้วยนะ ตลาดงานต้องการตัวสูง เห็นประกาศรับหลายที่
.
.
.
.
.
.
.
ฝากประชาสัมพันธ์หนังสือ javascript ES6 วางขายที่ซีเอ็ด
https://www.se-ed.com/product/พัฒนาเว็บแอปพลิเคชั่นด้วย-JavaScript.aspx?no=9786160825394
✍️ เขียนโดย โปรแกรมเมอร์ไทย thai programmer

🔥 "มาเริ่มรู้จัก และ เขียน NEXT.JS ไปพร้อมกันไหม !?"
.
ลดปัญหาสุดวุ่นวายของสาย React ที่เขียนเว็บมาซะดิบดี .. แต่ Bot Google ไม่สามารถมาดึงข้อมูลเราได้ซะงั้นนน T_T
.
ซึ่งแน่นอนว่าการใช้ Next JS จะเข้ามาช่วยคลายอาการปวดหัวข้องเราได้นั่นเองงงง <3
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน