I'm working on a web application built with react js in the front-end and express js in the back-end, i'm also using MongoDB as a database.
I was following this tutorial in which the YouTuber is using Axios in order to connect between the react js application and the express js API.
Right now i have two questions :
is Next JS used for these kind of things ? if not, what is Next js ? Should i use Axios like the tutorial ? or there is a better solution for this situation ? Thank you in advance.
Next Js is basically lets you build server-side rendering and static web applications using React.
You can use following way to connect to your Nodejs backed from react using axios
axios.post(url,data, {
headers: {
'authorization': your_token,
'Accept' : 'application/json',
'Content-Type': 'application/json'
}
})
.then(response => {
// return response;
})
.catch((error) => {
//return error;
});
Where your_token is authenticate token if you have any, url is the nodejs url you want to access and data is the body you supply to post data to your node server.
To fetch data you can use the awesome built in fetch or axios library:
fetch(/* url to your backend, eg. http://localhost:3000/mydata */
, /* notice comma */
/* other options, eg. method: ”post” */)
.then(response => res.json() /* convert server response from string to JSON */)
.then(data => /* your data array or object like */)
for details: MDN: fetch API
check your browser's console for cors issues 😟
Using create react app you are building a single page app (SPA) which is the standard, that whole app served as a JS bundle to your client browser and after that you fetch data only from server.
On the other hand Nextjs is a server side rendering which is the best of two worlds, it helps with higher page ranking on search engines, lift the heavy load from clients especially (low powered mobile devices) and more Check this if interesting nextjs
