Server Side Rendering in Next.js

Server Side Rendering in Next.js – Learn how SSR improves performance, SEO, and user experience by rendering pages on the server before sending them to the browser.

 

What is Server Side Rendering?

Server Side Rendering (SSR) generates HTML pages on the server for each request, delivering fully-formed content to browsers instead of empty shells that rely on JavaScript to build the page. This approach improves initial load times and SEO performance.

Traditional CSR Flow: Request → JavaScript Bundle → Client Renders → Display

SSR Flow: Request → Server Renders → Complete HTML → Display

Implementing SSR in Next.js

Next.js makes SSR straightforward with the getServerSideProps function:

// pages/products.js

function ProductsPage({ products }) {

  return (

    <div>

      <h1>Products</h1>

      {products.map(product => (

        <div key={product.id}>

          <h3>{product.name}</h3>

          <p>${product.price}</p>

        </div>

      ))}

    </div>

  );

}

// Runs on server for every request

export async function getServerSideProps() {

  const res = await fetch('https://api.example.com/products');

  const products = await res.json();

  return { props: { products } };

}

export default ProductsPage;

Dynamic Routes and Authentication

// pages/user/[id].js

export async function getServerSideProps(context) {

  const { id } = context.params;

  const token = context.req.cookies.authToken;

  if (!token) {

    return {

      redirect: { destination: '/login', permanent: false }

    };

  }

  const userData = await fetch(`https://api.example.com/users/${id}`, {

    headers: { 'Authorization': `Bearer ${token}` }

  });

  return { props: { user: await userData.json() } };

}

Key Benefits

SEO Optimization: Search engines can immediately crawl and index server-rendered content, improving search rankings and social media previews.

Faster Initial Load: Users see content instantly since HTML is pre-rendered on the server, particularly beneficial for users on slower devices or connections.

Better Core Web Vitals: SSR typically improves Largest Contentful Paint (LCP) and First Contentful Paint (FCP) metrics.

When to Use SSR

Performance Best Practices

Implement Caching:

export async function getServerSideProps(context) {

  context.res.setHeader(

    'Cache-Control',

    'public, s-maxage=300, stale-while-revalidate=600'

  );

  // ... fetch data

}

Optimize Data Fetching: Only fetch essential data needed for initial render. Use parallel requests when possible:

const [userData, postsData] = await Promise.all([

  fetch('/api/user'),

  fetch('/api/posts')

]);

Handle Errors Gracefully: Always implement proper error handling to prevent server crashes and provide fallback content.

Common Pitfalls

Over-fetching Data: Avoid loading unnecessary data that slows server response times.

Missing Error Handling: Always wrap API calls in try-catch blocks and provide meaningful fallbacks.

Ignoring Caching: Implement appropriate caching strategies to reduce server load and improve response times.

Memory Leaks: Properly clean up database connections and other resources in server-side functions.

Hybrid Approach

Next.js allows mixing rendering strategies within the same application. Use SSR for dynamic pages, Static Generation for stable content, and Client-Side Rendering for interactive components. This hybrid approach optimizes performance while maintaining flexibility.

Conclusion

SSR in Next.js provides an excellent balance between performance, SEO, and user experience. It's particularly valuable for content-heavy sites, e-commerce platforms, and applications requiring good search engine visibility. Choose SSR when you need fresh data on every request and SEO is crucial, but consider Static Generation for content that doesn't change frequently to achieve even better performance.

Do visit our channel to learn More: SevenMentor

Author:-

Pritesh Dhanad