How to Use Server Side Rendering in Next.js: Simple Guide

In Next.js, use getServerSideProps inside your page component to enable server side rendering. This function runs on the server at each request, fetching data and passing it as props to your component for dynamic, SEO-friendly pages.

Syntax

The getServerSideProps function is an async function exported from a Next.js page. It runs on the server before rendering the page and returns an object with a props key containing data for the page component.

Parts explained:

• export async function getServerSideProps(context): Runs on server at each request.
• context: Contains request info like params, query, and headers.
• return { props: { ... } }: Passes data as props to the page component.

javascript

export async function getServerSideProps(context) {
  // Fetch data here
  return {
    props: {
      // props for your component
    }
  }
}

export default function Page(props) {
  return <div>{props.data}</div>
}

Example

This example fetches a random joke from an API on each request and displays it. It shows how getServerSideProps fetches data server-side and passes it to the component.

javascript

export async function getServerSideProps() {
  const res = await fetch('https://official-joke-api.appspot.com/random_joke')
  const joke = await res.json()

  return {
    props: {
      setup: joke.setup,
      punchline: joke.punchline
    }
  }
}

export default function JokePage({ setup, punchline }) {
  return (
    <main style={{ padding: '1rem', fontFamily: 'Arial, sans-serif' }}>
      <h1>Random Joke</h1>
      <p><strong>Setup:</strong> {setup}</p>
      <p><strong>Punchline:</strong> {punchline}</p>
    </main>
  )
}

Output

<main>
  <h1>Random Joke</h1>
  <p><strong>Setup:</strong> Why did the chicken cross the road?</p>
  <p><strong>Punchline:</strong> To get to the other side!</p>
</main>

Common Pitfalls

• Not exporting getServerSideProps from the page component will disable server side rendering.
• Using client-only hooks like useEffect inside getServerSideProps causes errors because it runs on the server.
• Fetching data inside the component instead of getServerSideProps loses SSR benefits.
• For static data, prefer getStaticProps to avoid unnecessary server calls.

javascript

/* Wrong: Fetching data inside component (no SSR) */
import React from 'react';

export default function Page() {
  const [data, setData] = React.useState(null)
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData)
  }, [])
  return <div>{data ? data.message : 'Loading...'}</div>
}

/* Right: Fetching data server-side */
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return { props: { message: data.message } }
}

export default function Page({ message }) {
  return <div>{message}</div>
}

Quick Reference

Tips for using getServerSideProps:

• Runs on every request, good for dynamic data.
• Only usable in page components, not in regular components.
• Returns an object with props key.
• Can access request info via context (params, query, req, res).
• Use for SEO-friendly pages needing fresh data.

Key Takeaways

Use getServerSideProps in Next.js pages to fetch data on the server at each request.

getServerSideProps returns props that your page component receives for rendering.

Avoid client-side data fetching if you want SEO benefits and faster first load.

getServerSideProps runs only on the server, so you can safely use server-side code.

For static data, prefer getStaticProps to improve performance.