TL;DR
The data added after building the project is not shown anywhere. It is in the DB but not showing on the site.
So I made a site for meetups while using firebase as a DB. Everything is working correctly in the dev mode. Even when I build my project and export it using next build && next export and then run it using next start, it works completely fine. But when I run the firebase deploy --only hosting command, all the new data that I added while running the project locally isn't there. It is present in the DB though.
What I want to ask is that does firebase not support SSG ??
I did some research and found that the deployment on Vercel is running perfectly.
Below is my code for the index.js file
function HomePage(props) {
console.log("Number of meetups: " + props.meetups.length);
return (
<Fragment>
<Head>
<title>Next Js Meetups</title>
<meta name="Description" content="Browse a huge list of Meetups" />
</Head>
<MeetupList meetups={props.meetups}></MeetupList>
</Fragment>
);
}
export async function getStaticProps() {
// Fetch data from API
console.log("Getting data in getStaticProps");
var list = await GetAllMeetups();
return {
props: {
meetups: list,
},
revalidate: 5,
};
}
export default HomePage;
Please let me know if I am missing something.
That is because getStaticProps fetches data only when you run next build && next export. It doesn't fetch each time the page is loaded, only during build time. The drawback of SSG is that once the data changes you have to rebuild and redeploy your project.
If you want it to update each time, use SSR & getServerSideProps, but you will not be able to deploy it on Firebase as it only supports SSG. For the deployment of a server side rendering Next.js app, I can personally recommend Netlify.