What is Web Architecture?

Recall the description of request and response from week 1. When visiting a web application or site, the browser makes a request to the server and the server sends information back to the browser. There are three types of rendering that will be addressed: server-side rendering, prerendering, and client-side rendering.

Server-Side Rendering (SSR)

In SSR, we have the client (browser) and the server (computer). When a request is made to a site, the server builds the HTML with all the data it needs for that specific HTML document, including the HTML, CSS and sends it back to the client.

In SSR, there will typically be a server “folder”. As an example, within this folder there can be an app.js file, an index.ejs file, a pricing.ejs file, and a projects.ejs file. The ejs files are sample files that would compile down to HTML documents. This example can be seen below.

In the app.js file, app.get is being called. The “/” root corresponds to the / that follows https://webapp.io/. If there is a username, the app.js file would then find the index document and insert the username (in this example being joshua_dsouza). This would get built on the server and then get sent back to the client.

Imagine that there are a number of pages with Kanye and other celebrities that you would like to access on one site. In server-side rendering, when a request is made to get a certain page, the server would then build the components of the page on the server itself and send the final built page to the client. This would be the case with Jack Harlow, Drake, and Coachella articles.

Pros of server-side rendering include:

• SEO friendly, as the titles and descriptions of pages (for example, when searching on a search engine) can be specified
• Can interact with the content immediately

Cons of server-side rendering include:

• Slow requests, because every time a page is opened there is a request to a server
• Servers can be expensive
• Load time can be impacted if there are a lot of people accessing the server

Prerendering

In prerendering, the HTML of a page is already built by the server. On each request from the client, the page is sent.

As an example, in the image below there is a server “folder”. Within it, the contact-us.html, index.html, pricing.html, and projects.html are already pre-built HTML files with everything they need in it. Please note that items can still be loaded on the page after (I.e. a news feed) but the skeleton and descriptions for the page will already be there.

Much like the example before, imagine that we are looking to access the pages featuring Kanye and other celebrities. Now, when the client makes a request to the server, the HTML is already built.

Some of the pros of prerendering include:

• Better user experience for the first load, results can come faster instead of waiting for the server to build out the HTML
• Good for SEO because titles and descriptions can be specified in advance

Some of the cons of prerendering include:

• Needing to wait for any dynamic requests. For example, if you need to wait to get dynamic information for a news feed.

Client Side Rendering (CSR)

CSR is what a framework like React uses. In CSR, the client will make a request to the server. At this point, the server will send the entire application to the client, which includes all HTML, CSS, and JavaScript. On every new request, JavaScript changes the page in the browser. To the user, it looks like a new page is being requested each time you navigate to a new URL, but in reality the DOM and JavaScript is used to change the content of the page.

In the server “folder”, there would be one HTML file that sends all of the HTML, CSS, and JavaScript. On each request, JavaScript would then change the page in the browser.

Using the example mentioned above can help visualize how CSR works. If the client requests Kanye Coachella, the server sends the whole application to the client. On the next request (Kanye & Drake), the page is changed by JavaScript on the client side. On the last request (Kanye & Jack Harlow), the page is once again changed by JavaScript.

Pros of CSR include:

• Fast rendering after the first initial load, as the entire application is on the users browser
• Reuse HTML and CSS in a framework like React
• Good for sites that don’t care about SEO, for example, if a site is behind some kind of authentication

Cons of CSR include:

• Slow initial load
• Bad for SEO, as you send one index.html page to the browser. Although Google has started to account for this, this can still make it difficult for crawlers on your website.

React

React is a JavaScript library for building user apps. It is a CSR application but it is possible to do server-side rendering and prerendering although those topics are more advanced. It is component-based, something can be written once and reused several times. React can also hold state, for example, if a site is in Dark Mode or not, or to capture the values of various inputs.