NextJs is a framework built on top of React and offers plenty of capabilities that help enhance the developer's experience. One of the key features of NextJs is that it is not just a frontend framework but a full stack React framework enabling developers to write backend code
How were websites rendered traditionally without frameworks?💻
Websites built using HTML, CSS, and Javascript function quite differently compared to let's say React or Angular. When a user accesses a site, the client or the user sends a request to a server located in some other computer somewhere on earth asking for the content to be displayed. Upon each request, the server sends the HTML, CSS, and Javascript files. The client upon receiving these files first analyzes the HTML file, then applies styles from the CSS files, and then applies the logic in the javascript file. As you can probably tell since everything is rendered on the client's browser, things can get very resource intensive once the website starts to scale with heavy components. This negatively impacts the website's load times which is never a good experience for the end user.
Welcome the frameworks ⚙️
This is where React comes in. With features such as virtual DOM, and components the web development experience was greatly improved. When a user tries to access a React site, the browser sends a request to the server for the content. In response to this, the serves to send a basic HTML file as a basic entry point for the application.
To render the application efficiently, react uses a trick up its sleeve - The React Router. React Router is used to navigate to different pages of the application, all without needing full server requests. Only when the components require fetching data from the servers, do the components initiate requests to retrieve the relevant data.
But as one can probably tell, react still primarily performs client-side rendering by relying on javascript for initial rendering. This not only affects devices with slow processing speeds but also impacts the SEO performance of a website. For each page request, the server sends complete files to the client, thus increasing bandwidth usage.
NextJs - The savior ☑️
When a NextJs site is loaded, the client sends a request to the server to retrieve the HTML, CSS, and Js files. The HTML file received will be a fully rendered file that includes the content and react components that make the client render it. Now comes the real magic - NextJs. The Javascript event handlers and reactive properties are attached to the already rendered HTML file. Often times what happens is that these react components such as the header, footer, and navbar don't match what's being rendered on the client side. This generates an error which is also referred to as The Hydration Error. In the client, now once React hydrates the rendered DOM, it adds things like click handlers and other javascript logic.
The SEO Effect 🔍
Search Engine Optimization is the process of increasing a webpage's visibility and ranking in search engines. The SEO crawlers kind of scour through servers searching for content on web pages. If these web pages are to be rendered on the client end, then these crawlers won't find much on the server. This affects the visibility and ranking of a webpage. If a site is to be rendered on the server itself, these bots get to scan the whole rendered page along with all the meta tags, optimized words, and headings, which in turn gives these sites better visibility.
Client Side Rendering or Server Side Rendering? What to use when? 🦾
It's not such that Client Side Rendering is never used. It has its own benefits over Server Side Rendering, in single-paged applications serving tons of javascript, client-side rendering is used in order to reduce the burden on the server. Server Side Rendering on the other hand is vital to provide a snappy experience for users with a poor internet connection. By breaking CSS and Javascript files into chunks and rendering pages in the server itself, server-side rendering helps with indexing, performance, and accessibility.
Wrapping up🛑
In this blog, we first learned about how traditional web pages were rendered before the inception of frameworks like React. Then we got to know the inner working of React when it comes to rendering. Finally, we learned about NextJs and its power of Server Side Rendering which helps in better indexing and improved performance. We also got to know some differences between Client Side Rendering and Server Side Rendering.
That is all for this blog. Thank You