With the advent of smartphones and mobile applications, users are used to an increasingly interactive experience. We have come to expect a smooth user interface without waiting for pages to load / usability issues. What we are seeing is the future of software development in 2020 and beyond. Websites are increasingly developing into Single Page Applications (SPAs) or Progressive Web Apps (PWAs).These websites function a lot like an app but retain the benefits of a website. Gmail and Trello are two examples of websites that feel more like a native application.
Do you need Server-Side Rendering? Prerendering? Neither?
If you‘re still in the planning stages of your application, now is time to make these important infrastructure decisions. Here’s a summary of what you need and where:
- Your whole website is generated with JavaScript, including the public content of it. SEO is an important part of your marketing strategy. There are dynamic parts of your website to the point that you would not know all your page routes beforehand: You need server-side rendering.
- Your whole website is generated with JavaScript, including the public content of it. SEO is an important part of your marketing strategy. Your website is relatively static, like a blog: Prerender the whole website and serve static html pages instead.
- Your whole website is generated with JavaScript, including the public content of it. SEO is an important part of your marketing strategy. A few marketing pages will need SEO, as well as social media cards: Prerender only the few marketing pages.
- You have a business where the only parts that are generated with JavaScript are the ones search engines would not have access to, behind a login page: You should be fine assuming your page load time isn’t too excessive.
How a SPA works
At its core, a single page application is an application in a single HTML file. It’s typically built with a JavaScript framework such as VueJS, ReactJS, AngularJS, etc. There are a lot of options when it comes to writing a single page application. These frameworks use JavaScript to manipulate the HTML displayed to the user. Instead of requesting a new HTML file, a JavaScript framework will reorganize the current page to simulate a new view.
Why Server-Side Rendering
The web was not made with SPAs in mind. Although it’s great for creating an incredibly smooth user interface, it has disadvantages compared to a multi-page website.
SEO will suffer
Search engines play a huge part of discovery for the web. If it’s an important part of your websites marketing plan, you need SSR.
Not all search engines will run JavaScript, but without it a SPA will looks like a blank page. A SPA will under rank in these search engines vs a static page. Google and Bing can run JavaScript and index synchronous SPAs but it won’t wait until all the asyncronous scripts run. You’re out of luck if your website requires an Ajax request before it loads.
Incompatibility with Social Media
Have you ever seen those cool social media cards that pop up when you share your website? These are set in the head tag of your website.
Because a SPA is a single page, you can only set the head tag to one consistent thing regardless of what page you’re on. While you can manipulate the head tag with JavaScript, the head tag will be read long before JavaScript is loaded. Whatever change you make will not have any effect by that point.
Long First Page Loads
With SPAs, everything your web app needs is downloaded on the first page load. This can drastically impact the first page load time. However, all subsequent requests will be very fast. Potentially faster than loading static HTML.
There is plenty of room for smart code design to minimize the impact of this first page load problem, but there will always be an extra wait.
What SSR does
To get around some of the disadvantages to web apps, SSR will run the JavaScript application on a server instead of client side. What is sent to the client is the same website, but a static version of it in plain HTML. This happens dynamically when the page is requested, and is cached for later requests. Of course, this means that you must actually have a server capable of running backend code such as NodeJS if you don’t already. This can be a real hassle if your set up is only free static hosting.
SSR vs Prerendering
If you have dynamic content, you will need to generate HTML on the fly with Server-Side Rendering. If your content is blog-like in that you know all the pages that need to be rendered, you can do Prerendering. One of the biggest strengths of SPA is that they don’t require a server. There is a ton of free file hosting out there and that is all you need to host a SPA. This is where Prerendering comes in to play.
Prerendering does the same thing as server-side rendering but it is done all at once beforehand on your own computer. It’s like a static website generator. The resulting HTML files can be uploaded to your file host and you don’t need a server.
Hosted vs Self-Hosted
Every major JavaScript application framework has their own set of plugins:
- VueJS -> NuxtJS
- ReactJS -> NextJS
- AngularJS -> Angular Universal
Self-Hosted
If you are in the process of building your SPA, its best that you start working with these libraries early on. If all you need is a few prerendered pages, you might be fine to just use a library for those. You can simply plan on adding it as part of your build step along. You can even integrate it with webpack. If you are using a lot of dynamic features and server side rendering you will also need to factor in the cost of a server.
Hosted
Hosted solutions like Unirender.io and Prerender.io and will save you time and potentially money.
If you already have a SPA and you have dynamic features in your web app, adding a SSR framework to your application takes time to implement. At a bare minimum, it will increases the complexity of the application. It’s yet another thing that you must think about and maintain. It’s not difficult but it will require developer time.
In contrast, you can set up a hosted solution in 5 minutes and forget it. We use headless chrome to render your website, which means that it will work with any framework or stack that you’re using.
Pricewise, a hosted solution might still be best. If you have a small side project, or you are just testing stuff out it might not make sense to spend the time and money for a server. We have a free tier just for these use cases.