DEV Community: Robin Rana

Automating Server Deployments with GitHub Actions: Saving Time with SSH & rsync 🚀

Robin Rana — Sun, 30 Mar 2025 04:44:51 +0000

🚀 I was working with GitHub Actions. I hadn’t explored it before, but I wanted to make my deployment process a bit smoother.

🔄 The task wasn’t exactly deployment, it was more about sending updated files and folders to the server. Previously, I had to manually update the code on the server again and again, so I decided to automate the process using GitHub Actions.

📜 To create a workflow in GitHub Actions, you need to define all instructions in a .yml file. Since I hadn’t worked with YAML before, I asked ChatGPT 🤖 to generate the structure for me. It included server configurations and commands for copying the main branch to the server using rsync 🚛.

🔑 However, to make this work, you need SSH keys for authentication between GitHub and the server. At first, I was using them incorrectly 😅. For authentication, the public key 🔓 needs to be authorized on the server, and the private key 🔐 should be stored in the Secrets environment of the repository settings on GitHub. This way, GitHub acts as a client.

💡 How SSH authentication works:

SSH essentially works with a pair of keys:

✅ Private key (secret key) → Must always be securely saved on the client (local server).

✅ Public key → Stored on the remote server.

📡 When the client sends an access request to the remote server, the private key on the client creates a digital signature ✍️. If this signature matches the public key’s signature on the remote server, access is granted ✅.

In the end, I automated the transfer of project files between my GitHub repository and the server, saving me a lot of time. ⏳🚀

🚀 Understanding Next.js Hydration Errors: Causes & Fixes

Robin Rana — Sun, 30 Mar 2025 04:41:31 +0000

A common error in Next.js is the hydration error, which I often call the “national error” of Next.js 😅.

📌 What is Hydration?

📌 Why does this error occur?

📌 How can it be resolved?

💡 What is Hydration?

Hydration is the process of making a server-rendered HTML page interactive on the client side using JavaScript.

When a user visits a website 🌐, the page is first rendered on the server before being sent to the browser. Think of it like ordering food online 🍔the restaurant (server) prepares the dish before delivering it to you.

✅ Server rendering improves performance (the browser doesn’t have to render everything from scratch).

✅ It also boosts SEO, allowing Google to crawl the content easily.

Once the HTML arrives at the browser, JavaScript kicks in ⚡, making the page interactive — this process is known as hydration.

❌ Why does a Hydration Error occur?

Hydration errors happen when the server-rendered HTML 🖥️ does not match the client-rendered HTML.

🔥 Example:

Let’s say you display the current time ⏰ inside a

tag using React’s useEffect hook:

`const TimeDisplay = () => {
const [time, setTime] = useState("");

useEffect(() => {
setTime(new Date().toLocaleTimeString());
}, []);

return

{time}

;
};`

If this component is server-rendered, the initial HTML will not include the time (because useEffect runs only on the client). When the client updates the component, the

tag will now include the current time, causing a mismatch between server and client HTML—resulting in a hydration error.

💡 Important: useEffect runs only on the client, so it shouldn’t be relied upon for pre-rendered server components.

✅ How to Fix Hydration Errors?

🔹 Use static content for server-side rendering whenever possible.

🔹 Handle dynamic data on the client side.

🔹 Wrap dynamic elements inside a useEffect to prevent server-side rendering mismatches.

🚀 By following these best practices, you can avoid hydration errors and build smoother Next.js applications!

A Game-Changing Feature in React 19

Robin Rana — Thu, 12 Sep 2024 13:16:39 +0000

One of the most exciting features in React 19 is the React Compiler, which takes React to the next level. In previous versions, React would prepare the code to run in the browser during the bundling process. But now, the React Compiler compiles React code directly into HTML, CSS, and JavaScript, making applications much faster.

This kind of compiler already existed in Svelte, which is why Svelte has been significantly faster than React. With this new compiler, React 19 promises to boost performance much more.

Additionally, React often re-renders the UI unnecessarily when the state changes, which used to require manual optimization using memoization techniques like useMemo. React 19 will now handle these optimizations automatically, saving developers time and effort.

Get More Style Power for Your Components with Tailwind Merge

Robin Rana — Tue, 20 Aug 2024 09:23:17 +0000

In the world of frontend development, utility-first CSS frameworks like Tailwind CSS have changed how we build modern web applications. But sometimes, managing all those utility classes can be tricky. That's where Tailwind Merge comes in handy.

What is Tailwind Merge?

Tailwind Merge is a tool that smartly combines multiple Tailwind CSS classes. It makes sure that only the most specific (or the last) class takes effect when there are conflicting styles. This is especially useful in dynamic environments like React, Vue, or Svelte, where class names can change based on different conditions.

Let’s look at a simple example. Suppose you have a button component:

export default function Button({btnText}) {
  return (
    <button className="bg-blue-600 p-5">{btnText}</button>
  )
}

This button has a fixed style. But what if you need to change the background color based on different situations? You might write something like this:

export default function Button({ btnText, bgColor }) {
   return (
      <button className={`${bgColor ? bgColor : "bg-blue-500"} p-5`}>
         {btnText}
      </button>
   );
}

This works fine for one or two style changes. But what happens when you need to modify more styles from different places? The code can get messy and hard to manage.

Now, imagine you could apply different styles without writing all those conditions or changing the main component code. That’s where Tailwind Merge comes to the rescue. It handles everything for you, applying your utility classes in a smart way.

Here’s how it works:

import { twMerge } from "tailwind-merge";
export default function Button({ btnText, className }) {
   return (
      <button className={twMerge('bg-blue-500 p-5', className)}>
         {btnText}
      </button>
   );
}

In this example, className can contain extra classes passed from another component or location. Tailwind Merge will automatically combine these with the default classes, resolving any conflicts. You just define the default style of the component as the first parameter, and then pass any additional styles in className as the second parameter. Your code stays clean and readable, without needing to worry about conditions.

Tailwind Merge is an excellent tool for anyone using Tailwind CSS, especially in complex or dynamic environments. By automatically resolving class conflicts and smoothly merging dynamic class names, it lets developers focus on building features instead of wrestling with CSS.

Whether you're working on a big project or a small component, using Tailwind Merge will make your code cleaner and more maintainable, speeding up your development process.

Give Tailwind Merge a try today and see how it can improve your Tailwind CSS projects! 🎨💻

Happy coding!