 the what is the exact pain for building react application with SSR, HMR and all the configuration in place and how next year solves our problem and what else next year's can do, right? So let's start this discussion with a metaphor. So, so imagine you are a foodie like me and you, you like to eat a lot, right? And whenever you want to eat something, you go to the supermarket every time when you are hungry, right? The first scenario here shows that you are hungry every time and you are going to the supermarket every time when you are hungry, right? While in the second case, what you do is you spend 45 minutes in the supermarket and you make a list about what you need and you look around what you need for the complete month and you gather everything and which and like buy everything and come back home and put everything in a fridge. And whenever you whenever you're hungry, you open the fridge and you pull out whatever you want to want to eat. So the second scenario is pretty much which is something called as client side rendering once the so let's go on go on to the next slide. So this is typical server side rendering when clients has many trips, many as many many trips to server to for the slash food out. There is there is another request and slash bar out. There is another request which is traditional SSR which is followed. But in the in the client side rendering, once the abjus is fetched, all of the content is being served by abjus by the JavaScript which is client side rendering. Can I can I get best of both the worlds? So let's try and understand what is JavaScript SEO. So JavaScript SEO is the practice of writing JavaScript that with that ensures that you write JavaScript which is rendered correctly and indexed by the search engines as well, right? So you can see the JavaScript SEO includes the JavaScript writing practices plus traditional SEO. So let's understand how Google works, how Google index the web pages, right? It does it in two waves. In the first wave, it acts like a normal crawler, right? It hits the HTTP, it hits the site with one HTTP request on in the response of that particular HTML, it draws all the all of the links in that HTML HTML right in the response. While in the second phase, however, you should note that in the first phase, it does not render the JavaScript, right? While in the second phase, what it does is it comes back to the site again with all of the rendering with our rendering resources required to render the JavaScript in the first place and then it renders the JavaScript complete and then it starts to call the website. So in the in the case of CSR, the client side rendering, if the Google comes to the in the first wave of the Google's Google's indexing, it will see this nothing, right? So why do Google needs to set process because more rendering resources, more monetary power, monetary cost, more electricity, more processing power, more cost, right? So Google now is talking to SSR, not and like leaving CSR behind. So what is isomorphic in the first place, right? You might make these kind of reactions when you listen to this isomorphic thing. Like what are you talking about? Is it something related to chemistry? Is it misspelled isotopes? So isomorphic apps are also known as JavaScript, universal JavaScript are those JavaScript which that code runs on both client and the server. Let me let me try and explain. So example, this is client and server clients initiate an HTTP request to server and server generates an initial view of the webpage, the initial HTML page and server response with the generated HTML view client renders HTML and then fetches the app bundle and all of the subsequent actions are handled by the client side itself. So you got both of the words, right? You got you got CSR as well and this is our approach together. Why do you use this approach? Initial page load performance is good. As you can see that initial page load performance in SSR is good. Why? Because in CSR, client sees nothing until the until the app just is with the bundle is fetched and it is rendered correctly, right? In the SSR, the initial page load performance is better than CSR. And it is actually invisible when your app is quite big, right? SEO, you get points on SEO and obviously the users using the low bandwidth like mobile users can get benefit from using this approach, right? So this is isomorphic app. Can I implement SSR in the project? Yes, you can. But so having all the configuration in one place like having all the configuration with HMR, SSR and all of the configuration you need an automatic code splitting and also including all the all the configurations takes time and it will have a big, big piece of part in your development time, right? And the time which will be left for developing the more business logic will be like will be less, right? You are spending more of the time to configuring your project rather than spending a time to time for your more business logic and more logic part. So this is a thing which actually is getting solved by next years. So there can be two approaches, right? If you are doing server-side rendering, one thing is that you need a dedicated server for server-side rendering which serves your react application and your backend logic, your backend server, right? They can be two different server in the first approach. They can be two different server, right? And you need some mechanism to communicate between these two servers, right? You have JWT tokens or you may you may have some other tokens to communicate the session between these two back and back and server and they both are both are on different origins. Also you need to manage them also. Another approach can be you it can be a single monolithic server where the react is a react application is served on the same server. Also your back end application using some proxy or exquisite. But both of these approaches takes time to configure in your react application which you and I don't have, right? So what's next finally? So next is a react framework for building server-side rendered applications which is which which has so you know you don't need to configure anything for getting started with node for next basically you you have all the configuration in need you need in the first place just start the start the development right away like you can you can have HMR SSR and all the configurations automatically code splitting also without no configuration you just start the development right away. So let's get started with next. So it's a very kind of hello world example. So you are installing react react dom and next with next with npm install and you are adding a script proper script property in the package organization. These are the script property next next build next start and I'm making a functional component inside this pages directory. So what's next day as does it all does that is all of the JavaScript files inside this pages directory. It makes a route automatically about these pages. So if I have a about.js inside pages directory automatically the about route will be created right. So if I'm making a slash index.js it is the home page. It's the slash route right. So this is a functional component I'm making that's index.js which is says which says welcome to next year's and you simply run the project and when you will see the output in the browser you should see the server side rendering works automatically when you check the page source and you don't have to do anything to configure with this. So next link is one of the maybe you can say analogous to react router when you are navigating from one page to another in next year's. So basically you are navigating from one page to another using next to the about page here about route here using using link will see this in the for the slides and the demo the demo later. What else can I just do it has automatic code splitting which means that it's a it's a property of a pack which says that all the necessary code only the necessary code which is required to render the current page current route is only sent nothing else all the unnecessary code are not sent to to the client side unless it is required. So how it is exactly works it's works like this. So for example this on clicking on this button another page is rendered like sign up is rendered for example let us say so while if you click this button and this page is actually made in next year's. So this is my like my professional worker. So when you click on this button you will notice this. So in the developer console you will notice that the code for sign up in JS is fetched on the client on the client side and usually and it it is automatically handled by next year's. You can also prefetch this page that you can define whether this code should should get prefetched in the abjs bundle and you don't you can write the prefetch as a proper as a prop in the link tag which is just which I just shown you so that you it can be prefetched this code can be prefetched rather than fetching this on the on demand. So you as you as you can see this code is fetched on demand right. So this is this. So this is done automatically by next year's. You don't need to configure anything for it for it. So benefits it saves a lot of time. It's easy to maintain. It's say it saves a lot of time like you can run to the development time. You can like write you write your main application logic faster like you can jump to the writing application logic faster than like you don't need to spend a lot of time in config configuring it is easy to maintain. The code is quite easy like like if you add the configurations all you need in the first place then it will be it will be more it will be more like kiosk thing and all and it will be easy to maintain if you if you switch to next year's and you get the both of the words like you get CSR and SSR like the main basic isomorphic app you're building and all the configuration in place. So let's see a short demo. So this is one of the repositories I've posted on this link. So you can you can check this link in my you can check out CS mother as a git repository and navigate to this repository. So in the pages directory you can see three of the pages. So this is about link about route will be automatically created and will be which will be rendered which is the home page and the post pages automatically and you can you should see this server.js right. So all your back in code happens to happens to be sit here here in the server.js. You can you can see the express server like you like you make you make a normal express server with all the all of the routes in place and and and the next js part also in this is thing it's automatically handled by this by the next property. So let's run this let's quickly run this I hope you can see the so let's go to it is already it's already running. So you can see the navigation part running here like this is the navigation part like you can see the navigation part running and you should also check out the page source and you should see that it is already rendered. So when Google comes to this page automatically it will index it right and you don't need to configure anything for that like I haven't I haven't wrote any of the configuration to like code to run this to make the SSR work or HMR work automatically it is working automatically like right. So you can refer to this this repository if you want to get started with next just like automatically you can get to study this also a bit about performance right. So one thing is that since in the client side code splitting works automatically right. So for example if your abjs bundle is of 10 mb 10 mb is quite far like it's if it's a 3 mb if the code splitting is working fine like you will you'll face a better performance in the client side right also and so all in all of the configuration in place you have everything with you to start with the to build a basic application you don't need to start up a start up with your react application. Yeah so so you might feel something like this now a bit of a boring talk or something. So a bit about me I'm a full stack at iopop you can search me with cs madhav and medium linked in our twitter questions.