I'm building a frontend application for e-commerce project and I'm using React 17.x and Nextjs 10.2.3. My problem is when I change page with next/link getServerSideProps doesn't called but when I refresh the page getServerSideProps called and sending request to backend. I looked to documentation of next/link it's says next/link has a shallow property for calling getServerSideProps for pre-fetching or not and I turned that property to false but still getServerSideProps doesn't called with next/link. Is there any way except not using next/link?
One page of my project
interface HomeProps {
announcements: IAnnouncement[];
campaigns: ICampaignResponse[];
companies: ICompaniesResponse[];
creditSummary: ICreditResponse;
}
export const getServerSideProps = async (
context: GetServerSidePropsContext
) => {
const announcements = await queryEndpoints.getAnnouncements();
const creditSummary = await queryEndpoints.getCredit();
const companies = await queryEndpoints.getCompanies();
const campaigns = await queryEndpoints.getCampaigns();
return {
props: {
announcements,
creditSummary,
companies,
campaigns,
},
};
};
export default function Home({
companies,
campaigns,
creditSummary,
}: HomeProps) {
return (
<>
<Container>
<CampaignsBlock campaigns={campaigns} />
<div className="grid grid-cols-12 gap-4 pt-18 pb-24">
<div className="border border-gray-300 p-8 rounded-md col-start-1 col-end-13 lg:col-end-8 xl:col-end-8 order-2 lg:order-1 xl:order-1">
<div className="w-full">
<SectionHeader sectionHeading="Duyuru" />
<p className="text-body text-xs lg:text-sm leading-normal xl:leading-relaxed">
Monochrome elegance. Made with a relaxed wide-leg, these
trousers are made from a sustainable soft organic cotton with a
mechanical stretch making the garment easily recycled.
</p>
</div>
</div>
<div className="col-start-1 col-end-13 lg:col-start-8 xl:col-start-8 order-1 lg:order-2 xl:order-2">
<CreditsBlock creditSummary={creditSummary} />
</div>
</div>
<CompaniesBlock companies={companies} />
</Container>
</>
);
}