What's up everyone! I hope you guys doing well! So, in the last release we talked about System Design and it's working in the software development industry. So, it's pick up from where we left off in System Design and continue learning about Next.js and its elements.
System Design: How DNS & CDN works behind the Internet?
Starting with DNS
Imagine you're in a big city like Delhi and need to find your friend's house. You know their address, but wouldn't it be easier if you could just ask someone for directions? That's kind of what the Domain Name System (DNS) does for websites!
Let's start with an example, think of websites like your friend's house, they have unique addresses (IP addresses) like 111.222.333.444, but they're hard to remember, right? That's where DNS comes into the play. DNS is like a giant phone book for the internet. It translates easy-to-remember domain names like to their corresponding IP addresses, and when you type a website address, your computer asks a DNS server for the IP address. It's like asking a local shopkeeper for your friend's house number!
There are many DNS servers around the world, like having phone books in different cities. This ensures quick response even if one server is busy.
Now, imagine your friend moved to another city! Wouldn't it be faster to visit a shop closer to their new place? That's the idea behind Content Delivery Networks (CDNs).
Read More:What is DNS? | How DNS works | Cloudflare
CDN: Deliver content faster from PoPs across the world
Websites have content like images, videos, and text. Downloading this content can take time, especially if you're far from the website's server. CDNs store copies of website content in servers around the world, like having mini shops in different cities closer to your friend's new house. When you visit a website, your computer connects to the nearest CDN server, getting the content much faster than downloading it from the original server far away.
Think of it like buying snacks from a nearby shop instead of traveling all the way to the main store! CDNs make websites load faster, especially for people in different parts of India.
Some popular CDNs include Cloudflare, BunnyCDN & KeyCDN.
So, DNS helps us find websites using their names, and CDNs deliver their content quickly through nearby servers. Both are essential for a smooth and fast internet experience, just like having a good address book and local shops in a big city!
Read More:What is a content delivery network (CDN)? | How do CDNs work?
Server Actions in Next.js 14.1
Imagine you're building a website with React, where users can interact with things like forms, buttons, or product listings. Normally, these interactions might send data to a server through an API request, the server does something with it, and then sends a response back.
React Server Actions are a shortcut for that. They let you run code directly on the server from your React code, without needing a separate API request.
Taking a simple example, think of it like a special button:
Normal interaction: Click a button, send data to server, wait for response, update page.
Server Action interaction: Click button, code runs directly on server, updates data or logic there, sends the result back to your React code, which instantly updates the page.
How Server Action helps?
Quick response: No need for waiting for a separate API request and response.
Reduced code: Less code for setting up API calls and handling responses.
Secure data: Sensitive data can stay on the server instead of traveling through the network.
Still, Server Actions are not for everything!
Using 'Server Actions' can be very helpful when it comes to creating forms, securely sending data back to the server without relying on an API endpoint, but still, they're not a replacement for everything, when we are building complex server logic, we still need dedicated API endpoints to make sure everything works in one place, and they only work on the server where your app is hosted so it totally depends on your host to support the server actions or not.
If you're building a simple website with basic interactions, React Server Actions can be a great way to make your code cleaner, faster, and more secure.
Read More:'use server' directive – React
Rage for Indian Developers? Nhh?
While some YouTubers have emphasized that contribution to open-source programs will help them get a job, some of them have really forgotten to mention that "only meaningful contributions" make the difference, so their followers start spamming in the official repository of Express.js. Following this, some maintainers from Express.js (https://github.com/expressjs/express) have expressed their anger over the spam pull requests making it hard to maintain.
Conclusion
In conclusion, server actions and system design offer powerful tools to enhance your React applications. By streamlining interactions, boosting security, and strategically delivering content, these techniques can significantly improve both user experience and development efficiency. Embrace these concepts, experiment creatively, and join the thriving open-source community to unlock the full potential of your web creations. Remember, the possibilities are limitless, just like the code you write!
