Basic Differences Between SSR and SSG

#ssr #ssg #nextjs #react

In the modern web development world, performance and user experience are everything. While developers pursue optimization of the apps, it is very important to know about variety in rendering techniques In this post, we are going to discuss the Next.js framework and its features like Server-Side Rendering (SSR) & Static Site Generation (SSG).. We will look at what this other is, why they are good, and when to use each of them.

What is Server-Side Rendering (SSR)?

Server Side Rendering (SSR) is a technique to render HTML of the page from Server on each request A user requests a page, the server gets some information to place in that page and creates HTML which is then sent over to the client's browser. The browser actually renders the HTML and then shows this fully rendered page to user.

How Server Side Rendering (SSR) Works

Request: A user makes a request to the server.
Data Fetching: The server fetches the necessary data to render the page.
HTML Generation: The server generates the HTML using the fetched data.
Response: The server sends the generated HTML to the client's browser.
Rendering: The browser renders the HTML and displays the page to the user

Advantages of Server Side Rendering:

SEO-Friendly: Since the HTML is generated on the server and sent to the client, search engines can easily crawl and index the content, improving SEO.
Faster Initial Load: Users receive a fully rendered page on their first request, leading to faster initial load times.
Dynamic Content: Ideal for pages that require real-time data fetching or frequently updated content.

What is Static Site Generation (SSG)?

In static site generation, HTML pages are generated at build time. In Static Site Generation HTML is generated just once and server pre-renders HTML pages to users.

How SSG Works

Build Time: During the build process, the server fetches the necessary data and generates static HTML pages.
Request: A user makes a request to the server.
Response: The server serves the pre-rendered static HTML page to the client's browser.
Rendering: The browser renders the HTML and displays the page to the user.

Benefits of SSG

Blazing Fast Load Times: Since the HTML is pre-rendered and served as static files, SSG pages load extremely quickly.
Scalability: Serving static files is a turbo process and can handle high traffic with ease.
Improved Security: With no server-side code execution on each request, there are fewer attack vectors, improving security.
When to Use SSR
Dynamic Content: Use SSR for pages that require real-time data fetching or frequently updated content. For examples news websites, e-commerce platforms with constantly changing inventory, and user dashboards.
SEO Optimization: When SEO is a priority, SSR ensures that search engines can crawl and index the content effectively.
Personalized Content: Pages that deliver personalized content based on user data or preferences benefit from SSR, as the server can tailor the HTML to each user.
When to Use SSG
Static Content: Use SSG for pages with static or rarely changing content. Blogs, documentation sites, marketing pages, and portfolios are great examples for SSG.
Performance-Critical Applications: For applications where performance is crucial, SSG's pre-rendered pages offer blazing fast load times. So use it when you need turbo performance.
Cost Efficiency: Serving static files is cost-effective, making SSG an excellent choice for projects with budget constraints.

Combining SSR and SSG in Next.js

But Hang on, wouldn't it be great if we use both? One of the standout features of Next.js is its ability to seamlessly combine SSR and SSG within the same application. You can choose the rendering method that best suits each page's requirements, optimizing performance and user experience across your entire site. In short you can decide which page should render with SSG and which should render with SSR. Blessings of Nextjs not even stop here. You can even chose even which component on the page should render with SSR and which should render on SSG.

To combine SSR and SSG, we just need to add use client for rendering a page on client-side. By default all Nextjs components render on server. Below I will be creating an admin dashboard page, one component of the page render on client-side [SSG] and one will render on server0side [SSR].
This is a sever component by default:

// app/page.tsx

import AdminStats from '/components/admin-stats';
import AdminProductsCount from '/components/admin-products0count'

export default function AdminDashboard (){

return (
  <main className="flex flex-col gap-2">
     <AdminStats/>
     <AdminProductCount/>
   </main>
 );
}

Admin Stats goes here:

export default async function AdminStats(){
  const stats = await fetch('/https://api.example.com/stats');
  return (
      <div>
          <p>{admin.total_views}</p>
          <p>{admin.total_sales}</p>
       </div>
   );
}

And admin products count. We just add use client directive and the component become a client component

'use client'
import { useState } from 'react';

export default function AdminProductCounts(){
  const [products,setProducts] = useState<number | null>(null)
  return (
      <div>
         {products ? <p>{products}<p>:<p>You don't have any products yet</p>
       </div>
   ) 
}

What I prefer?

My personal preference is rendering components on the server side (SSR) for several important reasons. First of all, SSR improves SEO by providing fully rendered HTML to search engines, ensuring better indexing and visibility. Secondly, it enhances the initial load time, as users receive a pre-rendered page directly from the server, leading to a smoother and faster user experience. Thirdly, SSR allows for better management of dynamic content, ensuring that users always see the most up-to-date information without requiring additional client-side processing. Finally, it improves security by minimizing the exposure of sensitive logic and data to the client-side, reducing potential attack vectors.

Conclusion

Understanding when to use SSR and SSG is much important for building turbo-performance, scalable React or Next applications. SSR excels in scenarios requiring dynamic content, real-time data, and SEO optimization, while SSG shines in performance-critical applications with static or rarely changing content. By leveraging Next.js's flexibility to combine SSR and SSG, you can optimize your application's performance and user experience, delivering the best of both worlds.

Give SSR and SSG a try in your next project and experience the benefits of efficient and flexible rendering methods!

Top comments (7)

Xaviour • Jun 29 • Edited

Good work Sir, do we need to add async before every server component? As you did in Admin Stats Component?

Sheraz Manzoor • Jun 29

Thanks. Not at all, I have clearly mentioned, that all components in Nextjs are server components by default, Using async for Admin Stats component was because we were using await keyword for fetching data from API. We cn only use await inside an async function.