Search code examples
node.jsexpressweb-deploymentfetch-apirest

Fetch API and Node Js

In general we give 2-3 types of responses while making a website .

  1. Changing the content of the same page from where request has originated

  2. Redirecting to another page/view

  3. Redirecting to another page/view with some content coming from the database sitting behind

I have confusion over when to use fetch api to render the content coming from backend end rest api and when to use expess by using template system while using res.render() . Are these both alternative to each other , or something which i am terribly failing to understand ?

Thank you in advance .

Solution

  • A given http request needs to have a specific purpose. There are many different things you might want to do with any particular http request. What kind of response the server should send depends entirely upon the purpose for that http request.

    Here are a number of examples that illustrate different purposes:

    1. A browser may just want the HTML content associated with a given resource/URL. For that it sends a GET to the server and the server sends back a response that represents an HTML page. An example of that type of http request is the URL for this question: https://stackoverflow.com/questions/67527190/fetch-api-and-node-js. That returns an HTML page that the browser can then render (and run any Javascript in it). Within Express, you can use res.render(), res.sendFile(), or res.send() or even res.write() to send HTML data back to a browser. Which you use depends upon what the source of the data is and which best fits. res.render() would typically be used in conjunction with a template system (like EJS, nunjucks, Jade, Mustache, etc...). res.sendFile() sends an already build static file. res.send() sends a string from your Javascript (that you perhaps dynamically created).

    2. A web page that is displayed in a browser may wish to request some data from your server. In that case, the Javascript in the web page would again send a GET request to the server with the URL corresponding to the data it wants. The server would then send back a JSON response and the Javascript in the web page would receive that JSON and decide what to do with it (like perhaps dynamically adding content to the page). To send a JSON response back to the client when using Express, you can use either res.send(someObj) or res.json(someObj). If someObj is a Javascript object, both will do the same thing.

    3. A form may be posted from a web page by the browser. This is done when the user hits a submit button in a <form> and the browser collects the values from the fields in the form and sends them to the link in the action attribute of the <form> tag typically as a POST method. The server will then receive that data, process it as expected and send a response. The browser will render the response as a new web page. Sometimes, what the server wants to happen is for the form to post and then for the browser to switch to a new URL. To do this, the server responses with a 3xx status code (commonly 302) and sets the Location header in the response to a new URL. In this case, the browser sees the 302 response status, grabs the Location header and then requests that new URL from the server. The server gets that new URL request, provides the content back to the browser (usually an HTML page in this case) and the browser then renders that new page. If your server wishes to tell the client to go to a new http URL, then it can use something like res.redirect(302, newURL). This is all just a shortcut that automatically sets the http status of the response to 302 and sets the Location header in the response to the URL you pass.

    So, these are just real-world examples of how different http requests and responses can be used. When to do which one depends entirely upon the purpose and circumstances of any given http request and that is entirely up to your application design.

    Please explain what are the methods to send these type of responses using Node, Express, Fetch API.

    It's not clear what you mean by this. The fetch() API is a browser API that can be used to send http requests to any target server from web page Javascript and then receive the response back to that Javascript.

    Express is a means of building a web server and defining the URLs/http methods that you wish for it to receive and process.

    Node is the development environment that Express runs in.