[บันทึก] เมื่อทำ production ด้วย React บน Next.js – วันที่ 1

kittipongint

“เสียงลือเสียงเล่าอ้าง…….อันใด พี่เอย”

นั่นแหละครับ เปิดด้วยกลอนก่อนเลย 55 ขอเข้าเรื่องเลยว่าได้ยินมานานแล้วว่า react นั้นทำให้เว็บเราเร็วได้ บวกกับช่วงนี้อินกับ PWA มากเหลือเกิน เลยมองหาเทคโนโลยีที่จะมาตอบโจทย์ชีวิตเราได้ ก็ไล่ๆ อ่าน ไล่ดูวิดีโอเรื่อยๆ ร่วมๆ เดือน พอคิดว่าเก็บเกี่ยวความรู้ได้เต็มที่แล้ว เลยจะเริ่มลงมือ แต่การลงรายละเอียด ขอเล่าสถานะ และ ความสามารถที่ผมมีก่อน

Programming skill

  • Web App
    • C#, ASP.NET MVC, ASP.NET Core
    • Laravel
    • jQuery
    • Vue.js
    • Angular.js
  • Native Mobile
    • iOS – swift
    • Android – java
  • Hybrid Mobile
    • Ionic
  • DevOps & Infra
    • Docker & Docker compose
    • VPS – Linux server

 

Why React?

หลักๆ ก็พอมีความรู้ประมาณนั้น ซึ่งก็ต้องตอบตรงๆ ว่าไม่เคยจับ react มาก่อนเลย แล้วไหงอยากทะลึ่งมาทำ Production ด้วย react กันหล่ะ และนี่คือเหตุผลที่พอจะ list ออกมาได้

  1. ได้ยินชื่อ react มานานแล้ว อยากลองทำ
  2. มีคนนึงเชียร์ว่า react เจ๋ง
  3. ที่บริษัทจ้าง vendor มาทำ project mobile app ที่ทำด้วย react native
    1. ผมเองก็อยากทำ web ที่ได้ code ไปทำเป็น mobile app ได้ด้วย
    2. Angular ที่เข้าข่ายนะ เพราะคู่กับ ionic
    3. React ก็เป็นทางเลือก เพราะมี React native
    4. Vue.js ก็ดูเจ๋ง แต่ยังไม่เห็น hybrid framework
  4. ดูดีมีอนาคต เพราะเห็นประกาศหางานเต็มเลย
  5. คงเป็นอยากลองทำ นั่นแหละคือเหตุผลหลัก 55

 

Product requirement

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

  1. เร็ววววววววว
  2. รองรับ load / concurrent ได้เยอะ
  3. support seo
  4. ทำคะแนนใน audit tools ได้เต็ม 100 คะแนนทุกแกนการวัดผล (อันนี้แอบเวอร์ แต่เป้าหมายเราต้องสูงไว้ก่อนเสมอสิ)

แน่นอนว่าถ้า react เฉยๆ สอบตกข้อ 3 แน่ๆ แต่ทุกปัญหามาทางออก และดันมีคนทำทางออกที่ดีไว้ให้แล้ว -> Next.js ฉันเลือกนายยยยย ตัวนี้เกิดมาเพื่อแก้ปัญหาเรื่อง SEO โดยทำตัวเป็นตัว render content มาตั้งแต่ server เพื่อให้ bot ของ search engine อ่านออกและไปจัดอันดับต่อได้ หากงงขอยกไปให้ค้นหาเรื่อง SSR ต่อเองนะครับ ตอนนี้ขี้เกียจพิมพ์ละ 555 เดี๋ยวมาต่อวันพรุ่งนี้ครับ