I'm a lead consultant and tech tinkerer at ThoughtWorks. I started my career 15 years ago as an electronics engineer but quickly switched to software development as the co-founder of a successful IoT startup in Colombia, and since then have been involved in multiple ventures. During the last 5 years, I've been studying the role of technology as an enabler for innovation and worked as a developer and tech lead for cross-functional teams in diverse industries.
Serverless for frontend? Yes. Solutions can be good, fast or cheap but not all three things at the same time. At least that’s what the “Iron Triangle” of project management dictates. However, to survive in today’s digital economy, we need it fast, cheap, and good.
Serverless architectures help us to take care of fast and cheap by providing fully managed infrastructure and services with on-demand pricing models, so we can focus on the third: good. In the digital world, being good means a great UX (easy, intuitive and fast). Single page applications (SPA) have helped teams to get closer to this goal by bringing the navigation to the client-side and avoiding page refreshes, but as the application grows and requires to fetch more data from the server the performance drops affecting the user experience. How do we solve this problem?
Server-side rendering (SSR) is a technique to render JavaScript applications in the server, providing a faster first-time load and improving SEO. If we also include data fetching in the process, it will dramatically improve the speed, hence the user experience. However, rendering on the server could become a bottleneck under heavy load for bigger and more complex applications. Serverless compute platforms solve this problem by scaling up the SSR process in a cheap and efficient manner. In this presentation, you will see an example of a server-side rendered React application with server data-fetching using Next.js and Apollo (GraphQL) deployed onto a serverless platform (ZEIT). We will profile its performance and compare it to the same version of the app rendering in the client.