No, it's also about understanding how the web works and, to a certain extent what got us here.
There has been a real push in the last couple of years to bring back and rely on some older, core technologies of the web. We are hearing a lot of discussion of technologies that seem new but are really just a fantastic modern implementation of tried and tested approaches that have been around for a long time.
In this post we are going to explore static sites, server side rendered sites and single page applications and how they fit together in the coming years.
Browsing the web
When you type a url into your browser address bar you are saying “hey, whatever thing lives here …. I want it”
What is returned is a stream of data with some clues to tell your browser “what” it’s being sent so that it knows what to do with it.
Once that data is received your browser will show you it in the best way possible for that content type.
An HTML file will be rendered as a web page, a JSON object will be displayed as text and a directory of files will look like a file explorer.
You can see this yourself by opening a web browser and typing the path to a folder on your computer into the address bar.
This path on my machine shows me a list of all my developer projects as a folder tree ... but in my browser!
In the early days of the web it was just files on computers that other computers could look at. Your browser would request an HTML file in a specific directory on a remote computer, and that computer would serve that request. Hence the name server. It’s just a fancy word for “another computer that will listen to me and send me stuff”.
These files were just HTML text that your browser would render as a webpage. If the owner of the files wanted to change anything they would need to edit the relevant HTML file and save it.
Hence the name static, if the file never changed, then you would get the same content every time. This was a Static Site. There are now tools to help us generate all these files in a more manageable way and the concept is called Static Site Generation …. But I’m jumping ahead.
Server Side Rendering (SSR)
The problem with static sites is that content can’t be customised in anyway to the user and all content needs to be in a file. Well a server is just a computer, so we realised that rather than sending a request for an HTML file, we could instead send a request to program/application that creates HTML on the fly and sends it back to your browser.
Suddenly the web could be a whole lot more dynamic as we were rendering our HTML on the server on a per request basis and sending it back to the client AS IF they had just requested a static web page.
This was the start of the modern web, but we needed one more thing to really bring on the Web2.0 revolution.
Initially it was clunky and limited BUT finally web pages could function like desktop apps … The age of the web app was born.
JQuery was the core framework/library to do all of this back in the day.
Single Page Application (SPA)
“BUT Simon!” I hear you say, “the address bar changes so I must be on a new page”
Bringing it home
So that’s the history of the web, where does this leave us now?
Well static sites are incredibly fast, but they have limited interaction and updating the content can be a pain. There is also no concept of “logged in” with a static site, the content is freely available to the whole internet.
Server side rendered apps solve the dynamic problem holding static sites back AND they can have the concept of user accounts and not making everything public, BUT they can be clunky to navigate around and page loads are a pain.
What is to be done?
- They can combine aspects of Static Site Generation (SSG) for the parts of your site that are public and need to be FAST.
- They offer Server Side Rendering (SSR) for initial page loads that require data from a database or from another service.
- They the then drive the browser side interactions and data fetching with the Single Page Application (SPA) technology of React to make sure it feels modern and interactive like people have come to expect.
So if you’re still learning then stay the path on those.
Don’t worry if you didn’t understand all of the above, this is a very high level (which is a fancy way of saying vague 🤣) explanation aimed at raising your awareness so that when you hear these terms you understand how they fit into the bigger web development picture.
90% of being a good web developer is knowing something exists so you can deep dive on it when you need to.
Part 1 is on YouTube 😀