The server renders your React app to an HTML string, wraps it inside of a standard HTML doc ( DOCTYPE and all), and sends the whole thing back as a response A user types your URL into their web browser and hits enter We'll see how, by minimizing the tradeoffs of each approach, we can improve the performance of our app with server-rendering while maintaining the "snappy" feel that SPAs enable. In this post, we'll take everything we've learned from the history of the web and apply it to building a modern, server-rendered React application. By bundling the entire application into a single payload, the entire JavaScript ecosystem became numb to the downsides of large bundles. However, like all nice things, SPAs weren't without their tradeoffs. This concept even had its own name, "Single Page Applications" or SPAs, and it was popularized by JavaScript frameworks like Angular.js and React. The idea was simple, instead of consulting the server for every new page and then sprinkling in dynamic content with Ajax, what if we got everything we needed from the server on the initial request? This would make the whole app, especially route transitions, feel much quicker since we'd already have everything locally needed to render the new page without consulting a server. This ushered in the next era of rich, dynamically generated web apps - the most famous being Google Maps and Gmail.Ībout a decade later, another shift in the way we build web applications took place. AJAX, which stands for "Asynchronous JavaScript and XML", allowed browsers to send and receive messages from the server using JavaScript without needing to reload the page. Then in 1999 AJAX was invented to aid this problem. That meant sending a request to the server, waiting for the server to generate the HTML, waiting for the request to come back, and then displaying the new HTML content. The problem was every change in the page's content required a full-page refresh. Server rendering changed the game, but it wasn't without it's tradeoffs. This one innovation, which we now call server rendering, is what sparked the Web 2.0 era of the late 1990s and early 2000s. Cookies, authentication headers, and form data could be used to tell the difference between requests, letting the browser generate different HTML for each request.
The idea was simple - every time a browser requests a page, generate the HTML on-the-fly. Not long after that, someone had the great idea to pre-process the HTML before it was sent to the client. There was no dynamic content, and there definitely wasn't any JavaScript.
When a browser made a request to a server for a particular page, the server would find the HTML file stored on its hard disk for that page and send it back to the browser. In the beginning of the web, there were just documents with links between them. Check your versionThis post assumes you're using React Router v6.
0 kommentar(er)
