In this era of digital technology, web applications have pretty much become the identity of their respective businesses. Every day, millions of companies across the globe seek out the service of web apps to both amp up the scale and flexibility of their operations as well as to make themselves more accessible for their end-users. On top of it all, it accords them a higher level of security as well.
The widespread usage and endorsement of web applications are exactly what makes it imperative for beginner and amateur programmers to dive deep into their finer aspects. A good place to start this journey is by trying to understand the flow that drives the working of a typical web application. This all-new video lecture — How Web Apps Work — Next JS & React JS by Eincode explains in detail the working of web applications and further demonstrates a few practical examples to strengthen your understanding.
Full Course
https://academy.eincode.com/courses/complete-next-js-with-react-node-beautiful-portfolio-app
Getting Started- Making A Request
The fundamental question that one needs to ask while launching a web application is this- “How am I getting the content to my browser from the internet?”
The best way of going about this is by scanning through the details of the webpage that you are previewing at the moment.
You can do so by right-clicking on your browser and then by selecting the “Inspect” option from the pop-up menu that appears. To understand how to go about this, you can refer to [0:50] of the video.
- Once the Inspect window appears on your screen, navigate to the Network tab to see all of the network communications your browser is making.
- Once you type in the URL of your choice on the browser and press Enter, you’ll notice a lot of details simultaneously appearing on the Inspect window. This has been demonstrated in [1:35] of the video.
Now, let’s understand what exactly happens after you enter the URL of your choice.
- After you make your request, it goes to the wire on the internet and reaches the concerned server.
- Following this, the server reverts with a certain response. In this case, our response is in the form of an HTML document. To see what a typical server response looks like, refer to [2:20] of the video.
- Next, the contents of this document are parsed and rendered on our screens.
- In the course, a document object model (DOM) is created as a representation of the document that is sent by the server. To understand DOM in detail, you may navigate to [3:48] of the video.
- As demonstrated in [2:59] of the video, sometimes you’ll notice the presence of other requests as well. This takes place most likely because the HTML document that you have asked for from the server contains some other links that you should fetch from the internet.
What is a Client-Side Rendered Application?
Section [5:01] of the video covers in detail the specifics of a client-side rendered application. The salient points have been listed below.
- At the outset, client-side rendering refers to the process of rendering content in the browser with the help of JavaScript.
- In this process, you essentially redirect your request to a single HTML file following which the server delivers it either without any content or simply with a loading screen.
- Hence, in client-side rendering, one doesn’t receive content-loaded HTML document. Instead, what they receive is an extremely scanty HTML that has a JavaScript file.
- Besides taking care of the initial loading, it is this very JavaScript file that is also responsible for rendering the rest of the site using the browser.
Benefits Of Client-Side Rendering
Section [8:33] of the video talks at length about the benefits of client-side rendered applications.
Here are some pointers -
- Since you don’t require a web server for a client-side rendered application, you get the luxury of choosing from among a multitude of cost-efficient options to host it.
- On a client-side application, users get to navigate between different pages without having to make a server roundtrip. In other words, there is no requirement for a full-page reload. As a result, this makes the website appear very fast to the end-user.
What is a Server-Side Rendered Application?
Server-side rendering is regarded as the traditional method for creating websites. Navigate to section [9:01] of the video to learn about server-side rendering in detail.
Below are some of the salient points -
- In server-side rendering, when a user issues a request to the server, the latter compiles an HTML document by fetching user-specific data and then sends it to the former’s system.
- Upon receiving the document, the browser parses through the content in order to display it on the page. This entire process transpires within a few milliseconds.
Benefits Of Server-Side Rendered Applications
[9:38] of the video talks about the various benefits associated with server-side rendered applications.
Here they are -
- In comparison to client-side rendered applications, the full-load(initial load) time of server-side rendered applications is significantly quicker.
- Since applications created using server-side rendering loads the entire HTML document, they are able to secure higher page rankings. As a result the SEO of such applications never suffers.
Why Do We Use Frameworks like Next.Js and React.Js?
At [13:54] of the video, there’s a very fundamental and interesting question for you-
Why do we make use of frameworks such as Next.js, React, and Angular in the first place?
Well, the answer is rather simple.
This is because, when you are writing directly to pure JavaScript the development experience is not as enjoyable. The use of these frameworks makes the process of writing applications much easier. They save you from the troubles of specifying an “append child” method or managing your data in a special way as you are normally required to while writing an application.
This concludes our theoretical discussion of the working of web applications. For further clarity, refer to sections [10:21] and [15:59] of the video, where a few practical examples are demonstrated for your benefit.
Conclusion
Eager to learn more about web applications and looking to polish your Next.Js abilities?
You should consider opting for the Complete Next.JS With React & Node- Beautiful Portfolio App course offered by Eincode.
Curated by experienced software engineer and freelance developer Filip Jerga, this course by Eincode certainly features among the choicest Next.Js resources on the internet. Designed with the aim of catering to beginners, this course is perfect for anyone who’s planning to start their career as a developer or for someone who’s simply planning to hone their programming skills.