What are Protocols? IP/DNS/TCP or Ports? What does port 80 even mean?

Abhinav Patel — Thu, 22 Apr 2021 04:13:49 +0000

Hey beautiful people! Are you feeling lost in the ocean of complex words when you search "What are protocols? what the heck is a port? What's port 80?"

Don't stress out in this blog we are gonna talk about all of it once and for all in simpler words about how does the internet really works. So grab some water and enjoy the ride!

Let's start off with Protocols.

Protocols mean a set of conventions or standards which are decided by a group of people that two individuals follow to communicate effectively.

For example, in the pre-covid world, if one person puts forward his hand, the other person pulls out his hand for a handshake. It's a protocol humans use to greet each other whereas now we all follow covid "protocols" as you may hear off.

In the same way, there are few protocols which all the computers over the internet follow to understand each other. Some of the most popular protocols you might have heard or seen are IP or TCP.

What is IP?

IP means Internet Protocol. It's the address of each computer over the internet. Didn't make sense, huh?

Let's take an example of a letter and its envelope. When we write a letter and put it in an envelope, on the envelope we write the addresses of receiver and sender to return if it's undelivered for any reason whatsoever.

Now you might be thinking WTH Abhinav? We were talking about IP where does this come in between. Wait for some time it all will make sense trust me😇 just read through.

So in this metaphor, the letter was data, the addresses were IP Addresses of the server and client.

When we send some data from Point A to Point B on the internet we need the IP Addresses of both the points to send our data. Now you might say but Abhinav we never type in blah.blah.somenumber.othernumber in the search bar.

You are right.

Humans don't remember some gibberish numbers as an address for a website. We remember domain names tho. which redirects us to those IPs.

DNS

It's called DNS or Domain Name System it's like the directory of all the IPs. So when you type in microsoft.com you are actually looking for this URL in the DNS through your Internet Service Provider and then redirecting to the IP which your ISP gives in return.

So as IP and DNS are clear.
Now comes the meat of the blog! What's TCP?

TCP

TCP or Transmission Control Protocol is a solution to a couple of problems, but let me ask you a question first won't it be pretty convenient for the individual servers to be able to do multiple things, right?

The servers can host emails, websites, chat services, video conferencing, and many more growing list of features in the new software we use nowadays.

Won't it be great if one server can do all of it on its own? It would save our resources financially as a business and easy to manage.

Port Number

So for that let's go to our previous letter example, imagine if postman writes a number on that envelope to filter out which letter needs to be going to which area of the town so they can distribute those letters effectively in less time same way think of that number as the port number in the world of internet.

Port Numbers are standard numbers that signify which service you want to use in the server so it's easy for the server to understand the type of request.

For example, in the world of TCP, Port 80 is standard to send and receive requested Web pages from an HTTP server. It manages
all HTTP-based requests that originate from a computer, regardless of the number of requests and initiating Web clients. or Port 443 from HTTPS which means it is a secure request for a webpage.

Now it also takes care of the delivery of the data for example if some data gets lost in the process of transfer or maybe the server is overwhelmed by the requests as it has a finite memory it might lose some data sometimes.

TCP also handles the process of retransmitting data as needed. if any of these packets of information gets lost in the space of the internet literally TCP will also compel your PC, Laptop, or phone to resend that data as well.

Thank You!🥰 For reading it all through. I hope that gave you some clarity with regards to these terms instead of getting into the rabbit hole of the gibberish complex terms.

WTH is SSR or CSR? When to use What?

Abhinav Patel — Sun, 04 Apr 2021 10:32:07 +0000

Did you ever wonder what's rendering? or Server or Client Side Rendering?

In this blog, we are gonna discuss how these things work in very simple terms.

Let's start off with rendering 🙈

Rendering is simply a process of combining data from a database with a template and giving out an HTML file as an output which the browser can use.

Data from Database + Templating = HTML (This whole process is called rendering)

The user asks for only an HTML file it doesn't care from where is it coming.

Templating can be done by the server or by the client (browser)

When the Server does Rendering its Server Side Rendering and will need Server Side Routing.
When the Client does Rendering its Client Side Rendering and will
need Client-Side Routing.

Server-Side Rendering:

We get the data + view both from the server.
Bad UX as need to get the whole page again for eg. Navbar and footer which more or less remains the same.
Difference between Server-Side Generation and Server Side Rendering -
SSG is when the server does all the work beforehand and is ready with all the HTML files to be served whereas in SSR it waits when the file is requested, then when it's requested it takes data from DB and merge with template and then creates a file on the fly.

Client Side Rendering:

Only talks to the server for the data not for the view after the first render.
Creates Single Page Application
That's the reason why mobile or desktop apps are soo large because they already have the view and only talk to the server for the data.

Client-Side Routing:

SPA Routing experience. (Forward → and ← in page works)
URL update as well so easy to share your link to the exact page with someone.
But Bad for SEO - use SSR for text-heavy things.

As a Bonus for reading this much 😌:-

Lets understand the most confusing thing in React Routes which is when to use which URL Param so here are all the Types of URL Parameters and when to use them:

pathname
- when you want static resources.
- you wanna render the whole new Component page.
- eq. Category Page as its a whole new component
search
- when you need data from a server doing SSR
- don't use it for routing.
- only for in-page changes.
- query parameters, easy to share with anyone.
hash
- similar to search but only used for CSR
- used inside CSR Navigation when the page is big.
state
- when you want to provide data through route without showing the data in URL.

What is pre-rendering?

Pre-rendering is a tradeoff between client-side and server-side rendering. Every pre-rendered page displays a skeleton template while the data waits to be rehydrated with AJAX/XHR requests. Once the page is fetched, internal routing is done dynamically to take advantage of a client-side rendered website.

What is a universal app?

A universal app sends to the browser a page populated with data. Then the app loads its JavaScript and rehydrates the page to get a fully client-side rendered app. This approach combines the advantages of the latest techniques available today.

DEV Community: Abhinav Patel