Note: This post assumes you have a working knowledge of Storyblok and Nuxt. If you’re just dipping your toes in but want to build a full blown website, this article is a great starting point.
If you’re like me, you’ve stumbled around wanting so badly to find a path to a ‘simple website’.
These things are never simple, though, especially when you have thousands of pages. And dynamic content. And multiple editors. And multiple languages. And marketers breathing down your neck about SEO. And presumably servers to manage. And devops to consider. And a pipe dream of Continuous Integration…
And…
Remind me why we do any of this again?
Have your cake and eat it too.
Today I’ll show you a painless and simple way to have the best of all worlds. We’ll build and package our Nuxt project as a Single Page App (instead of a Server-Side Rendered app or static pages), and then we’ll use Netlify’s Prerendering service to ensure that crawlers like Googlebot can accurately index the true content on all our pages.
How Prerendering works According to Netlify:
When a request hits one of our CDN servers, our CDN software determines if it’s a prerendering request from a crawler. If prerendering is enabled for your site, our cache servers will contact the prerendering backend straight from our CDN nodes instead of serving the normal cached request.
We’ll get:
- the SEO boost SSR or static pages provide
- the speed and dynamism of a SPA
We won’t get:
- to finagle CLIs or cloud ‘servers’ — with or without the quotes
- to wait for static pages to generate (can take >15 minutes for sites with thousands of pages, if they don’t time out during build)
Awesome. Here. We. Go.
Step 1 - Sign up:
Sign up for accounts on Storyblok and Netlify.
Both have incredible free plans, and depending on your project, you may not even need to pay for a subscription anywhere.
Step 2 - Create a Nuxt project:
Create a project Nuxt project if you don’t already have one and connect it with Storyblok (again see this article ). Admittedly, this is a whopper of a step, but it’s the one we want to own as developers. We’ll hop over it since other articles address it ¯_(ツ)_/¯
Step 3 - Connect code → Netlify:
Hook your project up to your favorite git provider (Github, Gitlab, Bitbucket) and create a new project in Netlify. You can connect your Netlify project with your git repo, and it will redeploy on code change. ItJustWorks™
Default Nuxt projects should use: Publish Directory dist and Build command npm run build
Step 4 - Run Nuxt as an SPA:
This one is pretty straightforward. You’ll just make a one line change in nuxt.config.js and set the mode property to 'spa'
Step 5 - Enable Prerendering in Netlify
This is a one click too. Back in the Netlify app under Build & deploy > Post processing, find and enable Prerendering.
Step 6 - There is no step 6.
Conclusion:
We’re done. We’re now capable of handling large sites with an SPA that Netlify with Prerender for bots on our behalf. In 2019, it doesn’t have to be difficult to manage large projects. The actual DevOps configuration here was <5 minutes. Here’s to awesome services that were made for one another 🎉
Posted originally on Medium.com