Where do I load my ServerData in NextJS
Answered
Danna posted this in #help-forum
DannaOP
I want to load some data from firebase.
In "normal" react I did this on page load with a useEffect:
How would I load something on first render in NextJS ?
In "normal" react I did this on page load with a useEffect:
useEffect(() => {
FirestoreService.getAllBlogs().then(blogPosts => {
setData(blogPosts.docs);
//console.log(blogPosts.docs[0]._document.data.value.mapValue.fields.blogTitle.stringValue);
});
}, []);How would I load something on first render in NextJS ?
Answered by Rafael Almeida
if you want this data to be available during SSR you need to use either
getStaticProps or getServerSideProps if you are using the pages dir. if you are using the app dir you can directly fetch it in server components:async function Page() {
const posts = await FirestoreService.getAllBlogs()
return ...
}10 Replies
DannaOP
I found
is this what I should use for that?
getServerSidePropsis this what I should use for that?
if you want this data to be available during SSR you need to use either
getStaticProps or getServerSideProps if you are using the pages dir. if you are using the app dir you can directly fetch it in server components:async function Page() {
const posts = await FirestoreService.getAllBlogs()
return ...
}Answer
yeah it is one of the new features of server components, I recommend reading the introductory page in the docs that explains it all: https://nextjs.org/docs/getting-started/react-essentials
DannaOP
ah yeah, was just reading through that site.
i gues I should've finished reading first 🫡
i gues I should've finished reading first 🫡
attention span isn't that great after a 12 hour shift 🤦â€â™‚ï¸
