Universal/Isomorphic Web Apps on Google Cloud Run
Patrick Heneise
Building Solar Farm Data Infrastructure | Boosting Operations & Sales Efficiency | Empowering Teams through Innovative Software Solutions
TL;DR
In this article we’ll learn how to launch a JavaScript application on Google Cloud Run (fully managed) with:
- Server Side Rendering (SSR)
- TLS (managed by Google)
- Global Content Delivey Network (CDN)
- resources and services in the same network (no added network delays)
- No cold starts*
- No CORS (avoid preflight requests)
We’ll also demonstrate how to get close to dev/prod parity with a local development setup.
You can find all relevant configuration files and code example the Universal Apps on Cloud Run GitHub Repo.
The concept of universal/isomorphic apps is that the first page is rendered on the server and delivered to the client in plain HTML and CSS, while additional JavaScript is delivered after, to allow the “application like” usability known from Single Page Applications. By caching the rendered pages on the CDN, we aim for fast initial page load with low First Input Delay/Largest Contentful Paint (Web Vitals). By avoiding CORS preflight requests, we skip the additional OPTIONS request to the API which usually adds additional delay to each ajax request.
This article requires basic knowledge of N*xt.js and Node.js as we’ll be building on top of that.
(*) The min-instances setting is currently in Alpha and should be available in Beta soon, which allows to keep a certain number of instances running.
Introduction
Single Page Applications (SPA) are easy for developers and great for many things, but when it comes to web performance and search/SEO scores, Server Side Rendered (SSR) applications still perform much better.
For a recent project, we looked into Cloud Run as an easy-to-use, scalable infrastructure. We chose Nuxt.js and Vue.js for simplicty over Next.js and React.js. Data is delivered by a Node.js API. Next.js with SSR requires a build step and a web server, while the API also requires a separate environment. In this article we call them web and api services.
To achieve a fully automated deployment pipeline we use Google Cloud Build and Semantic Release to version and build Docker images based on our code on GitHub.
Google Cloud Run is an easy and reliable infrastructure for running Docker containers and they recently added Load Balancer and CDN support for the managed service, which means there is zero devops overhead on Kubernetes (k8s); everything is managed by Google. For advanced configurations they still offer Cloud Run for Anthos to screw and tweak with a custom Kubernetes config, but we wanted to focus on product development rather than infrastructure, and Cloud Run (managed) makes that possible.