React 19.3 Changes SSR Forever? New browser() API Explained

Guys, you know that React version 19.3 has been released this month in which you can see 2 new features which I have already covered Today, we will cover a new React Dome feature Which is your Browser API? So, what is it? I'll show you first. Today's video will be very interesting. because today finally I will tell you the difference. between CSR client-side rendering and server-side rendering and today for the first time I will install the React application. through Next.js and show you because today we are going to use server-side rendering So, I will show you an example. And then I will explain the problem. This is a simple example I have a text area I am writing my name here I have written Binod. You can see on the right-hand side You can see the name in the draft. You must be thinking What is the problem? The problem is bottom left in a red circle You can see a warning error. The moment I click on this one issue You can see that local storage is not defined How is this possible? How is local storage not defined? and we all know that the local storage falls under the Browser API but here Local storage is not defined basically at this point Don't worry, I will explain the code. but here local storage is not defined You must have experienced this issue in Next.js So, I will tell you server-side rendering What is happening in Next.js What does it mean? I will tell you and you will understand Why did this error occur? and how the Browser API will solve this issue in a jiffy At least you know I will tell you the reason. You will enjoy Understanding the browser So, let's start First of all, learn a simple thing CSR vs SSR Client-side rendering vs Server-side rendering You can see the entire example. in client-side rendering It is very simple Hey, did you guys ask for anything? What does the server do? It sends you an HTML cell and a JavaScript bundle like you made an application in React when you run npm run dev we are talking about After that So, what does the server do? It sends you an HTML cell and a JavaScript bundle When it reaches the browser It runs the JavaScript bundle. and then It renders the HTML code. in React So, your page is ready First, your JavaScript bundle runs then your HTML is rendered in the browser one by one That's why in CSR, you might feel A slight delay because The JavaScript bundle is running After that The HTML page is being Pasted one by one This is your CSR Now, in SSR when you run your React application What does the browser do? It renders your React code on the server means Your HTML is rendered on the server. then The complete HTML file is sent to the browser Along with that, you receive the JavaScript bundle. obviously Now, the browser has got HTML code Here, it was not like that. Here, only JavaScript runs first and then HTML Here, HTML is fully ready After that, hydration occurs Yes Finally, you got to hear the word hydration which means that in SSR the static HTML the complete HTML is rendered in the browser but JavaScript is not running Now, JavaScript is not running It's like a button with an on-click event. Now, when you obtain the static HTML There is no on-click JavaScript. in it So, hydration occurs which means the content of JavaScript in the static HTML the content of JavaScript the part, the code is attached one by one Now, hydration is in your mind First of all, when we talk about SSR You get to see this So, hydration means that in your HTML file the JavaScript code is attached one by one Hydration means Add water, add life Make your static HTML dynamic Dynamic word usage will not be correct but add the part of JavaScript so that the user can interact Hydrate Water levels are low Static HTML is the same JavaScript brings life This is the difference So, you've learned the difference between CSR and SSR Now, I will tell you why are we getting not defined Runtime error Let me tell you that I am installing React through Next.js Keep this in mind I am not using BIT BIT has client-side rendering. Next.js has server-side rendering. Next.js and React version 19.3 is mandatory Otherwise, Reacting with BIT will not work. This is my code It is a simple code. It is a text area Whatever the user is writing I am saving it automatically on my localhost I'm saving it in local storage. If I write anything here You can see it here This is simple Whatever I am writing I'm saving it in local storage. Now, everything is fine. Still, I got this error because Next.js has SSR server-side rendering In server-side rendering, the server generates the complete HTML of a web page and sends it to the client's browser. This process occurs before the page is displayed, allowing the browser to render the content immediately without waiting for JavaScript to load and execute. The server processes the request, fetches any necessary data, and renders the page using a template engine or framework (such as React, Angular, or Vue with server-side rendering support). Once the fully rendered HTML is sent to the client, the browser can display it right away, improving initial load time and enhancing SEO, as search engines can easily crawl the pre-rendered content. After the initial page load, the client-side JavaScript may take over to enable interactivity, but the initial view is already fully formed and visible. When you run it You get full HTML You get static HTML Now, You will enjoy This local storage This is yours browser API This is yours browser API You can see it here When local storage Checked this code one by one So that it can make HTML It saw local storage The server got scared. How can I convert local storage? Why? Because local storage is the browser's API There is no local storage on the server. It's stuck. You have to make chicken biryani. and you got paneer Chicken biryani will not be prepared. When paneer comes There is no local storage in SSR There is no local storage on the server. It's stuck. I can't do anything. Simple logic There is no local storage on the server. You get local storage in the browser It gave me an error. Local storage is not defined I am receiving the output Even if it failed It had to run in the browser. Browser Got the data from local storage and showed it to you This is the problem We came to know the problem. How to solve it So that we don't encounter this error For that Your browser API is introduced in version 19.3 One thing You have to import it. from react-dom This is react-feature and this is react-dom This is react-feature and this is react-dom This is react-feature It means During server-side rendering There is a browser's API which is not available on the server What to do? The browser says Do one thing If something like this happens There is nothing to do. You have to use browser's API and call it in use hook That's all you have to do Add this line The code is the same. There is no difference in the code. We are using Next.js That is why you can see use client So that I can make it a client component That's why the hook will work. It's a server component. I just added one line I'm saving it. The code is the same. I have called it You can remove it. By the way I am going to refresh. My error has disappeared. This is your browser's API This is it There is a problem There is something in the server. which is not available How to convert it to HTML? Do you know what the browser's API says? The browser's API says During SSR The server is checking Let's convert it into HTML Line by line During SSR It reaches this line That's it It understands If The browser's API is seen It means Listen server You don't have to render this component Instead Suspend this component And nearest Fallback See here Load nearest fallback And forward Browser After that Browser It will render it. And show you There is nothing. See here The server arrives Request Server starts SSR React reaches this line Component Suspend intentionally Intentionally It is suspending. React finds The nearest suspense Fallback is rendered You will receive the value. Component Keep it HTML is safe Served to browser HTML is safely served to the browser The browser will load. Hydration Attaching JavaScript code in HTML The browser now renders Component normally Local storage is available Text area Drop Your work is done Before server Local storage Why bother Don't do anything The browser will see That's all Always use Use hook It will work. I have told you Use hook By default You can't use it You can use it I will tell you Already You can see React finally 19.3 Fragment change Today is our 3rd video You can see UI before API You'll get it. You can see 19.2 I hope You know this feature You know CSR vs SSR That's all I hope You like the video If you want to learn live React You can see Live reaction classes You can enroll. Link in description If you like Like Share Target 8 Lakh Subscribers Thank you Be careful