getServerSideProps และ useEffect เป็นทั้งสองวิธีที่ใช้ในการดึงข้อมูลใน Next.js แต่ใช้ในบริบทที่แตกต่างกันและมีลักษณะการทำงานต่างกัน

getServerSideProps จะทำงานฝั่ง server เท่านั้น ไม่ทำในฝั่ง client

ในทางกลับกัน

useEffect คือ React Hook จะถูกเรียกใช้ในฝั่ง client

สรุป getServerSideProps ใช้สำหรับการ render ฝั่ง server ดึงข้อมูลก่อนที่เพจจะถูก render และเรียกเฉพาะในฝั่ง server เท่านั้น ขณะที่ useEffect ใช้สำหรับการเรนเดอร์ฝั่ง client การดึงข้อมูลหลังจากการ initial render และมันถูกเรียกใช้ในฝั่ง client

ตัวอย่างโค้ด

import { useState, useEffect } from 'react'
import axios from 'axios'

function MyComponent({ initialData }) {
    const [data, setData] = useState(initialData)

    useEffect(() => {
        async function fetchData() {
            const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
            setData(res.data)
        }
        if (!initialData) {
            fetchData()
        }
    }, [initialData])

    if (!data) {
        return <div>Loading...</div>
    }

    return (
        <div>
            {data.map((item) => (
                <p key={item.id}>{item.title}</p>
            ))}
        </div>
    )
}

export async function getServerSideProps() {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts')
    const initialData = res.data
    return {
        props: {
            initialData,
        },
    }
}

export default MyComponent