dynamically rendering my page with server components

Unanswered

Masai Lion posted this in #help-forum

Masai LionOP

2023-10-09T03:19:51.000Z

deploying my app to vercel, but this results.tsx page i have must be dynamically rendered or else it gives this error that it can't find the data on the results page, as it requires data sent to the page through a router to render whatever is on the page

i tried using this here

export const getServerSideProps: GetServerSideProps<ResultsPageProps, ParsedUrlQuery> = async (context) => {
  // Fetch and process productData here based on the query or any other dynamic data source.
  const router = useRouter();
  const { user } = useUser();

  //const productData: ResultsProduct[] = []; // Fetch and process your data here based on the query.
  const productData = router.query.productData
  ? JSON.parse(router.query.productData as string)
  : [];
  console.log(user)
  console.log(productData)

  return {
    props: {
      productData,
      router,
      user,
    },
  };
};

and edited the export page component like this:

const ResultsPage: NextPage<ResultsPageProps> = ({ productData, router, user }) => {

and while this marks the page and doesn't cause an error in production w/ vercel

it doesn't render the data it is supposed to when i make my search and returns an error page

how do i make sure i am able to recieve my data and query properly but dynamically render the page w/out an error

4 Replies

Masai LionOP

2023-10-09T03:20:35.000Z

full code:

import { NextPage, GetServerSideProps } from 'next';
import { ParsedUrlQuery } from 'querystring';
import React, { useEffect, useState } from 'react';
import { useUser } from  '@auth0/nextjs-auth0/client';
import { useRouter } from 'next/dist/client/router';
import { FaInfoCircle, FaStar, FaShippingFast, FaUser } from 'react-icons/fa';
import { getSession } from '@auth0/nextjs-auth0';


// Create an interface for the product object
interface ResultsProduct {
  url: string;
  image: string;
  storeName: string;
  title: string; 
  description: string;
  originalPrice: number;
  salePrice: number;
  shippingInfo: string;
  reviewScore: number;
  reviewNumber: number;
  ECOscore: number;
}             
 
interface ResultsPageProps {
  productData: ResultsProduct[];
  router: any;
  user: any;
}

const ResultsPage: NextPage<ResultsPageProps> = ({ }) => { //productData, router, user 
  //const searchQuery: any = router.query.query
  
  const router = useRouter();

  //const productData: ResultsProduct[] = []; // Fetch and process your data here based on the query.
  const productData = router.query.productData
  ? JSON.parse(router.query.productData as string)
  : [];
  
  // Parse the product data from the query parameter

  console.log(productData)
  const [expandedProduct, setExpandedProduct] = useState<number | null>(null);
  let parsedProductsData: ResultsProduct[] = [];

  if (productData && Array.isArray(productData)) {
    parsedProductsData = productData.map((product: any) => ({
      url: product.url,
      image: product.image,
      storeName: product.storeName,
      title: product.title,
      description: product.description,
      originalPrice: product.originalPrice,
      salePrice: product.salePrice,
      shippingInfo: product.shippingInfo,
      reviewScore: product.reviewScore,
      reviewNumber: product.reviewNumber,
      ECOscore: product.ECOscore,
    }));
  }

return (....
)

(the stuff returned is given through the productdata )

(if i don't use this below code, it works fine, but i need it for deploying to vercel:)

//export async function getServerSideProps() {
export const getServerSideProps: GetServerSideProps<ResultsPageProps, ParsedUrlQuery> = async (context) => {
  // Fetch and process productData here based on the query or any other dynamic data source.
  const router = useRouter();
  const { user } = useUser();

  //const productData: ResultsProduct[] = []; // Fetch and process your data here based on the query.
  const productData = router.query.productData
  ? JSON.parse(router.query.productData as string)
  : [];
  console.log(user)
  console.log(productData)

  return {
    props: {
      productData,
      router,
      user,
    },
  };
};



export default ResultsPage;