Client-side v/s server-side routing
In our previous sections, we styled our links and added routings. Before we dive into editing posts, there is one important thing we want to highlight. We have routes in our angular app defined in the app routing module.
But, we also have routes on the backend in the app.js file and these routes are not connected. They are running on different servers, so our backend runs on localhost:3000 because that is the port we defined, and they do a different thing.
An angular router is a tool that is able to parse the URL of our app and then render different things onto the screen through javascript. It does not load different html pages. We only have one html page, and, i.e., the index.html page, but it is re-rendering the content on that page for the different URLs we are visiting.
Angular, in which a client-side application only knows the routes in the angular router. When we later deploy this application, the server knows these routes, neither our backend nor any server that might serve our angular app. We will show you which implication this has and how we make the server aware of this later when we deploy this.
If we were to host our angular app on the same server as our node app, there would be a couple of things to keep in mind which we will see, but one important thing is that we must not use routes we defined in angular like this /create route, in our backend too because what would happen then is that the server would parse and understand them because we defined them there in the app.post(). It would not parse the page onto angular to also have a look at that. Instead, it would do what it does, and this is probably not that it returns the index.html file. So, this is very abstract, we will come back to this when we deploy our app, but it is important to understand the difference between client-side routing, which is all about reading the URL and re-rendering parts of the page and server-side routing, which is all about heading incoming requests and sending back something different.
Example:
In the server-side routing, when we exchange data, we send requests and responses, and in the client-side case, we are not doing that. We are reading the URL, and we are re-rendering the page.