As a developer who builds websites, you're going to have to make a lot of decisions on behalf of your client for what kind of technologies to use. If your client wants custom ecommerce website development, you can expect a whole different set of requirements compared to corporate website design. Although developers have access to more tools than ever, it still isn't always obvious which ones to choose. You may have heard terms like "single page app"(SPA), "static site generation" (ssg) or "server-side rendering" (ssr), "edge delivery networks," and a whole lot more — today, we're going to run you through these so you can make the savvy choice as a custom website developer.
Single Page App (SPA)
For new web developers, this is the most broadly straightforward way to create a website. When using a language like React or Vue, you can bundle your files into plain Javascript with the 'build' command. These files can then be hosted on any number of hosting sites, like Hostinger, DigitalOcean, Cloudflare, and more.
The issue with this method is that the site technically doesn't exist in its complete form until a user has loaded it, since it sends Javascript to the visitor's browser. This is the reason that hosting it can be free or nearly so, but it entails some problems: primarily, the bots that search engines used to index websites, called "crawlers", can't use Javascript very well. This is a change from recent years when they couldn't use it at all, but even now they don't work perfectly. When designing websites, we have to keep in mind certain best practices for SEO optimization, and making things difficult for crawlers is going to keep them, and by extension new visitors, away from your site. The internet is more like an ocean these days, and good SEO strategy is what keeps a website from sinking to the bottom.
The languages and frameworks that make SPA's such efficient tools can be still be leveraged to make websites, but we have to jump through a couple hoops.
Pros of Single-Page Applications:
- Easy: SPA's are in a word, easy, once you know their architecture. Provisioning and deploying them is usually a matter of finding a place to copy and paste your compiled files, or connecting to a Git deployment.
- Lightweight: If you're using a framework like Vue, its easy to mount an SPA on any HTML element on any kind of page.
- Lots of Modules: Frameworks like React have enormous quantities of modules that you can use for just about any kind of functionality.
- Component Driven: SPA's let you harnass component architecture, which is vastly superior to static HTML.
Cons of Single-Page Applications:
- Bad for SEO: Not only do crawlers have a hard time exectuing lots of Javascript, having just one page isn't great for exploring your site through a search engine.
- No server state: You're going to be relying on external analytics if you don't have any means of storing data, like a server or durable object. There are always cloud functions, however.
- Harder to tweak: Although they're easier to provision, SPA's don't have much room for adding functionality to a live website, because their files are precompiled before they go to the service.
Server-Side Rendering (SSR)
If you are building a website that might have a hundred pages or more, you should definitely consider converting to SSR, but it also works quite well for small-business ecommerce websites, or for local business website design. Unfortunately, even today it isn't entirely simple. Server-side rendering means keeping a server running, either locally or in the cloud, and the server compiles a completed version of your website and sends it to visitors when they come to your website. When a user interacts with something on the page, it sends a request to the server.
This kind of format is extremely useful for guaranteeing page speed and a consistent user experience, since not every visitor's computer and internet connections are the same. Doing 90% of the legwork on your own server, particularly a cloud server, allows you to easily scale to the amount of traffic the website gets.
After the website is delivered to the visitor, part of the code is "hydrated", meaning that it synchronizes visitor's browser and on the virtual version that lives on the server, so that when the user makes an action it happens in both verions. The difficulty of SSR is making sure that these two versions are the same, as well as making sure that no two users' versions mix together.
Pros of Server-Side Rendering:
- Speed: Rendering server-side means that your website loads as fast as your server can load it.
- SEO: Having a fast website is imperative for good SEO. Also, having control over the server allows some fine-grained SEO control.
- Security: Server-side rendering is a must for ecommerce sites, which require an extra layer of security. By using the server from the beginning of the visitor's connection with the client, you don't need to perform a hand-off of data that could broaden your surface of attack.
Cons of Server-Side Rendering:
- Complexity: Although there are some excellent tools (like Nuxt) available for server-side rendering, it is nevertheless more complex than hosting static files. You'll need to use special modules made for SSR, like Swiper-SSR for example.
- Management: With SSR, you are invariably managing a server of some kind, whether that's through Heroku or another provider. This can be an extra layer of obfuscation between the developer and the code base.
Static Site Generation & Edge Delivery (SSG)
The main alternative(s) to server-side rendering are static site generation and edge delivery, which are in a way two versions of the same thing. We talked before about single page applications, and how crawlers aren't good at reading websites because they can't run Javascript well. But what if you could simply compile most of the Javascript ahead of time, leaving just enough for animations and user interactivity?
This is what's called static site generation (SSG), and under the hood it operates a lot like server-side rendering except without using a dedicated server, instead using a fraction of the computing power on something like a content delivery network (CDN). For this reason, SSG is usually better for websites that don't expect to receive a ton — we're talking millions of visitors per day — of traffic.
However, there is another, much newer solution that isn't currently receiving much attention, and that's edge delivery. Some CDN's like Cloudflare have so many network centers across the world that they can deploy content everywhere. Through Cloudflare Pages, you can deploy an SSR app (like Nuxt) to run as an SSG app, which means you get all the benefits of SSR with less complexity. Deploying to Cloudflare is ridiculously easy, and somehow, it's free (and this is something we at Pleiades simply do not understand).
Pros of SSG and Edge Delivery
- Options: You have a few options for this format, including Jekyll, Vercel, Netlify, and Cloudflare Pages.
- Speed: Edge delivery is blazingly fast, because they cache your website in thousands of locations, so its always near the user.
- SEO: SSG gets around the 'crawler problem' without needing a server, and in many cases it can be faster than SSR. 👍!
Cons of SSG and Edge Delivery
- Server support: Although you may have access to different "workers" (bots that can run scripts from events) and plugins, without a server your site can't effectively perform ecommerce and other tasks which require heavy computation.
- Language Support: Not every framework works easily with edge delivery. As a rule of thumb, if the language doesn't build to pure, compiled CSS and Javascript, you're going to have a bigger job configuring development. Looking at you, Angular.
Static site generation and server side rendering are excellent technologies for developing websites. If you want to know where to begin with either, we would direct you to Nuxt 3, which is new as of early 2023. Nuxt 3 has built-in the option to switch to pre-render mode, which is basically SSG. You can also selectively prerender certain pages, which is useful for ones that don't change often, or which have a lot of Javscript. You can also use this trick to speed up landing on your home page.
If you're considering a website built with modern reactive frameworks, then consider SSG or SSR for the sake of quality SEO and for speed.