ssr-next-js

ssr.tsx

import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';

type Product = {
 id: string;
 title: string;
}

type SearchResultsPageProps = {
  products: Array<Product>;
}
 
const SearchResultsPage = ({ products }: SearchResultsPageProps) => (
    <div>
        {products.map((product) => (<p key={product.id}>{product.title}</p>))}
    </div>
)
 
export async function getServerSideProps({ res, query }: GetServerSidePropsContext): Promise<GetServerSidePropsResult<SearchResultsPageProps>> { 
  const category = query?.category;
  
  if (!category) {
    return {
        redirect: {
            destination: '/'
        }
    }
  }
  
  const data = await fetch(`http://external-api.com/products?category=${category}`);
  const products = await data.json();
  
  if (products.length === 0) {
    return {
      notFound: true
    }
  }
 
  return {
    props: {
      products,
    }
  }
}
 
export default ProductsPage;