Server structure

The server-side of web applications has change a lot in the past view years. In older approaches it worked like this:

• The user sends a request to the server.

• The server reads the request and looks up the necessary data from the database.

• The server places the data inside a template and returns it to the user.

It is an acceptable approach, but nowadays an application doesn't end when the user received it. They need to be interactive and responsive. This is where Single Page Applications come in. As the name suggests, it's a web application, which works with a single page. The server initially sends one HTML file, after that the client takes over and starts making requests to an API. This method has the following advantages:

• The whole application can be cached, which makes it fast. It only has to fetch new data, instead of the whole markup over and over again.
• It's responsive. Data can be pre-loaded, which means if a user clicks on something, it appears instantly.

With those positive things in mind, there are also bad parts:

• Initial load-times can be higher, since it needs to load the application first before it starts fetching the data.
• Since the initial page is more or less empty, search engines have a hard time indexing the content.
• Browsers which have JavaScript disabled won't be able to load the site.

But it doesn't have to be this way.

Server Side Rendering

Modern view-libraries like React (which will be covered later) and Vue.js are isomorphic. This means a Node web-server is able to read the client application and render its initial state. The user doesn't have to wait for the JavaScript to kick in, since the main page is loaded with the initial request. After the JavaScript is loaded, it takes over again and does all the heavy lifting.

There will be a section about a framework called Next.js, which makes building these kind of applications very easy.