![]() ![]() 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 Comments
Leave a Reply. |