DEV Community: MD Mohsanul Hoda

Rendering Methods in React: CSR vs SSR vs SSG vs ISR

MD Mohsanul Hoda — Sat, 14 Jun 2025 03:45:07 +0000

What is Rendering?

Rendering is the process of converting your React components (written in JSX) into real HTML and JavaScript that the browser can understand and display.
Browsers don’t understand React or JSX directly — they only understand plain HTML, CSS, and JavaScript. So before anything appears on the screen, React must transform (or "render") those components into code the browser can use.

🔄 Why Rendering Matters

Rendering determines:

When and where the HTML is created (on the client or the server)
How fast the content shows up to users
How well search engines (SEO) can read the page
User experience (e.g., loading spinners vs pre-filled content)

React (especially with frameworks like Next.js) provides multiple ways to render your application based on your needs:

CSR (Client-Side Rendering)
SSR (Server-Side Rendering)
SSG (Static Site Generation)
ISR (Incremental Static Regeneration)

Client-Side Rendering

Client-Side Rendering means the browser is responsible for building and displaying the web page. When someone visits your React app, the server sends back a nearly empty HTML file and a JavaScript bundle. The actual page content is built inside the browser, using JavaScript, not on the server.
In React apps, JavaScript uses something called the Virtual DOM to generate the user interface. Until this process finishes, users may briefly see a blank screen.

⚙️ What Happens Behind the Scenes?
Here's what goes on, step by step:

🌐 User visits a URL
📄 Server sends back a basic HTML shell
📦 Browser downloads the JavaScript bundle
🧠 React runs in the browser and builds the UI from the Virtual DOM
🔌 App fetches data from APIs if needed
🖱️ Page becomes interactive — users can now click, scroll, and navigate

🧠 When Should You Use CSR?
Use CSR when:

You’re building a highly interactive app (e.g., dashboards, single-page apps)
SEO isn’t a top priority
You want a lighter server load

👍 Benefits

✔ Lighter load on the server — the server just sends static files.
✔ Cheaper server costs — less computing needed per request.
✔ Smooth client-side experiences — ideal for highly interactive apps.

👎 Drawbacks

❌ Slower initial page load — users may wait for the JS to build the UI
❌ Not SEO-friendly — search engines may not see your content

Server-Side Rendering (SSR)

Server-Side Rendering means the server generates the complete HTML for the page on each request and sends it to the browser. This means users see a fully rendered page almost instantly — no blank screen while JavaScript loads.

In React apps (like those built with Next.js), React runs on the server, builds the page based on your components and data, and sends back the finished HTML. Once the page is loaded in the browser, React “hydrates” it — attaching event listeners and making it interactive.

⚙️ What Happens Behind the Scenes?

🌐 User visits a URL
💡 Server runs React code to generate the HTML content
📄 Server sends back a fully rendered HTML page
⚙️ Browser shows the content immediately
📦 Browser then downloads the JavaScript bundle
🔁 React hydrates the page to make it interactive (adds event handlers, etc.)
🔌 Any extra data fetching or updates happen as needed

🧠 When Should You Use SSR?

You want a fast initial page load
SEO is important — search engines can read the page content
You need fresh data every time the page is loaded (e.g., SEO-critical content, blogs, news)

👍 Benefits

✔ Faster first paint — users see content immediately
✔ Better SEO — search engines can index fully rendered content
✔ Useful for dynamic pages with content that changes frequently

👎 Drawbacks

❌ Heavier server load — the server must render HTML for every request
❌ Slightly longer time to become interactive (hydration happens after HTML is shown)
❌ More complex setup compared to CSR

Static Site Generation (SSG)

Static Site Generation means that your pages are built into HTML at build time, not on each request. When you deploy your site, the server generates all the necessary HTML in advance and stores it as static files. Then, whenever a user visits the site, they get the pre-built page instantly — no need to wait for the server to generate anything.

In React apps, this is commonly used with Next.js, where the HTML for each page is generated during the build process, and JavaScript adds interactivity once the page loads.

⚙️ What Happens Behind the Scenes?

🏗️ During build time, the server runs your React code
🧱 It creates HTML files for each page and stores them as static asset
🌐 User visits a URL
📄 Server sends the already-built HTML immediately
📦 Browser downloads JavaScript to make the page interactive (hydration)
🔁 Any API data fetched after load (if needed)

🧠 When Should You Use SSG?

Your content doesn’t change often (e.g., Marketing pages, documentation, documentation, landing pages)
You want fast performance and great SEO
You want to serve pages from a CDN for global speed

👍 Benefits

✔ Super fast load times — no need to generate pages on the fly
✔ Very SEO-friendly — pages are already fully rendered
✔ Scales easily — static files can be served from a CDN
✔ Cheaper hosting — no need for a powerful server

👎 Drawbacks

❌ Not suitable for pages that need real-time data
❌ Rebuild required to update content (unless you use ISR)
❌ Can lead to longer build times if you have many pages

Incremental Static Regeneration (ISR)

Incremental Static Regeneration (ISR) is a hybrid approach that combines the speed of Static Site Generation (SSG) with the flexibility of Server-Side Rendering (SSR).

With ISR, pages are pre-rendered at build time, just like SSG. But here’s the twist: you can update specific pages in the background — without rebuilding the entire site. This allows you to keep your static site fast and up-to-date with dynamic content.

ISR is available in frameworks like Next.js, where you can define how often a page should be re-generated (e.g., every 10 seconds).

⚙️ What Happens Behind the Scenes?

🏗️ During build time, the server generates static HTML files
🌐 User visits a page — they get the static HTML instantly
⏱️ If the page is older than a set time (revalidate), it’s rebuilt in the background
🚀 On the next request, the user sees the updated page
🔁 Meanwhile, the browser loads JavaScript and makes the page interactive (hydration)

🧠 When Should You Use ISR?

Your content changes occasionally and doesn’t need to update on every request
You want the speed of static pages with the flexibility of fresh data
You're building news, e-commerce, or listings that update regularly

👍 Benefits

✔ Fast performance like SSG
✔ Content stays up to date without full rebuilds
✔ Great for SEO — pages are pre-rendered
✔ Scalable and efficient — works well for large sites with lots of pages

👎 Drawbacks

❌ Slight complexity — may require more config and logic
❌ Content isn’t updated instantly — there’s a short delay based on the revalidation interval
❌ Debugging issues related to caching or stale content can be tricky

How JavaScript code is executed?

MD Mohsanul Hoda — Sat, 15 Feb 2025 03:41:40 +0000

``Everything in JavaScript happens inside an execution context.

That means whenever any JS program is run the Call Stack is populated with the global execution context and when a function is invoked a new execution context is created, after the execution of the function the command will back to the global execution context and the execution context will be pop out of the Call Stack.

Call Stack

Call stack is used for managing Execution Context. Whenever an Execution Context is created it is pushed into the stack and whenever an Execution Context is deleted it will move out of the stack.

"Call Stack maintains the order of execution of Execution Contexts"

What is Execution Context?

Execution Context comprises two components.

The first component is known as the memory creation or variable environment. It stores all the variables and functions as key-value pairs.
The second component is code execution or Thread of execution. In This code is executed line by line.

JavaScript is a synchronous single-threaded language.

`
var n = 2;
function square(num) {
var ans = num * num;
return ans;
}

var square2 = square(n)
var square4 = square(n)
`
As soon as we run the above program a global execution context is created and pushed into the Call Stack.
Phase 1: In the memory creation phase we allocate memory to all the variables and functions inside the global space where the variables stores with special value undefined and the function declaration or statement stores the whole body of the function.

Phase 2: Code execution phase, where JS code will execute line by line.
The value 2 will allocated to n and after that function square where nothing is there to execute. Then in square2, we invoke the square function with argument. So, a new execution will be created.
Whenever we invoke a function a new execution context is created.

The function return keyword states that, now return the program control where this function was invoked or called.

As soon as we return a value from a function or execute a function, the instance of that function will be deleted from the execution context. after allocating the value to the variable where it was invoked the execution context will also pop out from the call stack.

This is all about how JavaScript code is executed.

Simple Hacks to Level Up Your Coding Skills

MD Mohsanul Hoda — Thu, 21 Nov 2024 12:12:40 +0000

During my early years as a front-end developer, I was part of a team where the Tech Leads emphasized the importance of 'clean' code.

Looking back, I understood what they were asking: my code needed to be clear and descriptive so anyone could easily understand it. If someone reviewed my code, they should quickly grasp how we addressed the client's user stories. The goal was to produce code that was both readable and maintainable.

Think of your code as a conversation with future developers, including your future self.

This post highlights key points to remember when writing clean code.

1. Use Descriptive Names:

Variable and function names should be as descriptive as possible.
I always advise programmers to name their variables with things that actually make sense to the reader. Write code as if someone else was supposed to read it afterwards.

2. Minimize the use of comments

Maintaining code can be challenging, and maintaining comments can make it even harder. How can we avoid relying on comments? By using descriptive names. If our code is self-explanatory, comments become unnecessary.

The problem with comments is that when someone changes the code, there's no guarantee that the person updating it will also update the comments, leading to inconsistencies. Remember, if you feel the need to write a comment, it may indicate that the code isn't as clear as it could be. However, if you need to add comments, do so only in exceptional cases where they are essential.

3. Reading documentation

Learning a concept directly from the official documentation is often the most reliable and effective approach. Official documentation is created by the developers or maintainers of the technology, ensuring that the information is accurate, up-to-date, and comprehensive. It covers all essential details, best practices, and edge cases, providing a solid foundation for understanding the concept.

Unlike third-party resources, which might contain outdated or incorrect information, official docs are continuously updated and serve as the most authoritative source for learning.

4. Develop strong debugging skills

Learning to debug correctly is an essential skill for any developer.

Use debugging tools, console logs, and breakpoints strategically to trace and inspect your code's behavior. Remember, good debugging is not just about fixing errors but also about learning why they happened, so you can prevent similar issues in the future.

5. Implement a version control system. (eg: GitHub, Bitbucket etc.)

Always make a habit of pushing your code to the repository, not just when you are working in a team but also when you are developing a project alone. This practice protects your code from loss and helps maintain proper version control.
Some tips for maintaining a Repository.

Use descriptive names in your commits, do not use names like "Fixes", "Refactor," or "Minor changes."
Review all your changes before making any commits.
While adding any new functionality, create a branch, and if it works fine, merge it only into the main branch.

6. Learn the art of using Google, AI, or any other platform

"Think of AI not as a competitor, but as a supportive partner".
Always try to search for any error with proper keywords and don't just copy-paste the code from Stack Overflow or ChatGPT, first understand it and write it in your own words with proper descriptive names.

7. Code Review and Collaboration

Reviewing your code by peers can reveal optimization opportunities you might have overlooked. Code reviews are a valuable part of the development process, leading to better and more efficient code.

8. Update Yourself

Staying updated with current technology is essential in today's fast-paced world. It enables professionals to adapt to new tools, frameworks, and trends, enhancing their skills and productivity. By continuously learning and embracing the latest advancements, one can remain competitive, innovate, and tackle challenges more effectively. Keeping up with technological changes also opens up new opportunities, driving personal and professional growth.

Adopt the practice of expanding your knowledge daily.

9. Develop the confidence to ask for guidance

It's crucial to develop the ability to ask for assistance in both personal and professional contexts. It demonstrates humility, a readiness to learn, and an awareness of the fact that teamwork frequently produces superior outcomes. Seeking assistance can open your eyes, speed up problem-solving, and create a welcoming environment where people can grow from one another. Recall that asking for help is a sign of strength rather than weakness since it shows that you value cooperation and group expertise.

10. Utilize unit testing and follow the principles of Test-Driven Development

I understand that unit tests may sometimes seem like a waste of time, but that's far from the truth. In fact, unit tests are highly effective. Consider this scenario: months after you've written your code, a new developer joins the project and adds new functionality. However, their changes inadvertently break existing features. How can you or the new developer quickly identify these issues? If the project has unit tests in place, detecting such problems becomes much easier. I realize that deadlines can be tight, but the time you spend writing unit tests can save significant time and effort in the future.

As a best practice, start by writing your unit test first. It will likely fail at first, but that's okay. Proceed to develop or update the code, and then run the unit test again. This time, it should pass. This approach not only ensures your code is working correctly but also allows you to approach problem-solving more effectively.

Design your logic before you develop.

Thank you so much for taking the time to read my work. I hope you found it helpful.
If you enjoyed this article, please consider subscribing to Medium through my profile. Thank you!