Next.js Discord

Discord Forum

Deployed app not updating on frontend

Answered
Rhinelander posted this in #help-forum
Open in Discord
RhinelanderOP
I created an app that fetches data from Microsoft Azure the app is working well on my local machine, but the deployed version is not updating on the frontend. I need suggestion on my deployment
Answered by Ray
try put export const dynamic = 'force-dynamic' here
the GET endpoint is static by default
View full answer

35 Replies

RhinelanderOP
yes on the frontend only. but the backend is updating.
Ray
sound like your pages are static generated
try making the page dynamic by adding this to the page.tsx
export const dynamic = 'force-dynamic'
RhinelanderOP
here is the page im expecting to be updated import Images from '../../components/Images';
import './globals.css';

export default function Home() {
return (
<main className="mx-0">
<Images />
</main>
);
}
and here is the image component import Images from '../../components/Images';
import './globals.css';

export default function Home() {
return (
<main className="mx-0">
<Images />
</main>
);
}
RhinelanderOP
yes i did import Images from '../../components/Images';
import './globals.css';

export const dynamic = 'force-dynamic';

export default function Home() {
return (
<main className="mx-0">
<Images />
</main>
);
}
or should i add it on my layout file ?
@Rhinelander or should i add it on my layout file ?
Ray
yes you could do that if you want all page to be dynamic
RhinelanderOP
ok
RhinelanderOP
i tried it, but it did not work import type { Metadata } from 'next';
import './globals.css';
import Header from '../../components/Header';
import PromptInput from '../../components/PromptInput';
import ClientProvider from '../../components/ClientProvider';

export const metadata: Metadata = {
title: 'Ifoto',
description: 'Ifoto-AI Generated Image App',
};

export const dynamic = 'force-dynamic';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<ClientProvider>
<Header />
<PromptInput />
{children}
</ClientProvider>
</body>
</html>
);
}
Ray
how do you fetch the data from azure?
RhinelanderOP
yes Microsoft Azure
@Rhinelander yes Microsoft Azure
Ray
how do you fetch the data in the component?
RhinelanderOP
this is recieve images const { app } = require("@azure/functions");

const {
BlobServiceClient,
StorageSharedKeyCredential,
} = require("@azure/storage-blob");

const generateSASToken = require("../../lib/generateSASToken");
const { request } = require("https");

const accountName = process.env.accountName;
const accountKey = process.env.accountKey;

const containerName = "images";

const sharedKeyCredential = new StorageSharedKeyCredential(
accountName,
accountKey
);

const blobServiceClient = new BlobServiceClient(
https://${accountName}.blob.core.windows.net,
sharedKeyCredential
);

app.https("getImages", {
methods: ['GET'],
authLevel: 'anonymous',
handler: async (request, context) => {
const containerClient = blobServiceClient.getContainerClient(containerName);

const imageUrls = [];
const sasToken = await generateSASToken();

for await (const blob of containerClient.listBlobsFlat()) {
const imageUrl = ${blob.name}?${sasToken};
const url =https://${accountName}.blob.core.windows.net/images/${imageUrl};
imageUrls.push({ url, name: blob.name });
}

const sortedImageurls = imageUrls.sort((a, b) => {
const aName = a.name.split("").pop().toString().split(".").shift();
const bName = b.name.split("").pop().toString().split(".").shift();
return bName - aName;

});

context.log(Http function processed request for url "${request.url}");

return {
jsonBody: {
imageUrls: sortedImageurls,
}
}
},
})
the endpoint const fetchImages = () =>
fetch("/api/getImages", {
cache: 'no-store'
}).then(res => res.json())

export default fetchImages;
RhinelanderOP
export async function GET(request: Request) {
const response = await fetch('https://ai-image-generator-ifoto.azurewebsites.net/api/getimages', {
cache: 'no-cache'
})

const blob = await response.blob();
const textData = await blob.text();

const data = JSON.parse(textData);

return new Response(JSON.stringify(data), {
status: 200,
});

}
Answer
goodsie
Ima watch. I have the same issue with imported content not showing update unless frontend is restarted.
I import like:
Import(File:// + path);
I to tried dynamic with no results.
Might be a matter of manual clear/destroy of imported obj after use.?
RhinelanderOP
perfect
@Rhinelander perfect
Ray
Look like you are doing client side fetching?
I think you can remove export const dynamic = 'force-dynamic'; from layout file
RhinelanderOP
it works, but my suggestion component is not working even after adding the same line of code export const dynamic = 'force-dynamic';

export async function GET(request: Request) {
//connect to microsoft azure function endpoint
const response = await fetch("https://ai-image-generator-ifoto.azurewebsites.net/api/getchatgptsuggestion", {
cache: 'no-store',
});
const textData = await response.text();

return new Response(JSON.stringify(textData.trim()), {
status: 200,
});
}
RhinelanderOP
i added it in a wrong place.
it has been fixed finally. Many thanks. i am greatful
Ray
cool
and try again
by default, the GET endpoint is static generated
RhinelanderOP
ok