Reputation: 414
I'm trying to understand how to make a partial update on a SSG page. Next JS is pre-rendering pages on demand if fallback
is true or blocking. Revalidate and revalidate on-demand (Next v12) functions provided to re-render the page. But I see examples loading subset of a page instead of full revalidate.
I guess price value would be a perfect example. Changing product price in DB would require immediate effect on entire website. Since it could be displayed on multiple pages / areas on the website, on-demand revalidation on a single path wouldn't work.
Only solution I could think leaving all locations where price is being displayed empty and fetching fresh data with useEffect
to update it. However I thought there might be more practical solutions, even a NextJS function to utilize.
Edit : This example is related to dynamic paths require getStaticPaths yet I believe updating certain sections is related to all SSG pages
Here is an example code :
import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import React from 'react';
import fs from 'fs/promises';
import path from 'path';
import { ParsedUrlQuery } from 'querystring';
import Link from 'next/link';
interface iProduct {
id: string;
title: string;
description: string;
price:string;
}
interface iProps {
singleProduct: iProduct;
}
const SingleProduct: NextPage<iProps> = (props) => {
const { singleProduct } = props;
return (
<div className="container mx-auto mt-10">
<h3>{singleProduct && singleProduct.title}</h3>
<p>{singleProduct && singleProduct.description}</p>
<p>{singleProduct && singleProduct.price}</p>
</div>
);
};
interface iPaths extends ParsedUrlQuery {
id: string;
}
export const getStaticProps: GetStaticProps = async (context) => {
const { id } = context.params as iPaths;
const filePath = path.join(process.cwd(), 'src/data/products_db.json');
const jsonData = await fs.readFile(filePath, 'utf-8');
const data = JSON.parse(jsonData);
const product = data.products.find((item: iProduct) => item.id === id);
if (!product) {
return {
props: {},
redirect: {
destination: '/products',
},
};
}
return {
props: {
singleProduct: product,
},
};
};
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [],
fallback: true,
};
};
export default SingleProduct;
Upvotes: 0
Views: 2667
Reputation: 160
Your page is either generated at build time (ie. once in a while) or every time user loads your site (SSR). You can control for each page but not for each component right now.
Indeed the first way of solving this is having a useEffect to fetch the price data.
Second way would be asking the site to rebuild certain static pages when you make changes.
This is provided trough Next.js On-demand revalidation.
Read more at: https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#using-on-demand-revalidation
Upvotes: 0