Introduction
SSR and SSG are two well-known terms in the field of Web Development, often confused by beginners, and debated about by the Pundits
You may or may not have already come across these two terms while trying to build some cool websites, maybe in articles, Next.js documentation, etc. But it remains a mystery among the newbies about "what in the actual world do they mean?"
So in this article, I'm going to explain these terms in the simplest way possible and make sure you get a good understanding of what they mean to the difference between them. Let's get started!
So SSR and SSG are basically two different types of approaches to rendering a page. Sounds pretty vague? Let me explain! But before we understand SSR and SSG, we need to understand two terms that I am going to use A lot in this article - Build Time and Render Time
Important Terminology: What is Build Time and Request Time?
If you ever deploy some app using Netlify or Vercel, you may know that when you make some changes in the code of your app, the platform builds the app for some time with the new code, which is known as the Build Time. In simple words, it is basically compiling and processing the final version of a website. The build time is crucial for tasks like compiling the code, optimizing the assets and generating static files which are to be provided to the clients.
On the other hand, request time refers to the time it takes (on a request by the client) for a server to receive, process, and respond to the request made by a client (such as a web browser). This includes the time taken for the server to handle the request, execute any necessary server-side logic, retrieve data from databases or other sources, and generate a response to send back to the client.
Static Site Generation (SSG)
SSR or Static Site Generation is basically generating the pages at the build time. So the content is already rendered and served as static files to the browser when requested. This is usually pretty fast and reduces the load times as well.
Understanding What's happening under the hood of SSG
Now, let us break the process into fragments and understand what happens in each part of the process!
What happens at the Build Time of SSGs?
The build time for the SSG sites are the most important because that's where most of the stuff happens. The files we provide are used to create the pages and they are loaded in the build server as static files, ready to be provided to the client. The output of this is generally stored in CDNs, which are a network of servers located in different parts of the world. They work together to deliver web content like images, pages and other media to the users quickly and efficiently.
What happens at the Request time of SSGs?
When the data is requested by the users, the SSG static sites are received from the CDNs where the data was uploaded and the static sites are provided to the user.
When to use SSG?
SSG can be used when:
- You have a fast and small site that is not very heavy
- Has some content which doesn't need to be updated before showing
- Cost-effectiveness is a factor, as it needs fewer server resources
Server-Side Rendering (SSR)
SSR or Server Side Rendering on the other hand refers to the generating of pages at request time. The content is dynamically rendered on each request.
Understanding What's happening under the hood of SSR
Now let's take a look at the under-the-hood operations of SSR too!
What's happening in the build time?
During SSR, build time involves the process of compiling and generating the server-side code that will be used to render the initial HTML content of a website or application. This includes tasks such as compiling server-side code, optimizing assets, and generating the necessary static files for rendering on the server.
What's happening in the request time?
For SSR, the request time is the most important, as the rendering happens at the request time. So when a client makes a request to the server for a specific web page, the server processes the request by executing server-side logic, retrieving data from databases or other sources, and generating the HTML content for the requested page. This process happens dynamically for each request.
When to use SSR?
SSR can be used when:
- SEO Optimization is needed
- Website is heavy
- Content may need to be updated on each load
- Security is a concern
Which one to choose ?
In terms of flexibility and dynamic content, SSR is better suited for websites with frequently changing content or personalized user experiences, as it can fetch data dynamically during the server-side rendering process. SSG, on the other hand, is more efficient for content-heavy websites with less dynamic content, as it pre-generates pages and can be deployed as static files to content delivery networks for fast global delivery.
Conclusion
Ultimately, the choice between SSR and SSG depends on the specific requirements of your web project. SSR is ideal for dynamic websites that require real-time data updates and interactivity, while SSG is a great choice for content-focused websites that prioritize speed and simplicity.
Hope you learnt something from this article! If you liked the article, please show some support by dropping a like, or maybe sharing it out to other geeks! Feedbacks are appreciated!! Thanks for reading!
Top comments (0)