React Interview Questions (Part 9): Server-Side Rendering (SSR) and Static Site Generation (SSG)

1. What is server-side rendering (SSR), and how does it differ from client-side rendering (CSR)?

Server-side rendering (SSR) generates HTML on the server for each request, improving initial load times and SEO. In contrast, client-side rendering (CSR) builds the HTML in the browser using JavaScript, which can delay the display of content.

In SSR, the HTML content is ready before it reaches the browser, which reduces the time-to-first-paint. With CSR, the browser first downloads and executes JavaScript before rendering the content, making the initial load slower but enabling faster client-side interactions after that.

2. How does Next.js handle SSR in React applications?

Next.js natively supports server-side rendering (SSR). It uses the getServerSideProps function to fetch data and render it on the server before sending the HTML to the client.

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  return { props: { data } };
}

function Page({ data }) {
  return <div>{data}</div>;
}

The getServerSideProps function runs at request time, fetching fresh data and rendering it server-side. This means that each time the page is requested, the server will process the data and return the up-to-date HTML.

By default, Next.js performs SSR for all pages unless explicitly configured otherwise (e.g., for static pages or client-side rendering).

3. What is static site generation (SSG), and how does it improve performance?

Static Site Generation (SSG) pre-builds HTML pages at build time, meaning the content is generated once and served statically. SSG is ideal for content that doesn’t change frequently, such as documentation, blogs, or marketing pages.

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/static-data');
  return { props: { data } };
}

function Page({ data }) {
  return <div>{data}</div>;
}

SSG significantly improves performance by reducing server load. It can take advantage of Content Delivery Networks (CDNs) to cache the static HTML and serve it quickly to users across the globe. This results in faster load times, especially when serving the same content repeatedly.

4. What are the benefits and drawbacks of using SSR in React applications?

Benefits of SSR:

• Improved SEO: Pre-rendered HTML is crawled by search engines, improving SEO.

• Faster Initial Load: Content is available immediately on load.

Drawbacks of SSR:

• Server Load: More processing on the server can slow it down with high traffic.

• Less Interactivity: SSR isn’t ideal for applications needing heavy client-side interactions.

5. When would you choose SSR or SSG over client-side rendering?

Use SSR:

• For dynamic pages where content frequently changes (e.g., e-commerce product pages, user-generated content).

• For SEO-focused pages where visibility in search engines is important (e.g., blogs, landing pages).

Use SSG:

• For static content that doesn’t change often (e.g., blogs, documentation).

• For performance: SSG provides faster load times due to cached static content, especially with CDNs.

Use CSR:

• For highly interactive web apps (e.g., dashboards, where most updates happen on the client-side after the initial page load).