SSR

/ˌɛs-ɛs-ˈɑːr/

n. “Rendering pages on the server so users get fully formed HTML right away.”

SSR, short for Server-Side Rendering, is a web development technique where HTML pages are generated on the server for each incoming request, instead of relying solely on client-side JavaScript to build the page in the browser. This approach ensures that users and search engines receive fully rendered content immediately.

Key characteristics of SSR include:

• Immediate HTML: Users receive a complete page on the first request, improving perceived load speed.
• SEO-friendly: Since search engines receive fully rendered pages, content is more easily indexed.
• Dynamic Content: The server can tailor pages based on user context, authentication, or other runtime data.

Frameworks like Next.js allow developers to implement SSR, often combining it with static generation or client-side hydration for interactive features.

Here’s a simple Next.js example using SSR to fetch user data from an API for each request:

// pages/users.js
export default function Users({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

// Runs on every request
export async function getServerSideProps() {
const res = await fetch('[https://api.example.com/users](https://api.example.com/users)');
const users = await res.json();

return { props: { users } };
}

In this snippet, the getServerSideProps function runs on the server for each request, fetching fresh user data and pre-rendering the page before sending it to the client.

In essence, SSR bridges the gap between static pre-rendering and client-side rendering. It offers faster perceived load times, improved SEO, and the ability to serve dynamic content while keeping interactive front-end features intact.