Next.js Discord

Discord Forum

revalidate and no cache does not work?

Answered
Waterman posted this in #help-forum
Open in Discord
Avatar
WatermanOP
Hello, I want a way of displaying my products that are being fetched from my database, the problem though is that they are not being displayed live when i update the database details, for example if I make a new product, it does not show the new product once I have rebuilt the whole app, even though I have:
    cache: "no-cache",
    next: { revalidate: 30 },


I will paste the code below:
code..........

  const products = await fetch(`${process.env.HOST}/api/products`, {
    cache: "no-cache",
    next: { revalidate: 30 },
  }).then((res) => res.json());

  if (!products) {
    return (
      <div className="text-white w-full flex justify-center py-64 items-center">
        <div>Laddar dina fantastiska tavlor</div>
      </div>
    );
  }

  return (
    <div className="w-full bg-[#111111] border-dotted border-[rgba(255,255,255,0.1)]">
      <div className=" xl:border-x border-dashed border-[rgba(255,255,255,0.1)] p-4">
        <div className="flex md:flex-row flex-wrap py-10">
          {products.map((item: ProductProps["product"], index: number) => (
            <Product product={item} index={index} key={index} />
          ))}
        </div>
      </div>
    </div>
  );
}
Answered by Waterman
so i just got it to work, the way I did it was: setting a cookie, and deleting it, which for some reason forces it to revalidate, I am going to send my code here in my api route and I think it was the cookie thing I added to make it work: 
import { NextRequest, NextResponse } from "next/server";
import { mongooseConnect } from "../../lib/mongoose";
import { Produkt } from "../../../models/products";
import { revalidatePath } from "next/cache";
import { cookies } from "next/headers";

export const GET = async (req: NextRequest, res: Response) => {
  cookies().set({
    name: "name",
    value: "trigger",
    httpOnly: true,
    path: "/",
  });
  await mongooseConnect();


  const path = "/butik";

  revalidatePath(path);

  cookies().delete("name");

  return NextResponse.json(await Produkt.find());
};
View full answer

8 Replies

Avatar
WatermanOP
the website is leflyx.se/butik
where the products is supposed to be updated live, and note that the page I am showing above is not marked with 'use client'
Avatar
European sprat
You might be able to make it work using revalidatePath to force a refresh of the page that lists the products
But also see here https://github.com/vercel/next.js/issues/42991
Avatar
joulev
probably this is due to the [Router Cache](https://nextjs.org/docs/app/building-your-application/caching#router-cache)
Avatar
WatermanOP
I tried revalidatePath in my /api/products, the path I tried to revalidate using revalidatePath was: "/", "/butik", "api/products". Butik is where my products are being shown and the api/products is where the products are being loaded. but I can't get this to work either way, is there anything else I can try?

I just don't really understand alll the docs and they confuse me a little bit of what I should use so I would really appreciate some more example you think can work.

here is the code I used when using revalidatePath in my /api/products:
import { NextRequest, NextResponse } from 'next/server';
import { mongooseConnect } from '../../lib/mongoose';
import { Produkt } from '../../../models/products';
import { revalidatePath } from 'next/cache';

export const GET = async (req: NextRequest, res: Response) => {
  await mongooseConnect();

  const path = '/';

  revalidatePath(path);

  return NextResponse.json(await Produkt.find());
};
Avatar
WatermanOP
so i just got it to work, the way I did it was: setting a cookie, and deleting it, which for some reason forces it to revalidate, I am going to send my code here in my api route and I think it was the cookie thing I added to make it work: 
import { NextRequest, NextResponse } from "next/server";
import { mongooseConnect } from "../../lib/mongoose";
import { Produkt } from "../../../models/products";
import { revalidatePath } from "next/cache";
import { cookies } from "next/headers";

export const GET = async (req: NextRequest, res: Response) => {
  cookies().set({
    name: "name",
    value: "trigger",
    httpOnly: true,
    path: "/",
  });
  await mongooseConnect();


  const path = "/butik";

  revalidatePath(path);

  cookies().delete("name");

  return NextResponse.json(await Produkt.find());
};
Answer
Avatar
WatermanOP
and the parts of the page file:
//code...
  const products = await fetch(`${process.env.HOST}/api/products`, {
    cache: 'no-store',
  }).then((res) => res.json()); 

//code...

//at the end of the file:

export const dynamic = 'force-dynamic';
export const revalidate = 0;

//^^^^^I don't think that matter though