Forem: Vignesh Murugan

Server-Sent Events: A Simple Solution you didn't know you needed

Vignesh Murugan — Wed, 18 Jun 2025 03:30:00 +0000

Server-Sent Events

is a client-server communication technique with a one-way communication flow. Yes, as it implies the server will sent the data to the client while the client initially establishes a connection using Event Source and sits idle.

I'm familiar with communication techniques like Short polling, Long polling, and Web Sockets and I implemented them at certain stages in my development journey.

There came a situation where I have to find and use the right technique to solve the problem at hand, and this article is all about why and how I did it.

Before moving here's a quick overview of each of the technique:

Short Polling:
The client repeatedly requests data from the server at fixed intervals. Simple but inefficient as it creates unnecessary network traffic when there's no new data.
Long Polling:
The client makes a request, and the server holds the connection open until it has new data to send. Less wasteful than short polling but can still be resource-intensive on the server.
Web Sockets:
Creates a persistent, bi-directional connection between client and server. Great for real-time applications where both sides need to communicate freely, but can be overkill for simpler use cases.
Server Sent Events:
Establishes a one-way connection from server to client. The server can push data whenever it's ready while maintaining a single persistent connection. Lightweight and built into standard HTTP.

Here's why I had to use Server-Sent Events in my case:

Client will make an API call to the Server consisting of multiple user's data from the dashboard, which the server will process one by one and send the results back one by one.

Initially I thought of using the Web Sockets for the above problem. But upon considering the nature of the problem, design architecture and the use-case it makes a clear sense to use Server-Sent Events.

Here's why:

Simpler Implementation:
SSE requires minimal setup compared to Web Sockets. The client-side code is surprisingly straightforward.
One-way Communication Flow:
In my case, data only needed to flow from server to client. The client requests the process to start, and then just listens for updates. No need for the overhead of bi-directional communication.
Standard HTTP:
No special protocols or ports needed, making it easier to work with existing infrastructure and firewalls.

Implementation

Here's a gist of how I implemented it:

Server-side (Node.js with Express):

app.get('/api/process-data', (req, res) => {
  // Set SSE headers
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // Get users from the request
  const users = req.query.users.split(',');

  // Process each user and send results as they complete
  users.forEach((user, index) => {
    // Simulate processing time
    setTimeout(() => {
      const data = JSON.stringify({
        user,
        result: `Processed data for ${user}`,
        progress: ((index + 1) / users.length) * 100
      });

      // Send the event
      res.write(`data: ${data}\n\n`);

      // If last user, end the response
      if (index === users.length - 1) {
        res.write(`data: ${JSON.stringify({ done: true })}\n\n`);
      }
    }, index * 1000); // Process each user with a delay
  });
});

Client-side:

function processUserData(users) {
  // Create the EventSource
  const eventSource = new EventSource(`/api/process-data?users=${users.join(',')}`);

  // Handle incoming messages
  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);

    if (data.done) {
      console.log('Processing complete!');
      eventSource.close();
      return;
    }

    console.log(`User: ${data.user}, Result: ${data.result}`);
    updateProgressBar(data.progress);
  };

  // Error handling
  eventSource.onerror = (error) => {
    console.error('SSE error:', error);
    eventSource.close();
  };
}

function updateProgressBar(progress) {
  const progressBar = document.querySelector('.progress-bar');
  progressBar.style.width = `${progress}%`;
  progressBar.textContent = `${Math.round(progress)}%`;
}

Advantages I Discovered

Bandwidth Efficiency:
Unlike Web Sockets which maintain a constant connection, SSE only sends data when there's something to send.
Easy Debugging:
Since it's just HTTP, I could test and debug using standard tools like browser dev tools or Postman.
Scalability:
For my use case of processing user data sequentially, SSE scaled well without the connection management complexity of Web Sockets.
Progressive Updates: Users see results as they become available, rather than waiting for all processing to complete.

Limitations to Keep in Mind:
It's not all sunshine and rainbows though. SSE does have some limitations:

Connection Limits:
Browsers typically limit the number of concurrent SSE connections (usually 6 per domain).
One-way Communication Only:
If you need the client to send data back frequently, SSE isn't the right choice.
IE Support:
If you need to support Internet Explorer, you'll need a polyfill.

Conclusion

Sometimes the simplest solution is the best one. While Web Sockets get all the glory in real-time applications, Server-Sent Events provided exactly what I needed with minimal overhead and complexity.

For use cases where you need server-to-client updates without the complexity of Web Sockets, give SSE a try. You might find it's the solution you didn't know you needed.

Have you used SSE in your projects? I'd love to hear about your experiences in the comments below!

Next Js just killed React hooks

Vignesh Murugan — Tue, 18 Jun 2024 04:30:00 +0000

If you've used React hooks like useState() and useEffect() just like me, then the approach Next Js brought can be quite surprising and confusing to you. But trust me once you got hold of this concept you're gonna love it.

It's React's way to use hooks like useState and useEffect to fetch data from the server and render it in a browser whenever a component mounts on the page.

This traditional approach is quite ineffective when it comes to components that are not going to be interactive on the client side.
You might've sensed what I'm trying to talk about, if not it's about the Server Side Rendering(SSR) or Server components introduced by Next Js.

Two important issues Next Js fixes here:

SEO optimization
Waterfall problem

Enough of the talk, let me walk you through the code that gets the work done.
First, let's see how React handles data fetching and rendering.

React Code:

import axios from "axios";
import { useState, useEffect } from "react";

export default function UserCard() {
  //useState hook for state management
  const [user, setUser] = useState({});

  // useEffect hook for data fetching
  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users/1")
      .then((response) => {
        setUser(response.data);
        console.log(response.data);
      });
  }, []);

  return (
    <div className="flex items-center justify-center h-screen">
      <div className="flex flex-col justify-center items-center border-2 p-4 rounded-lg">
        <p>
          <span className="font-bold">Name: </span>
          {user?.name}
        </p>
        <p>
          <span className="font-bold">Email: </span>
          {user?.email}
        </p>
        <p>
          <span className="font-bold">City: </span>
          {user?.address?.city}
        </p>
        <p>
          <span className="font-bold">Company: </span>
          {user?.company?.name}
        </p>
      </div>
    </div>
  );
}

The above code is for a UserCard React component which we render on the client side.

Output:

Here's how the process works in React:

The UserCard component is rendered initially.
The useEffect hook runs because of the empty dependency array [], meaning it will only run once when the component mounts.
Inside useEffect, an HTTP GET request is made using Axios to fetch user data from the specified URL (https://jsonplaceholder.typicode.com/users/1).
Once the response is received, the setUser function is called with the fetched user data, updating the state.
As a result of the state update, the component re-renders with the updated user data.

It's time to find out what Next Js has got to offer us!

Next Js code:

import axios from "axios";

// API call with no useState and useEffect hooks
async function getUser() {
  const response = await axios.get("https://jsonplaceholder.typicode.com/users/1")
 return response.data;
}

// Function here is a Async Function
export default async function UserCard() {
  const user = await getUser();

  return (
    <div className="flex items-center justify-center h-screen">
      <div className="flex flex-col justify-center items-center border-2 p-4 rounded-lg">
        <p>
          <span className="font-bold">Name: </span>
          {user?.name}
        </p>
        <p>
          <span className="font-bold">Email: </span>
          {user?.email}
        </p>
        <p>
          <span className="font-bold">City: </span>
          {user?.address?.city}
        </p>
        <p>
          <span className="font-bold">Company: </span>
          {user?.company?.name}
        </p>
      </div>
    </div>
  );
}

In Next Js, every component is a Server component by default.

Server-side rendering (SSR) is a great add-on to React's arsenal, as it will improve the SEO and waterfall problem.

The UserCard component will be rendered on the server side, which means the API call will be made on the server and the response data will be populated inside the component.
Next Js will send the component with all the populated data which is SEO-friendly to the client side (note: this is a server component).

React has a big issue, it's the Anti SEO pattern, but Next Js fixed it and made SSR popular. Doing the same SSR in React can be a bit tedious set up initially, but we also need to consider that Next Js is a full-stack framework.

Even though SSR might sound cool it also comes with some drawbacks like load on the server side, static components.

It's essential to understand the tradeoffs each approach provides and choose the one that fits your needs.

Follow me for more awesome tech contents!
LinkedIn | Twitter

AWS Arsenal: An array of Cloud Services

Vignesh Murugan — Tue, 05 Mar 2024 05:35:00 +0000

AWS provides Cloud-based services to perform Cloud computing, Web hosting, Storage, Networking, Security, and much more. AWS is a pay-as-you-use service, which means you only pay for the services you use in the AWS cloud infrastructure making it more accessible to everyone.

First things first. What is AWS? It stands for Amazon Web Services. Imagine a network of global computer servers located worldwide that you can rent for your usage, that's what AWS is.
In the world of Cloud Computing, AWS has the first-comer advantage and a market share of 31% in Cloud Infrastructure service.

Today we are going to discuss a few commonly used AWS Cloud services, what are they, and why we need to use them.

EC2
AMPLIFY
LAMBDA
S3
CLOUDFRONT
ACM

EC2 🖥️

EC2 stands for Elastic Compute Cloud. What is EC2 in layman's terms? Imagine a Virtual machine just like your PC or Laptop but in the cloud, you can access it anytime/ anywhere and all you need is a computer with internet access.

You can perform any computing operation in your EC2 instance. The main advantage of an EC2 instance is that you can choose from a variety of Operating Systems and can easily upgrade/ downgrade the configurations anytime.

AMPLIFY 📲

AWS Amplify is a cloud service that makes it easy to create Full-stack web and mobile applications that are scalable with cloud infrastructure. It supports a wide range of frameworks, languages, and features like Auth, Storage, and Functions. It takes care of the CI/ CD for you so that you can focus on building great products for your users.

LAMBDA ⁁

AWS Lambda is a cloud-computing service that allows developers to build and run code without managing servers. It is also known as Function-as-a-service(FaaS) or Serverless. It is mainly used to run backend applications in the Cloud without spending much time setting up and maintaining server infrastructure.

S3 🪣

AWS S3 stands for Simple Storage Service, S3 is an object storage service through a web interface. S3 helps to store and retrieve any amount of data like images, audio, videos, and document files as objects in the cloud that can be accessed anywhere.

Files are stored in Bucket. A bucket is like a folder available in S3 that stores the files. It provides developers with a secure, flexible, and durable way to store any data and limit its accessibility to others by authentication.

CLOUDFRONT 🌦️

AWS CloudFront is a CDN(content delivery network) service that helps distribute content across the world through its cloud network. You can serve files, images, documents, videos, and applications to the end users through CDN links. The main advantage is that Amazon has a lot of cloud servers around the world so the content you distribute can be delivered to the end user with the lowest latency and high transfer speed.

ACM 📇

AWS ACM stands for AWS Certificate Manager. It is a one-stop solution for creating, storing, and renewing public and private SSL/ TLS certificates for AWS and other internal services. In simple terms, it helps to secure your local HTTP network and turn it into **HTTPS **that your users can access with trust.

Thanks for reading my article! Let me know your thoughts. ❤️

Boost Your Productivity with Redux Toolkit (RTK) in React JS/Next JS

Vignesh Murugan — Fri, 28 Apr 2023 09:36:12 +0000

If you’re looking for a proper guide to using REDUX TOOLKIT (RTK) with REACT/ NEXT JS for your project, then you have landed at the right location.

Redux Toolkit is a powerful and user-friendly library that simplifies state management in React applications, allowing developers to focus on building their apps rather than worrying about managing complex state interactions.

Why do I say that? Because I’m also just like you searched for the correct way to implement RTK in my project but was unable to get any easy, simplified approach. After lots of struggle, I found the right way of implementing RTK in my project, so I’m here to share my learning with you.

Enough of the talk, let’s dive into the coding part. 🌊🏊‍♂️

First things First, I hope you know how to create a React/ Next project so I’m skipping those steps and getting directly to the point. Here I used NEXT JS 13 application since CRA is officially dead.

1.) Install the necessary dependencies

npm install react-redux
npm install @reduxjs/toolkit

2.) Create a folder named “store” in your project’s root directory

3.) Inside that directory create a file named “store.js” which will act as our centralized store for state management.

4.) In “store.js” import ‘configureStore’ from Redux Toolkit

//store.js

import { configureStore } from "@reduxjs/toolkit";

5) Create a new Redux store called “store” as the variable name and use configureStore function to add your reducers. As of now enter the code below, then we can create some reducers and get back here.

// store.js

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
    // your reducers here
  },
});

6.) We can create multiple slice reducers based on our needs and functionality and add it to the reducer object of ‘store.js’ . Here I will create a slice reducer of user details and export it to the store.

Create a file called ‘userSlice.js’ under the “store” directory where we will save the state variables of username and password entered by the user.

// userSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    user: '',
    password: '',
}

const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        setUser: (state, action) => {
            state.user = action.payload;
        },
        setPassword: (state, action) => {
            state.password = action.payload;
        }
    }
});

export const { setUser, setPassword } = userSlice.actions;

export default userSlice.reducer;

Import the ‘createSlice’ from redux toolkit libaray.
Create a variable called initialState and set the initial values. Here user, password are assigned with ‘ ’ empty strings as initial values.
Now create a Redux Slice using createSlice function with the name, initial state, and reducers (setUser, setPassword).
Each reducer takes in a ‘state’ object and an ‘action’ object.
‘setUser’ sets the ‘user’ state to the ‘action.payload’ (which is passed in when the action is dispatched).
‘setPassword’ sets the ‘password’ state to the ‘action.payload’
The ‘export’ statement exports both the ‘setUser’ and ‘setPassword’ actions as named exports, and exports the ‘userSlice.reducer’ as the default export.

7.) Now let’s import the ‘userSlice’ to the store and use it in our reducers object. The final code in ‘store.js’ will look like this with our ‘store’ exported.

// store.js

import { configureStore } from "@reduxjs/toolkit";
import authSlice from "./authSlice";

const store = configureStore({
  reducer: {
    auth: authSlice,
  },
});

export default store;

8.) Now we need to import our store and pass it to the Provider, then wrap ouraround the ‘App’ component in REACT/ in terms of NEXT JS. So the code in the ‘App.js’ or ‘_app.js’ component will look like below.

// _app.js

import { Provider } from 'react-redux';
import store from '../store/store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

That’s it, you have successfully integrated REDUX TOOLKIT to your REACT/ NEXT application.

Tada 🧙‍♂️🎇It might sound/ look hectic at the beginning, but trust me using REDUX straightforward is much more complicated than this and that’s why REDUX became legacy code and RTK came into the picture. Try using this a few times and trust me the learning curve of RTK will become much smoother.

Is it useful?! Give this a clap and share it with your friends, do follow for more content.

See you in the next article, Happy Coding! 👨‍💻❤