Quisquam est qui dolorem ipsum

What is the current environment?

There are currently a large number of web frameworks and libraries. Many developers are sometimes unaware of the differences or do not know how to choose the most suitable one to use. Next, it is explained which is the most suitable for the project that you want to carry out.

So at first they look the same but the way to differentiate them is not in what it produces but in how it produces it in the frameworks would be their rendering methods. This is how files are processed before creating pages.

So let's differentiate between server side rendering or template rendering and client side rendering frameworks.

An example below, it is assumed that as freelance developers someone is paying to create a virtual store in order to achieve this first let's see one of the first options, server Side rendering, server side rendering means in practice that every time a user visits a URL a server application responds with an html page in the example of E Commerce and when a user requests the product page or the page of a product, the server will generate a page from scratch, that is, the server is generating multiple pages on each URL visited.

This is why the applications using this approach are also called multi-page applications or multi-page applications, among some frameworks that fall into this category we could find asp.net, laravel, django and ruby ​​on rails and to create the html interface these frameworks use libraries called template engines or template engines that make it possible to use extra logic such as conditionals, loops and functions in the html code. But in the end the frameworks will convert them to html before sending them to the client for example:

Jinja 2 is used in Django.
In Laravel Blade is used
In Ruby, Erb is used.
Although any backend framework can use multiple templating engines, for example Go uses Go templates and Node JS can use any template engine like Handlebars for example.

As templates are used, the term template rendering related to this is also popular. This approach has advantages in terms of SEO, since as the html is generated the browser can read the content and know what it is about, making it easy to rank in search engines. They are more secure, since all the logic is in the backend.

The user only sees the final result on the frontend.

It is easy to integrate with databases and tools that require the operating system as they are already on a server and are easy to deploy as the entire application is in the same project, but as a disadvantage we have that the user experience is slower when generating a page on every change of the url thing they try to solve using Ajax and javascript frontend libraries like alpine.js htmx or even Jquery. It is vital to learn a server language to be able to create them and in complex applications the rendering time makes loading on the frontend slower. Although it can be solved in part, with caching techniques, not everything can be solved in this way since data that is constantly changing dynamically is needed. With these frameworks you can create the entire virtual store and it is convenient to start developing, but if the project requires improving the user interface with more interactivity and functionality, using this approach is more complicated by always taking into account that the logic it must be run from the server. This rendering method was one of the first ways to create web applications and to this day it is still used mainly in PHP based CMS like wordpress, Adobe, E Commerce, drupal, Joomla or using Frameworks that have been mentioned before. You can create a project from scratch and it is based on multi page application, however if you create a complex interface it is best to use a client-side framework and leave the backend only the task of communicating with the database. This is where the other technique that would be client Side Rendering comes in since 2009 with the improvement of javascript engines in the browser, the performance of javascript applications improves a lot, javascript frameworks and libraries appear that allow the creation of larger applications between these were Angulars.js, React.js., ember, Blackbone.js. Since then more frameworks have come and gone. Currently the most popular are Angular, React, Vue and Svelte. The goal of these frameworks is for the interface to be fully generated on the frontend and for the backend to just send the data in a Json format so that the backend no longer has to be sending html files on every URL change. This works like this;

When a user visits the product URL, the first thing the server does is send him a javascript file and this generates the entire interface in the browser, then from here the interface makes requests to the backend with the data it requires. The backend responds with the data in Json format and the interface makes use of this data and updates the page, without changing it.

In other words, the entire project is a single page and the rest is simply that data update. This is why the pages created with this approach are called single page applications or single page applications. The advantage of this approach is that the user's interaction with the interface is much faster. The user experience is faster because the data is easier to send and you only need to make requests to the backend so that the interfaces change without the need to request html pages from the server. It's also easy to optimize queries on the backend since you only have to respond to Json data without any html. More complex applications can be created, if it is a separate entire frontend project. The disadvantage is that, it is more difficult to improve the seo, as the whole interface is generated from the frontend when it loads a page in the browser, it is not an html file and it does not know the content that is inside, which means that it is more difficult for search engines to appear. The development is also divided into two projects that must be maintained backend and frontend. Each one can have different sets of tools and if you have notions of languages ​​like Python, PHP, Ruby, C Sharp and Java now you also have to have notions of Javascript to be able to create the interface on the frontend. On deployment means that you get two options to be able to deploy the projects. They can be deployed together or you can deploy them separately. You can still use the framework mentioned above, only now it is used to communicate with the database, and simply send data to the client. These types of backend applications are called Rest Api. The applications that use this approach are basically the social networks and tools that you use daily on the web like Facebook, Instagram, tiktok, YouTube and many more. There are frontend developers who have only studied frontend frameworks and complement the backend, with services like Firebase, Aws Amplify, or Supabase that allow you to create the backend. They charge monthly for their use.

Many years ago MPAs were happening a lot to create web applications together with libraries like Jquery. Currently this approach is not as popular anymore, due to the constant improvements of web environments. But in a work environment they might use conjoined MPAs, which use this approach. Although if you want to have the best of both worlds, there is also a term, which is called Server Side Rendering but used in the frontend. This is related to the first load of the application, that is, if a Javascript is sent to the frontend, it will not only generate the interface, but it also brings an html file already prepared and this is used so that search engines can see the content. initially.