Zero to one serverless-side rendering with AWS Lambda and AWS Amplify. CSR and SSR each have their own benefits and trade-offs, but you can get the best of both worlds by using isomorphic JavaScript with AWS Lambda and Amplify.
Server-side rendering, or SSR, is a phrase that you hear often in the frontend development community.
At the most basic level, server-side rendering is exactly what it describes: rendering applications on the server. You navigate to a website, it makes a request to the server, it renders some HTML, and you get the fully rendered result back in your browser. Fairly straightforward. You may be asking yourself why the community even has a buzzword for this.
Before the rise of rich and dynamic web applications that relied heavily on JavaScript and jQuery, essentially all web applications were server-rendered. PHP, WordPress, and even just basic HTML sites are examples of this.
When you visit a page on one of these sites, you get back all the HTML — data and all. If you click a link, the browser will make another request to the server. Following the response, the browser will refresh and render the next page from the ground up. This approach works well, and it has for years; browsers are spectacularly fast at rendering static HTML. What has changed?
Since the turn of the century, JavaScript usage has gone from a little sprinkle here and there for webpage interactivity to the undisputed language of choice on the web. We are constantly shipping more logic and JavaScript to the browser.
Single-page frameworks like React and Vue have ushered in this new era of dynamic, complex, data-driven client-rendered web applications. These SPAs differ from server-rendered applications because they do not fetch fully rendered content complete with data from the server before rendering on the screen.
Client-side-rendered applications render their content in the browser using JavaScript. Rather than fetching all of the content from the server, they simply fetch a barebones HTML page with no body content and render all the content inside using JavaScript.
The benefit of this is that you avoid the full page refreshes that happen with fully server-rendered applications, which can be a little jarring for the user. Single-page client-rendered apps will update content on your screen, fetch data from APIs, and update right in front of you without any kind of page refresh whatsoever. This characteristic is what makes modern web applications feel snappy and “native” as you interact with them.
#javascript #aws #react #cloud #developer
