IN THE BEGINNING
Many moons ago, developers were using vanilla HTML, CSS, and Javascript for static websites and hosting them on a server, making them accessible on the internet. If someone is to use a browser to make a request to the URL of the website, the browser(client) will send a request to the server and if the page is available on the server, it will send a response back to the client which will normally be in a form of HTML tags and it will be interpreted into a web page on the browser(client).
So let's get it straight, request from a client to a server and if the file is available, the server sends a response which is rendered on the browser(client) as a webpage.
This approach was mainly for publishing static content. Over time, the need for dynamic content became essential. Technologies such as PHP and ASP.NET become popular with their ability to support the injection of dynamic data into webpages such as usernames, dates and times, profile pictures, and so on. This set the tone for server-side rendering which involved the retrieval of data, mainly from databases as part of the processing the server does before returning the response to the client. This paradigm is clearly depicted by the 3-tier architecture of the web.
Then NodeJS Arrived
NodeJs is a run-time environment for Javascript which allows you to write Javascript code and run it without using a browser. This technology also allowed web developers to build their own API web servers for handling HTTP requests such as GET, POST, DELETE, etc, and also make their own 404 pages. The need for putting your public(HTML, CSS, Javascript) files on another server for them to handle your request wasn't needed.
NextJs also arrived
NextJS is a JavaScript framework that is built on top of React and is designed to make it easy to create server-side rendered web applications. It provides a number of features and tools that make it easier to develop and deploy SSR applications, including automatic code splitting (Code splitting is a technique in which a large codebase is divided into smaller, more manageable chunks or bundles), optimized performance, and serverless deployment options. Using NextJS allows developers to create universal applications that can be rendered on both the server and the client, making it easier to build and maintain web applications.
SSG
SSG stands for Static Site Generation. As technology continued to advance, NextJS also arrived, this technology supports static site Generation. What this means is that whenever you create a static website with nextJS and you host it, when a client makes a request to the URL of the website, NextJS is going to generate the public files(HTML, CSS, JAVASCRIPT) which will then be sent to the client for rendering. Unlike how it was done in the beginning, this time you won't write the public files yourself, you will write in NextJS (NB: NextJs is not a language. This is just an expression) and it will be compiled into public files and rendered by the client.
SSR
SSR stands for Server Side Rendering. Server Side Rendering is a technique used in web development to render dynamic content on a website. With SSR, the server generates the HTML for a web page and sends it to the client's web browser, which then displays the page to the user. This is in contrast to traditional client-side rendering, where the web browser downloads the Public files and other assets needed to render the page, and then generates the HTML on the client side. Let’s get this straight with server side rendering
When the request is made to the server it then generates an HTML for the requested content and sends it as a response to the client. This makes it very fast and also allows the use of dynamic content such as user names for different people easy to render on a website. NextJs also supports server side generation.
Top comments (0)