What is the difference between SSR and SSG?

SSR (Server-Side Rendering) and SSG (Static Site Generation) are two approaches to rendering web pages:

• SSR (Server-Side Rendering): the page is generated on the server for each user request. The server creates HTML with up-to-date data and sends it to the client. This is useful for dynamic content that changes frequently.

• SSG (Static Site Generation): pages are generated in advance during the build process and stored as static files. When requested, ready-made HTML files are served to the client. This speeds up loading and reduces server load, but is suitable for content that rarely changes.

Example:

// Next.js example
// SSR
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

// SSG
export async function getStaticProps() {
  const data = await fetchData();
  return { props: { data } };
}

In summary, SSR is for dynamic content with frequent updates, SSG is for static content with high performance.