getServerSideProps not working in React Router (Next.js vs React)

19 replies

Last updated: Nov 29, 2025

import React from 'react';
import { Link } from "react-router-dom";
import Header from "../components/Header";
import "./Home.css";
import {Carousel, Card, Image} from 'antd';
import {client} from "../lib/client";


const Home = ({products,bannerData}) => {

  return(
      <>
        <div className="container">
          <Header/>
          <Carousel autoplay className="carousel">
            {bannerData?.map((e) => {
              return <img src={e} className="carousel-img" alt="carousel"></img>;
            })}
          </Carousel>
          <div className="cards">
            <Card className="card">{products?.map((product)=>{
              return(
                  <div key={product.Slug}>
                  <h1>{product.Name}</h1>
                  <img src={product.Image} alt={product.Name} className="card-content"/>
                  <br />
                  <Link to="/categories" state={product.Genre} className="link">
                    Shop Now
                  </Link>
                  </div>
              )
            })}


            </Card>
          </div>
        </div>
      </>
  )


}
export const getServerSideProps = async () => {
  const query = `*[_type == "product"]`;
  const products = await client.fetch(query);

  const bannerQuery = `*[_type == "banner"]`;
  const bannerData = await client.fetch(bannerQuery);

  return {
    props: { products, bannerData }
  }
}

export default Home;

AI Update

I can see you're mixing React Router with Next.js data fetching patterns, which won't work as expected. Let me explain the issue and how to fix it.

The problem is that getServerSideProps is a Next.js-specific function that only works in the Next.js Pages Router. However, your code is using React Router (import { Link } from "react-router-dom"), which is a completely different routing system used in standard React applications (like Create React App or Vite).

These two approaches are incompatible - you can't use getServerSideProps in a React Router application.

Solutions

Option 1: Fetch Data in React (Keep React Router)

If you want to continue using React Router, fetch your Sanity data using standard React patterns:

import React, { useEffect, useState } from 'react';
import { Link } from "react-router-dom";
import Header from "../components/Header";
import "./Home.css";
import { Carousel, Card } from 'antd';
import { client } from "../lib/client";

const Home = () => {
  const [products, setProducts] = useState([]);
  const [bannerData, setBannerData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const productsQuery = `*[_type == "product"]`;
        const productsResult = await client.fetch(productsQuery);
        
        const bannerQuery = `*[_type == "banner"]`;
        const bannerResult = await client.fetch(bannerQuery);
        
        setProducts(productsResult);
        setBannerData(bannerResult);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div className="container">
      <Header/>
      <Carousel autoplay className="carousel">
        {bannerData?.map((e, index) => (
          <img key={index} src={e} className="carousel-img" alt="carousel" />
        ))}
      </Carousel>
      <div className="cards">
        <Card className="card">
          {products?.map((product) => (
            <div key={product.Slug}>
              <h1>{product.Name}</h1>
              <img src={product.Image} alt={product.Name} className="card-content"/>
              <br />
              <Link to="/categories" state={product.Genre} className="link">
                Shop Now
              </Link>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

export default Home;

Option 2: Switch to Next.js (Use getServerSideProps)

If you actually want to use Next.js for server-side rendering and SEO benefits, you'll need to migrate from React Router to Next.js. Your getServerSideProps code would then work, but you'd need to:

Replace react-router-dom with Next.js's built-in routing
Use Next.js <Link> component from next/link
Place this file in the pages directory

Check out the Next.js Pages Router documentation for more details on how this works with Sanity.

Additional Notes

Your banner data appears to be returning raw values - you might need to use Sanity's image URL builder to properly construct image URLs
Consider adding error handling for failed data fetches
The key prop on your carousel items should be more specific than just the array index

The choice between React Router and Next.js depends on your project requirements - Next.js offers better SEO and server-side rendering, while React Router gives you more flexibility for client-side applications.

Show original thread

19 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo