Data fetching must happen during build time.
Unanswered
nikkuv posted this in #help-forum
67 Replies
you are using app router with getStaticProps.
getStaticProps only can be used in page router (the pages folder)
getStaticProps only can be used in page router (the pages folder)
@Ray you are using app router with getStaticProps.
getStaticProps only can be used in page router (the pages folder)
nikkuvOP
Yeah, got to know this now....I also got to know that using normal fetch will work for fetching data at build time but the thing is I'm getting CORS while fetching the API. And I want to bypass that. How can I do this while using normal fetch.
I can fetch it without any problem
nikkuvOP
Are you using next js 13?
14 but I think 13 should work too
@nikkuv How can I do this? getting an error for `getStaticProps`
White-winged Scoter
@nikkuv Try
getInitalPropsOh wait your on the client
nvm that
nikkuvOP
This is really really weird, but the thing is I'm also getting api data when I commented out my whole code and tried just like you but whenever I'm trying to fetch inside useEffect it's giving me this
This is my code
@Ray
This is my code
"use client";
import { useState, useEffect } from "react";
// const getStores = async () => {
// try {
// const res = await fetch("https://aisthetic.co/api/codingchallenge/stores")
// const data = await res.json();
// return data;
// } catch (err) {
// console.log(err);
// return null;
// }
// };
export default function Home() {
const [stores, setStores] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch("https://aisthetic.co/api/codingchallenge/stores")
.then((res) => res.json())
.then((data) => console.log(JSON.stringify(data)));
}, []);
return (
<div>
<h1>Stores</h1>
{/* <ul>
{stores.map((store, index) => (
<li key={index}>{store.name}</li> // Assuming each store object has a name property.
))}
</ul> */}
</div>
);
}
// export default async function Home(){
// const data = await fetch('https://aisthetic.co/api/codingchallenge/stores').then(res => res.json());
// return <pre>{JSON.stringify(data, null, 2)}</pre>
// }@Ray
White-winged Scoter
You either have a syntax error/type error on whatever your fetching, or it's your network being goofy.
Most likely
api/codingchallenge/stores has a type errorWhat file recieves the request?
@nikkuv This is really really weird, but the thing is I'm also getting api data when I commented out my whole code and tried just like you but whenever I'm trying to fetch inside useEffect it's giving me this
This is my code
"use client";
import { useState, useEffect } from "react";
// const getStores = async () => {
// try {
// const res = await fetch("https://aisthetic.co/api/codingchallenge/stores")
// const data = await res.json();
// return data;
// } catch (err) {
// console.log(err);
// return null;
// }
// };
export default function Home() {
const [stores, setStores] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
fetch("https://aisthetic.co/api/codingchallenge/stores")
.then((res) => res.json())
.then((data) => console.log(JSON.stringify(data)));
}, []);
return (
<div>
<h1>Stores</h1>
{/* <ul>
{stores.map((store, index) => (
<li key={index}>{store.name}</li> // Assuming each store object has a name property.
))}
</ul> */}
</div>
);
}
// export default async function Home(){
// const data = await fetch('https://aisthetic.co/api/codingchallenge/stores').then(res => res.json());
// return <pre>{JSON.stringify(data, null, 2)}</pre>
// }
<@743561772069421169>
White-winged Scoter
try this:
for your fetch
for your fetch
await fetch("https://aisthetic.co/api/codingchallenge/stores")
.then(async (res) => {
var data = await res.json()
console.log(JSON.stringify(data))
})@nikkuv This is my file structure and I've created a page /stores
White-winged Scoter
Can you show me what page.js is?
@White-winged Scoter Can you show me what page.js is?
nikkuvOP
"use client";
import { useState, useEffect } from "react";
// const getStores = async () => {
// try {
// const res = await fetch("https://aisthetic.co/api/codingchallenge/stores")
// const data = await res.json();
// return data;
// } catch (err) {
// console.log(err);
// return null;
// }
// };
export default function Home() {
const [stores, setStores] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
fetch("https://aisthetic.co/api/codingchallenge/stores")
.then((res) => res.json())
.then((data) => console.log(JSON.stringify(data, null, 2)));
}, []);
return (
<div>
<h1>Stores</h1>
{/* <ul>
{stores.map((store, index) => (
<li key={index}>{store.name}</li> // Assuming each store object has a name property.
))}
</ul> */}
</div>
);
}
// export default async function Home(){
// const data = await fetch('https://aisthetic.co/api/codingchallenge/stores').then(res => res.json());
// return <pre>{JSON.stringify(data, null, 2)}</pre>
// }Pyramid ant
Any reason you don't want to use server components?
White-winged Scoter
Yea server comps would be an advantage.
Pyramid ant
you can do this completely on SSR sense you are not doing any use interaction
Pyramid ant
export default async function Home() {
const rtn = await fetch("https://aisthetic.co/api/codingchallenge/stores");
const store = rtn.json();
console.log(store);
return (
<div>
<h1>Stores</h1>
{/* <ul>
{stores.map((store, index) => (
<li key={index}>{store.name}</li> // Assuming each store object has a name property.
))}
</ul> */}
</div>
);
}well yeah, but you odn't need the useEffects
your still thinking in terms of client side render
using next, you can do SSR instead, fetch -> render on the server component and send that over.
Your pattern is an react pattern, using client side render, to fetch and update based on that fetch
using next SSR pattern, you can do an async function, do the fetch and the render on the fetch and send that to client.
@Pyramid ant well yeah, but you odn't need the useEffects
White-winged Scoter
He's right because you want this to pre render, so when it does load it doesn't lag.
Now it's not going to be feelable, but for certain clients it will be.
nikkuvOP
but if I'm not wrong I think the data fetching is happening on the server side right not during build time?
Pyramid ant
Not during build time because it is a fetch
@nikkuv but if I'm not wrong I think the data fetching is happening on the server side right not during build time?
White-winged Scoter
No fetch is client side in this case.
Pyramid ant
But, it is an dynamic build because of the fetch, so it occurs at request time.
White-winged Scoter
It's not rendered by the server on build.
@Pyramid ant But, it is an dynamic build because of the fetch, so it occurs at request time.
White-winged Scoter
ðŸ‘
@White-winged Scoter It's not rendered by the server on build.
nikkuvOP
so is it data fetching during build time? sorry I'm so confused and not getting this all.
Pyramid ant
It's okay!
You make an request, because you are fetching data, it cannot be static
because the fetching data can be dynamic, the route is rendered at request.
White-winged Scoter
You don't get build errors from a fetch because it doesn't run the fetch, it ignores promises.
Pyramid ant
You can have it so the Server will fetch the data, and render the HTML at request.
White-winged Scoter
But when your running it statically on the production/dev, then the fetch is ran.
Pyramid ant
and notice the async on the Home() function, because that is new.
Why do you need data fetching at build time?
nikkuvOP
it was on written on this challenge I'm doing
Pyramid ant
can you share the challenge?
nikkuvOP
that the data fetching must happen during build time.
@nikkuv that the data fetching must happen during build time.
White-winged Scoter
That's the challenge?
Pyramid ant
Because using pages you can do what you are wanting(i think) not app.
nikkuvOP
@Pyramid ant Because using pages you can do what you are wanting(i think) not app.
nikkuvOP
so should I use pages without app Router?
Pyramid ant
how old is this challenge?
nikkuvOP
Just got it this Friday
Pyramid ant
yeah, pages might be better fit for this, thinking...
"7. Data fetching must happen during build time. The stores page and single store page must be static generated. Please note - no data fetching should happen at run time." I would say just becausse of this use pages
SSR is controllable via method you requested at start.
nikkuvOP
okay, and I can use
getStaticProps for fetching data on build right?Pyramid ant
yes with pages
i think~
you at least do SSG
Pyramid ant
I know you got it friday, but when was this created? Because if it's older than a year then definatly go pages.
nikkuvOP
ok got it.
switching to pages!