DEV Community

Cover image for Basic Differences Between SSR and SSG

Basic Differences Between SSR and SSG

Sheraz Manzoor on June 29, 2024

In the modern web development world, performance and user experience are everything. While developers pursue optimization of the apps, it is very i...
Collapse
 
afaqjaved101 profile image
Afaq Javed

Great breakdown! 🙌 SSR, SSG, server components — Next.js really does give you the best of all worlds.

But here's the thing that always gets me — so many frontend developers (myself included at times) spend time reading about these powerful

features, yet our own portfolio sites are still sitting on WordPress or Drupal. 😅

That's honestly a crime when you think about it. 😂

Your portfolio is the one project where you have zero constraints. No client requirements, no legacy codebase, no "we've always done it this way."

Why not build it in Next.js and:

  • Use SSG for your static pages (about, services)
  • Use SSR for dynamic sections (latest projects, blog)
  • Mix server and client components exactly like you described

You'd learn all these concepts hands-on and ship something that literally demonstrates your skills to every recruiter who visits. Your portfolio
becomes proof of the article you just read. 💡

The best time to migrate off WordPress was last year. The second best time is your next weekend project. 🚀

Collapse
 
sheraz4194 profile image
Sheraz Manzoor

You have a point. But in my specific case, I build my portfolio with NEXTJS. check it out here sherazmanzoor.com

Collapse
 
afaqjaved101 profile image
Afaq Javed

Great site! Quick question — do you have to redeploy every single time you want to change something?

Thread Thread
 
sheraz4194 profile image
Sheraz Manzoor

It is kind of yes and no situation.

Yes everytime I make a change, it has to be redeployed.

But I don't have to do it manually. I just push the ocde into main branch, and Verxel automatically redeployed the site and it work this way. I don't have to redeploy manually every single time I make a change.

Thread Thread
 
afaqjaved101 profile image
Afaq Javed

Great but still i see a lot of friction ... Better to use a headless CMS... you will love and it ... and above all will save time.

Thread Thread
 
sheraz4194 profile image
Sheraz Manzoor

Will u elaborate with examples?

Collapse
 
xaviour_90 profile image
Xaviour • Edited

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

Collapse
 
sheraz4194 profile image
Sheraz Manzoor

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.

Collapse
 
pema_wangchuk_0517eaac7f7 profile image
Pema Wangchuk

Written well.

Collapse
 
sheraz4194 profile image
Sheraz Manzoor

Thanks for the compliment!

Collapse
 
mukesh_singhania_1992 profile image
Mukesh Singhania

"Rendering" and "Generation" 💀

Collapse
 
sheraz4194 profile image
Sheraz Manzoor

It makes a lot of sense, as in SSR HTML is rendered from server to browser, while in SSG the HTML is generated as Static HTML on client side.

Collapse
 
phuchoa2001 profile image
Đặng Phúc Hòa

Thank you for the helpful article

Collapse
 
sheraz4194 profile image
Sheraz Manzoor

I am glad you liked it buddy.