Uploads from Code Sketched

Currently Playing: Why Next.js is the next big thing in web development!

In today’s video, we look into the Next.js framework and see why it has been creating huge ripples in the world of web development recently. In today’s video, we look into the Next.js framework and see why it has been creating huge ripples in the world of web development recently. As stated in the description on the landing page, Next.js is a React Framework. But the real deal that separates it from most of the other frameworks is the support for static as well as server-side rendering straight out of the box. That stuff is game-changing. In order to understand how server-side rendering works, let us first see how a non-server-side rendered application works. Usually, there is some code that looks like this. Using a query selector, we grab a reference of a div with an id of root. And then, ReactDOM.render will then render the entire application into that div. This is what the whole process looks like. As soon as we visit the URL for the application, a network request is made to fetch the application from the server. As a response to the request, the server returns the HTML, CSS, and Javascript bundles. Once the bundles are received, they are unpacked, and when the Javascript gets executed, the lines of code that we earlier saw get executed, and the corresponding React UI gets injected into the dom. As this entire process of rendering the UI takes place at the browser, the client, we call it client-side rendering. In server-side rendering, instead of sending the bundle back and letting the browser render the UI, the server performs certain additional steps, which might include executing Javascript code, making some network requests etc. At the end of the process, the server generates the final HTML that the browser can directly use. Once that HTML is displayed on the browser, the usual steps of Javascript execution take place and the UI starts responding to user events too. This process is called as hydration. Once hydration is complete, the app then continues to function similar to a normal SPA. But in this case, as majority of the tasks related to rendering took place on the server and hence the name, server-side rendering. Check out our other popular videos: 1. Learn about public-key cryptography https://www.youtube.com/watch?v=64DL9BNVwkU& 2. maximum substring in a string (Google interview question) https://www.youtube.com/watch?v=IHsX70r-fIQ 3. How the javascript engine works? https://www.youtube.com/watch?v=KM9coMpy5sQ 4. Real time median in a stream, another google interview question https://www.youtube.com/watch?v=1CxyVdA_654 5. Understand the Javascript event loop https://www.youtube.com/watch?v=XzXIMZMN9k4 6. Understand Promises in javascript https://www.youtube.com/watch?v=gV7SaMIFyg8 7. Git basics you must know https://www.youtube.com/watch?v=HDRXwokgWpo