The difference between 'getStaticProps' and 'getServerSideProps'

Images kept failing to load on the deployed site of my portfolio, which I built with Next.JS.

I kept thinking about the cause, and no matter how I looked at it, it seemed to be a getStaticProps() problem. So I replaced it, and the site worked normally for several days with no issues.

Then why did images load normally with getServerSideProps()? The reason is below.

getStaticProps This method is used on pages that use Static Generation.

Static Generation renders the page at build time and serves a pre-generated HTML file.

A page generated this way stays static, and no request is made to the server.

When you fetch data with getStaticProps, it's called once at build time and the data is loaded into the page in advance.

However, with dynamic elements such as images, there may be no data to load at build time, which can cause problems.

getServerSideProps

This method is used on pages that use Server-Side Rendering (SSR).

SSR renders the page on the server every time there's a client request, and generates and serves the HTML dynamically.

When you fetch data with getServerSideProps, it's called on every request and renders the page with the latest data.

So dynamic elements such as images also load normally.

I should keep the difference between the two in mind.