DEV Community: Bhavy Ladani

🚀 CSR vs SSR in React: Why Your Website is Playing Hide and Seek

Bhavy Ladani — Wed, 30 Jul 2025 16:40:44 +0000

Ever clicked on a website and stared at a blank screen for what feels like forever, wondering if your internet just quit its job?

Welcome to the wild world of CSR and SSR — or as I like to call it:
👉 “Who builds the house — your browser or someone else?”

Let’s break it down. No jargon. Just plain talk.

🧠 First, What's Rendering?
Imagine a website is like a restaurant.

You order food (visit a page).

The kitchen (backend or frontend) cooks it.

Then it's served to you (you see the content).

Now the real question is: Who’s doing the cooking?

🍳 Client-Side Rendering (CSR): Your Browser, the Chef
CSR means your browser is doing all the hard work.

When you visit a website built with CSR (like most classic React apps), here’s what really happens:

You get served a blank plate (an empty HTML page).

Your browser goes, “Wait, let me cook!”

It fetches a big bundle of JavaScript.

That JavaScript runs and builds the actual content.

Finally — poof! The page appears.

🥴 But why?
Because React (and other frameworks) love to control everything. It lets developers build fancy apps that feel smooth and interactive. Great for them. For you? You just wanted to read a blog.

💥 The Catch
Slow first load. You might be staring at a spinner longer than you'd like.

Bad for SEO. Google bots aren’t great at waiting for JavaScript to do its thing (they're impatient like most of us).

🧑‍🍳 Server-Side Rendering (SSR): Let the Server Do the Cooking
SSR flips the script.

When you visit a site using SSR (like with Next.js — React’s cool cousin), here’s the magic:

You ask for the page.

The server builds the page — like an overachieving waiter.

You get a fully loaded plate of HTML content.

Your browser just has to display it.

✅ Benefits
Faster first view. You see content instantly. No waiting for JavaScript marathons.

Better for search engines. Google sees the actual content — not a skeleton screen.

🤔 So Why Not Always Use SSR?
Because... life is about tradeoffs. SSR:

Can be slower when navigating between pages.

Needs a server that stays awake (unlike free hosting that naps often).

Might add complexity in code and infrastructure.

🎭 The Big Drama: CSR vs SSR
Feature CSR (Client-Side) SSR (Server-Side)
Initial Load Slower Faster
SEO Not great Much better
Interactivity Smooth after load Can be just as good
Server Needs Just a static host Needs a real server
Developer Pain Easier setup Slightly more caffeine required

🧑‍💻 In React World...
React started with CSR. You’d create a React app (like with create-react-app), deploy it, and boom — CSR.

But then Next.js came along and said:

“Why not let the server do some work too?”
(and maybe stop blaming the user's browser for everything...)

So SSR became more popular in React world, especially for blogs, e-commerce, landing pages, and anything where people need to see stuff quickly (and Google needs to see it too).

🧠 TL;DR (Too Lazy; Didn’t Read)
CSR = your browser builds the page. Might take a second. Good for apps.

SSR = the server builds the page. You see stuff faster. Great for SEO and content-heavy sites.

🎯 Final Thought
If CSR and SSR were roommates:

CSR is the one who promises they’ll cook, but ends up ordering food after 45 mins of prep.

SSR already cooked before you walked in. You just sit down and eat.

Use the one that suits your project. And remember — nobody has to suffer through a blank screen if you architect your site right.

Exploring Uncommon HTML tags

Bhavy Ladani — Thu, 18 Jan 2024 06:00:42 +0000

Introduction

Welcome, fellow developers! In the vast landscape of web development, HTML stands as a cornerstone. While we're all familiar with the usual suspects like

and

, there exists a trove of lesser-known HTML tags waiting to be explored. In this blog, we'll peel back the layers of HTML to reveal lesser-known tags that might just be the missing pieces in your development. So, let's start to see one by one.

details and summary Tags:

The and tags are perfect for creating interactive and collapsible content. Wrap your content inside the tag, and use to provide a brief overview or title. Users can then toggle the visibility of the enclosed content.

<details>
  <summary>Click to reveal more</summary>
  <p>This is the hidden content you can reveal or hide.</p>
</details>

mark Tag:

Highlighting text is a common requirement, and this tag serves this purpose. It allows you to visually emphasise specific parts of your content.

<p>This is a <mark>highlighted</mark> text example.</p>

progress Tag:

Displaying progress bars is made easy with the tag. It's especially useful when you want to indicate the completion status of a task.

<progress value="50" max="100">50%</progress>
<progress value="50" max="100">70%</progress>

figcaption Tag:

Enhance the presentation of figures and images by using the tag. It provides a space to add a caption directly associated with the figure.

<figure>
  <img src="image.jpg" alt="A beautiful image">
  <figcaption>Caption describing the image</figcaption>
</figure>

abbr Tag:

When using abbreviations or acronyms, the tag helps by providing an expanded version when the user hovers over it.

<p>
    <abbr title="World Health Organisation">
        WHO
    </abbr> 
    plays a crucial role in global health.
</p>

time Tag:

Representing dates and times in a structured manner is simplified with the tag. It helps search engines and browsers understand the content better.

<p>
    Join us on 
    <time datetime="2024-01-17">
        January 17, 2024
    </time> 
    for an exciting event.
</p>

cite Tag:

When referencing the title of a creative work (e.g., a book, movie, or song) within your content, the tag provides semantic meaning and helps improve accessibility.

<blockquote>
  <p>In the words of Shakespeare, <cite>to be or not to be</cite>.</p>
</blockquote>

Conclusion

To wrap it up, remember: small tags, big impact. These lesser-known HTML tags may be simple, but their potential to enhance your web projects is anything but. Happy coding!

Magic of TypeScript Generics

Bhavy Ladani — Thu, 18 Jan 2024 05:53:44 +0000

Introduction

Welcome, fellow developers, to the mystical realm of TypeScript Generics! 🚀 If you've ever felt the need to write code that dances gracefully across various data types without compromising on type safety, you're in for a treat. TypeScript Generics are like the spell-book of a code wizard, allowing you to conjure powerful, reusable, and type-safe components. Let me take you to the enchanting world of Generics!

Chapter 1: The Essence of Generics

At the heart of TypeScript Generics is the ability to create functions that transcend the boundaries of data types. Imagine a function that echoes whatever you pass into it, regardless of its type. Behold, the identity function:

function identity<T>(arg: T): T {
  return arg;
}

// Usage
let result = identity<string>("Hello, generics!");
console.log(result); // Output: Hello, generics!

Chapter 2: Generics Unleashed - Classes Edition

Not just confined to functions, Generics can also spice up your classes. Meet the mysterious Box:

class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

// Usage
let numberBox = new Box<number>(42);
console.log(numberBox.getValue()); // Output: 42

let stringBox = new Box<string>("Generics are powerful!");
console.log(stringBox.getValue()); // Output: Generics are powerful!

The Box class is like a magical container, preserving the essence of its contents, no matter the type.

Chapter 3: Generics and Interfaces - A Harmonious Duo

Interfaces, too, can dance with Generics in perfect harmony. Behold the majestic Pair:

interface Pair<T, U> {
  first: T;
  second: U;
}

// Usage
let pair: Pair<number, string> = { first: 1, second: "two" };
console.log(pair.first); // Output: 1
console.log(pair.second); // Output: two

A Pair of Generics, creating a bond between two different types - the Romeo and Juliet of TypeScript.

Chapter 4: Constraints - Taming the Generics Beast

Sometimes, you need a bit of control over your generic types. Enter constraints, the noble knights of type safety:

interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
  console.log(arg.length);
}

// Usage
logLength("Hello"); // Output: 5
logLength([1, 2, 3]); // Output: 3

The Lengthwise interface is like a magic circle, ensuring that only objects with a length property can step inside.

Chapter 5: Default Values - When Generics Get Lazy

Generics can also be a bit lazy. This is one of my favourite among all. Just set a default value, and let TypeScript do the work:

function identity<T = string>(arg: T): T {
  return arg;
}

// Usage
let result = identity("Hello, generics!");
console.log(result); // Output: Hello, generics!

No need to shout the type every time; TypeScript's got it covered.

Conclusion

Remember this: Generics are your magical companions, ready to adapt to any type and make your code more versatile than a chameleon at a colour factory. Embrace the power, wield it wisely, and let the enchantment of Generics elevate your coding spells to new heights! Happy coding, wizards! See you on the next one. Do follow if you have learned something new. 🪄✨

Decoding Weird JavaScript Behaviour

Bhavy Ladani — Wed, 17 Jan 2024 10:45:05 +0000

History

JavaScript was created by Brendan Eich in 1995 while he was working at Netscape.

The initial version of JavaScript was developed in just 10 days in May 1995.

Browsers primarily understand and interpret three core languages for web development: HTML, CSS & JavaScript (not even TypeScript 🙂).

JavaScript is a versatile programming language used both on the client side and increasingly on the server side (Node JS).

He is also the founder of two famous browsers: Mozilla Firefox and Brave.

Type Coercion

One of the most common sources of weird behaviour in JavaScript is type coercion.

Coercion in simple terms is the process of automatically converting values from one type to another type.

This is one of the reasons why “type” is important.

Floating Point Numbers

Floating-point numbers are used to represent decimal numbers in JavaScript.

They have limited precision due to their fixed bit-size (64 bits in JS).

Solutions:

Use a library like Decimal.js for precise calculations.
Use the toFixed() method to round floating-point numbers to a certain number of decimal places.

Equality

JavaScript has two equality operators right now: == and ===.

The == operator checks for equality regardless of type, while the === operator checks for equality and type.

To avoid these unexpected results, you should always use the === operator when comparing values.

undefined vs. null

Undefined: It represents a variable that has been declared but not assigned a value.

Null: It represents an intentional absence of any object value.

The == operator treats undefined and null as equal, but the === operator does not.

NaN

NaN stands for "Not a Number"

It is a special value that represents an invalid numerical value.

The isNaN() function in JavaScript is used to check if a value is NaN

In PHP, you have the is_nan() function to check if a value is NaN.

That's it for this article. I hope you must have learnt something new from this article or may be now you know the reason behind the weird behaviour of JavaScript. I will also make part 2 of this very soon. So stay tuned. Thank you.