การใช้ getInitialProps และเมื่อไหร่ควรใช้

ถ้าคุณเคยใช้ Next.js มาสักพัก น่าจะเคยได้ยินเกี่ยวกับ getInitialProps ซึ่งเป็นฟังก์ชันที่ใช้ดึงข้อมูลมาแสดงบนหน้าเว็บได้ทั้ง ฝั่งเซิร์ฟเวอร์ (Server-side) และ ฝั่งไคลเอนต์ (Client-side) แต่เดี๋ยวก่อน! ทำไมมันถึงดูเหมือน SSR และ CSR รวมกันล่ะ?

วันนี้เราจะมาเจาะลึกว่า getInitialProps ทำงานยังไง ควรใช้เมื่อไหร่ และ Next.js เวอร์ชันใหม่ยังควรใช้มันอยู่มั้ย? ถ้าพร้อมแล้ว ไปดูกันเลย! 🚀

📌 getInitialProps คืออะไร?

getInitialProps เป็นฟังก์ชันพิเศษของ Next.js ที่ใช้ดึงข้อมูลให้กับ Page Component โดยสามารถทำงานได้ทั้งฝั่ง เซิร์ฟเวอร์ และ ไคลเอนต์ ขึ้นอยู่กับว่าเพจนั้นโหลดมาแบบไหน

• รันบนเซิร์ฟเวอร์ ถ้าผู้ใช้เข้าหน้าเว็บโดยตรง (getInitialProps ทำงานเหมือน SSR)
• รันบนไคลเอนต์ ถ้าผู้ใช้ไปยังหน้านั้นผ่านการ Client-side Navigation (เช่น กดลิงก์ไปที่หน้าใหม่โดยไม่โหลดเว็บใหม่)

🔍 ข้อดีของ getInitialProps

• ใช้ดึงข้อมูลได้ทั้งจากเซิร์ฟเวอร์และไคลเอนต์
• ใช้กับ Custom App (_app.js) ได้
• เหมาะสำหรับแอปที่ต้องการโหลดข้อมูลแบบ Hybrid (SSR + CSR)

❌ ข้อเสียของ getInitialProps

• ทำให้ Automatic Static Optimization ใช้ไม่ได้ เพราะ Next.js มองว่ามันเป็น Dynamic Page
• ช้ากว่า getStaticProps เพราะต้องรันโค้ดทุกครั้งที่โหลดหน้า
• Next.js ไม่แนะนำให้ใช้ในเวอร์ชันใหม่ เนื่องจาก SSR และ SSG มีฟังก์ชันที่แยกกันชัดเจนกว่า

📌 วิธีใช้ getInitialProps

ลองมาดูตัวอย่างการใช้งานกัน สมมติว่าเราต้องการดึงข้อมูลจาก API และแสดงผลในหน้าเว็บ

import React from 'react';

const Blog = ({ posts }) => {
  return (
    <div>
      <h1>บล็อก (getInitialProps)</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

Blog.getInitialProps = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return { posts };
};

export default Blog;

🔍 อธิบายโค้ด:

• เราสร้างคอมโพเนนต์ Blog และรับ posts เป็น props
• ใช้ Blog.getInitialProps เพื่อดึงข้อมูลจาก API
• ถ้าผู้ใช้โหลดหน้า /blog ตรง ๆ → getInitialProps จะรันบนเซิร์ฟเวอร์
• ถ้าผู้ใช้กดลิงก์มาจากหน้าอื่น → getInitialProps จะรันบนไคลเอนต์

📌 getInitialProps ใช้กับ _app.js ได้!

หนึ่งในข้อดีของ getInitialProps คือมันสามารถใช้ได้ในไฟล์ _app.js ซึ่งเป็นไฟล์หลักของ Next.js ที่ใช้ควบคุมทุกหน้าในแอปของเรา

ตัวอย่างการใช้ getInitialProps ใน _app.js เพื่อดึงข้อมูล User Authentication

import App from 'next/app';

function MyApp({ Component, pageProps, user }) {
  return (
    <div>
      <p>ผู้ใช้ปัจจุบัน: {user?.name || 'Guest'}</p>
      <Component {...pageProps} />
    </div>
  );
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  // สมมติว่าเราเช็ก Token และดึงข้อมูลผู้ใช้จาก API
  const user = await fetchUserFromAPI(appContext.ctx);

  return { ...appProps, user };
};

export default MyApp;

🔍 อธิบายโค้ด:

• MyApp เป็นคอมโพเนนต์หลักของแอป Next.js
• getInitialProps ถูกเรียกตอนโหลดทุกหน้า ทำให้เราสามารถดึงข้อมูลผู้ใช้และส่งไปที่ทุกเพจได้
• ถ้าเราใช้ fetchUserFromAPI() ใน _app.js มันจะรันบน เซิร์ฟเวอร์เสมอ

📌 เมื่อไหร่ควรใช้ getInitialProps?

✅ ใช้ getInitialProps ถ้า:

• ต้องการดึงข้อมูล ทั้งฝั่งเซิร์ฟเวอร์และไคลเอนต์
• ต้องการดึงข้อมูลใน _app.js (แต่ปัจจุบันแนะนำให้ใช้ getServerSideProps หรือ API Context แทน)
• ต้องการให้หน้ามี Dynamic Data แต่ไม่ต้องการใช้ SSR เต็มรูปแบบ

❌ ไม่ควรใช้ getInitialProps ถ้า:

• หน้าเว็บไม่จำเป็นต้องโหลดข้อมูลใหม่ทุกครั้ง → ควรใช้ getStaticProps แทน
• ต้องการโหลดเร็ว ๆ → SSR อาจช้าไป ควรใช้ CSR หรือ SSG
• ใช้ Next.js เวอร์ชันใหม่ → Next.js แนะนำให้ใช้ getServerSideProps หรือ getStaticProps แทน

📌 เปรียบเทียบ getInitialProps vs getServerSideProps vs getStaticProps

Feature	getInitialProps	getServerSideProps	getStaticProps
ดึงข้อมูลตอน	ทุกครั้งที่โหลดหน้า (SSR) หรือเมื่อกดลิงก์ (CSR)	ทุกครั้งที่โหลดหน้า (SSR)	ตอน Build Time เท่านั้น (SSG)
เหมาะกับข้อมูลที่	เปลี่ยนแปลงบ่อย และต้องการทำงานทั้ง SSR + CSR	เปลี่ยนแปลงบ่อย และต้องการ SSR 100%	คงที่ หรือเปลี่ยนนาน ๆ ที
โหลดเร็วกว่า	❌ ช้ากว่าเพราะต้องรองรับทั้ง SSR และ CSR	❌ โหลดช้าเพราะต้องรอเซิร์ฟเวอร์	✅ โหลดไวเพราะเป็น Static
ใช้กับ _app.js ได้	✅ ใช้ได้	❌ ใช้ไม่ได้	❌ ใช้ไม่ได้
Next.js แนะนำให้ใช้?	❌ ไม่แนะนำแล้ว	✅ ใช้แทน SSR	✅ ใช้แทน SSG

💡 สรุปง่าย ๆ:

• อย่าใช้ getInitialProps ใน Next.js เวอร์ชันใหม่ → ใช้ getServerSideProps หรือ getStaticProps แทน
• ถ้าต้องการ SSR ใช้ getServerSideProps
• ถ้าต้องการ Static Site ใช้ getStaticProps

📌 สรุป

getInitialProps เคยเป็นฟีเจอร์ที่ได้รับความนิยมใน Next.js แต่ปัจจุบัน Next.js แนะนำให้ใช้ SSR (getServerSideProps) หรือ SSG (getStaticProps) แทน เพราะมันแยกหน้าที่กันชัดเจนกว่าและทำให้การโหลดเว็บเร็วขึ้น

ถ้าคุณยังใช้ getInitialProps อยู่ในโปรเจ็กต์เก่า ลองเปลี่ยนมาใช้ getServerSideProps หรือ getStaticProps ดู แล้วคุณจะเห็นความแตกต่าง! 🚀

การใช้ getServerSideProps สำหรับ Server-side Rendering (SSR)

ถ้าพูดถึงการโหลดข้อมูลแบบเรียลไทม์ และต้องการให้เซิร์ฟเวอร์เป็นคนจัดการข้อมูลทุกครั้งที่มีการรีเควสต์ หน้าเว็บของคุณต้องใช้ Server-side Rendering (SSR) และหนึ่งในฟีเจอร์เด่นของ Next.js ที่ทำให้ SSR เป็นเรื่องง่ายก็คือ getServerSideProps นั่นเอง!

วันนี้เราจะมาดูกันว่า getServerSideProps ทำงานยังไง ใช้ยังไง และเมื่อไหร่ควรใช้ พร้อมเทคนิคดี ๆ ที่จะช่วยให้คุณใช้งาน SSR ได้อย่างมีประสิทธิภาพสุด ๆ! 🚀

📌 Server-side Rendering (SSR) คืออะไร?

Server-side Rendering (SSR) คือเทคนิคที่ให้เซิร์ฟเวอร์ประมวลผลหน้าเว็บ ทุกครั้งที่มีการรีเควสต์ ซึ่งต่างจาก Static Site Generation (SSG) ที่สร้างหน้า HTML ล่วงหน้าตอน Build Time

🔍 ข้อดีของ SSR:

• ข้อมูลอัปเดตแบบเรียลไทม์ เพราะดึงข้อมูลใหม่ทุกครั้งที่มีการโหลดหน้า
• เหมาะกับหน้าที่ต้องการข้อมูลเฉพาะตัวของผู้ใช้ เช่น Dashboard หรือ Personalized Content
• ไม่ต้องรอ Build ใหม่เวลาข้อมูลเปลี่ยน

❌ ข้อเสียของ SSR:

•     โหลดช้ากว่า SSG เพราะต้องรอให้เซิร์ฟเวอร์ประมวลผลก่อน
•     ใช้ทรัพยากรเซิร์ฟเวอร์มากขึ้น เพราะต้องประมวลผลทุกครั้งที่มีรีเควสต์
•     แคชยากกว่า เพราะข้อมูลเปลี่ยนแปลงตลอด

📌 getServerSideProps คืออะไร?

getServerSideProps เป็นฟังก์ชันพิเศษของ Next.js ที่ใช้ดึงข้อมูลจากเซิร์ฟเวอร์แบบ Real-time ก่อนที่จะแสดงผลให้ผู้ใช้

• เรียกใช้ ทุกครั้งที่มีการโหลดหน้า (ไม่มีการแคช)
• ทำงานเฉพาะฝั่งเซิร์ฟเวอร์เท่านั้น (รันบน Node.js)
• สามารถดึงข้อมูลจาก API, Database, หรือ Authentication ได้

📌 วิธีใช้ getServerSideProps

มาดูตัวอย่างกัน สมมติว่าเราต้องการดึงข้อมูลโพสต์แบบเรียลไทม์จาก API

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default function Blog({ posts }) {
  return (
    <div>
      <h1>บล็อกของเรา (SSR)</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

🔍 อธิบายโค้ด:

• getServerSideProps จะรัน ทุกครั้งที่ผู้ใช้เข้าเว็บ
• ใช้ fetch ดึงข้อมูลจาก API
• ส่งข้อมูลไปที่ props ของคอมโพเนนต์ Blog
• เมื่อหน้าโหลด ข้อมูลจะถูกดึงแบบ เรียลไทม์ จากเซิร์ฟเวอร์

📌 ส่งพารามิเตอร์ไปที่ getServerSideProps

ถ้าเรามี Dynamic Routes เช่น /posts/[id] แล้วต้องการให้เซิร์ฟเวอร์ดึงข้อมูลตาม id ที่ผู้ใช้เรียก เราสามารถใช้ context.params ได้

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const post = await res.json();

  return {
    props: { post },
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

🔍 อธิบายโค้ด:

• context.params.id จะรับค่า id จาก URL
• ดึงข้อมูลเฉพาะโพสต์ที่ตรงกับ id
• ส่งข้อมูลไปที่ Component และแสดงผล

📌 ใช้ context เพื่อเข้าถึง Query String หรือ Headers

นอกจาก params แล้ว context ยังมีค่าที่เป็นประโยชน์อีกเพียบ เช่น

• context.query → ใช้ดึง Query Parameters (?page=2)
• context.req → ใช้ดึง Request Headers หรือ Session
• context.res → ใช้เซ็ต Response Headers

ตัวอย่าง: ดึงค่าจาก Query String

export async function getServerSideProps(context) {
  const page = context.query.page || 1;
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}`);
  const posts = await res.json();

  return {
    props: { posts, page },
  };
}

export default function Blog({ posts, page }) {
  return (
    <div>
      <h1>บล็อก - หน้า {page}</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

✅ ข้อดี: รองรับการเปลี่ยนหน้า (?page=2) แบบเรียลไทม์!

📌 ควรใช้ getServerSideProps เมื่อไหร่?

✅ ใช้ getServerSideProps ถ้า:

• ข้อมูลต้องอัปเดตแบบเรียลไทม์ (เช่น Dashboard, Stock Price, Weather)
• ข้อมูลขึ้นอยู่กับผู้ใช้ (เช่น หน้า Profile, Authentication)
• ต้องการ Query Parameters (?search=..., ?page=...)

❌ ไม่ควรใช้ getServerSideProps ถ้า:

• ข้อมูลเปลี่ยนแปลงไม่บ่อย → ใช้ getStaticProps ดีกว่า
• ต้องการโหลดเว็บเร็วสุด ๆ → ใช้ getStaticProps + revalidate

📌 เปรียบเทียบ getServerSideProps vs getStaticProps

Feature	getServerSideProps (SSR)	getStaticProps (SSG)
ดึงข้อมูลตอน	ทุกครั้งที่โหลดหน้า	ตอน Build Time เท่านั้น
เหมาะกับข้อมูลที่	เปลี่ยนแปลงบ่อย	คงที่ หรือเปลี่ยนนาน ๆ ที
โหลดเร็วกว่า	❌ ต้องรอเซิร์ฟเวอร์	✅ โหลดไว เพราะเป็น Static
ใช้งานร่วมกับ API	✅ ดึงข้อมูลเรียลไทม์	✅ ดึง API ได้ตอน Build
SEO	✅ ดี	✅ ดีมาก

💡 สรุปง่าย ๆ:

• ถ้าเป็นข้อมูลที่ไม่ค่อยเปลี่ยน ใช้ getStaticProps
• ถ้าเป็นข้อมูลที่เปลี่ยนตลอด ใช้ getServerSideProps

📌 สรุป

getServerSideProps เป็นฟังก์ชันที่ช่วยให้ Next.js ทำ SSR ได้ง่าย ๆ โดย:

• ดึงข้อมูลจากเซิร์ฟเวอร์ ทุกครั้งที่มีการโหลดหน้า
• ใช้ร่วมกับ Dynamic Routes และ Query Parameters ได้
• เหมาะสำหรับข้อมูลที่เปลี่ยนแปลงตลอดเวลา หรือขึ้นอยู่กับผู้ใช้

ถ้าเว็บของคุณต้องการโหลดข้อมูลแบบเรียลไทม์ SSR คือทางเลือกที่ใช่! 🚀