Introduction

One of Next.js's most powerful features is its flexibility in rendering strategies. Unlike traditional client-side rendered (CSR) React applications, Next.js allows you to pre-render pages, significantly boosting performance and SEO. This lesson focuses on Server-Side Rendering (SSR), a strategy where pages are rendered on the server for each request. We'll explore when to use SSR, how to implement it using the getServerSideProps function, and understand its advantages and potential drawbacks compared to other rendering methods. Mastery of SSR is crucial for applications requiring up-to-the minute data or user-specific content.

Key Concepts

What is Server-Side Rendering (SSR)?

SSR means that the HTML for a page is generated on the server for every incoming request.

• Process: When a user requests an SSR page, the Next.js server runs the page component's data fetching function (getServerSideProps), uses the fetched data to render the component to HTML, and then sends that HTML (along with minimal JavaScript) to the client.

• Hydration: Once the client receives the HTML, React "hydrates" it, attaching event listeners and making it interactive.

• Use Cases: Ideal for pages with frequently updated data, or data that needs to be unique per user and must be fresh on every request (e.g., a user dashboard, e-commerce product page with real-time stock).

getServerSideProps Function

• This is an asynchronous function that runs exclusively on the server-side, on every request.

• It must be exported from a page file (e.g., pages/my-ssr-page.js).

• It receives a context object containing request-specific data like params, req, res, query.

• It must return an object with a props key, which will be passed to your page component.

Signature: javascript export async function getServerSideProps(context) { // ... your server-side logic return { props: { // will be passed to the page component as props }, }; }

Advantages and Disadvantages of SSR

• Advantages:

• Excellent SEO: Search engine crawlers see fully rendered HTML immediately.

• Faster Initial Page Load: Users see content sooner as HTML is delivered directly.

• Always Fresh Data: Data is fetched on every request, ensuring content is up-to-date.

• Disadvantages:

• Slower Time to First Byte (TTFB): The server has to process the request and fetch data for every user, which can be slower than serving static files.

• Increased Server Load: Each request incurs a server computation, potentially requiring more robust server infrastructure for high traffic.

Code Example: SSR with getServerSideProps

Let's create a page that fetches a list of users on every request.

jsx // pages/users-ssr.js import Layout from '../components/Layout';

export default function UsersSSR({ users }) { return ( <Layout> <h1>Server-Side Rendered Users</h1> <ul> {users.map((user) => ( <li key={user.id}>{user.name} ({user.email})</li> ))} </ul> </Layout> ); }

export async function getServerSideProps() { // This code runs on the server for every request const res = await fetch('https://jsonplaceholder.typicode.com/users'); const users = await res.json();

// Pass data to the page via props return { props: { users } }; }

Key Takeaways

• SSR pre-renders pages on the server for each request, delivering fully formed HTML.

• Use getServerSideProps for SSR; it runs exclusively on the server side for every request.

• SSR is beneficial for SEO and fresh, dynamic content but can increase server load and TTFB.

• The props returned by getServerSideProps are passed directly to your page component.