nextjs getServerSideProps vs API

Question

I'm trying to understand the main difference between getServerSideProps and just using useSWR inside of the page component. If I run something like this inside getServerSideProps:

export const getServerSideProps = async () => {

  try {
    const palettes = []
    const docRef = query(collection(db, 'palettes'), orderBy('likes', 'desc'), limit(16))
    const docData = await getDocs(docRef)
    docData.forEach((doc) => {
      palettes.push(doc.data())
    })

    if (!docData) {
      return {
        props: {
          data: { error: 'Failed to load palettes. Please refresh the page.'}
        }
      }
    } else {
      return {
        props: {
          data: { palettes }
        }
      }
    }

  } catch (e) {
    console.log('error:', e)
  }
}

It will run at build time and then on each request by the user when viewing/navigating to the page?

Then what would be the difference from just using useSWR or another API fetcher like:

export default function PaletteSlugs({ slug }) {
  const { data, error } = useSWR(`/api/palette/${slug}`, fetcher)
  return (
   {data}
  )
}

Also could this affect how many request/reads will happen on the database?

Answer 1

Simply, using getServerSideProps will get the API data by the node.js server side, while the HTML page will be completely populated by the node.js server side, so if you try to open the source code of the browser you will see all data already exist in the source code, this will be better for SEO

But useSWR will get the data on the client-side like normal fetch and the data will be populated by the client side.