When visiting a 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.
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
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)
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.