The Perfect Mix of Static Hosting and SSR — Nuxt.js on Google Cloud

To statically generate your site, or use server-side rendering… That is the question. I propose a novel solution — do both from the same codebase with Nuxt.js and Google cloud 🚀

I’m starting a new project and, as every developer knows, that means time to refactor! The project is a modern, pay-for-use VPN service that puts the user in control and uses WireGuard under the hood. I don’t have a link to share yet, but I’ll update this article when I have something to show after Christmas. I’m pretty excited about it and want the web app to be on-point, so I started completely from scratch and tried something a little different.

My usual frontend stack is a server-side rendered Nuxt app on Google’s Cloud Run. It’s a solid setup that I’ve used a handful of times in production and has all of the lovely benefits of server-rendered modern web apps (eg. SEO, initial page speed, etc). And Google’s Cloud Run service is the perfect place to host — a fully managed server that runs my app in a Docker container that’s really easy to build and scales from zero to front-page-of-hacker-news and beyond.

There are just two problems:

• Cold starts are SLOW!
• The server generates the same static pages on each request.

I know cold starts are kind of a non-problem, especially for apps that get a lot of traffic, but if and when your app does go cold it can be quite frustrating. And as a developer, I want to show off my app as I build it, and waiting for a cold start is frankly embarrassing. I’d like to think that Google will solve this eventually by using a sprinkling more of AI magic to predict and learn when to keep your app warm but for now, and for me, the issue is real.

So I looked around at the ecosystem to try and see what direction the community was going and decided to dip my feet into static site generation. I was lured in by the promise of Netlify and the ease of static hosting. I was also inspired by the incredibly fast page load of another app that I’m collaborating on where another developer is statically generating the frontend.

static-site firebase nuxt

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in re...

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google...

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ In this video, I will show you how to Create database into #firebase console. Subscribe & Stay Connected! Thank You! ♥ #Fi...

ＬＩＫＥ | ＣＯＭＭＥＮＴ | ＳＨＡＲＥ | ＳＵＢＳＣＲＩＢＥ In this video, I will show you how to save employee information into firebase database. Subscribe & Stay Connected! Thank ...

Static code analysis is a method of debugging by examining source code before a program is run. It's done by analyzing a set of code against a set (or multiple sets) of coding rules. Static code analysis and static analysis are often used interchangeably, along with source code analysis.