| Server Side Rendered | Client Rendered | Hybrid Rendered |
|---|---|---|
| 0 |
(This demonstrates rendering techniques, continue reading to learn more!)
The web, or the internet, is a bunch of computers that continuously send out information. This could be information about the weather, your bank account, or twitter. Behind each one is a computer that runs a program to send that information to you. These computers are called servers, while you (or your browser specifically) is the client.
So from a high level we can think we typically have two ‘realms’, the servers which is often referenced as the backend. And the clients which is often referenced as the frontend.
The realm in which everyone is already familiar with is the frontend or the client. This is Safari, Google Chrome, Microsoft Edge, Firefox, etc… When you go to google.com, howsit.dev, or any other website, you are the client. This can be from a computer, a phone, a tablet, or many other forms of devices. If you think about it, the page you recieve from google and How’s It is completely different. Underneath, they are both just made out of three programming languages; HTML, CSS, and JavaScript. We’ll go over these in more detail later, but for now you can closly associate what the client sees/does (the text on the screen, the color of the background, the buttons you can click) with HTML, CSS, and JavaScript.
The realm that’s foriegn, even to many developers, is the backend or the server. Somehow google.com sends you over your search results for your client to display them. It’s not like everyone’s computer knows about these search results, they are always retrieved from the servers. Even when the page is initially loaded, the code that makes up that page was sent by a server. You can think a server’s main job is to send either code or data to the client. It will send code such that it will display on the client’s screen or it will send data that the client can read and create it’s own code from.
Some developers choose frontend, backend, or “full-stack” (both). This can help narrow down what they need to learn to kick the ground running (but eventually it’s ideal to understand both in great detail). If you like dealing with visual elements more, you can search up tutorials in Vanilla JS (more on learning paths in a future article). If you like dealing with what is traditionally more ‘programming’ you can search up tutorials in Node.js (Express.js as well). You can jump in to both, but it may blur the lines between the client and server in the beginning; that being said a lot of developers, including myself, jumped in to both first.
At the top of the article, there is a table that demonstrates the three rendering techniques in a simple number interval example. You’ll notice: SSR doesn’t update (it doesn’t run code on the ‘client’ or browser), CSR flashes when you reload the page but then works as expected. Hybrid rendering doesn’t flash and works as intended, the best of both worlds.
Edit me on GitHub