Let’s talk about the pros and cons of server-side rendering
Welcome to part two of our video series on the topic of page speed and SEO. This time, I speak with Ainsley Clark, our Senior Full Stack Software Engineer (and creator of Reddico’s Verbis CMS) on the pros and cons of server-side rendering.
Below, I’ve summarised key takeaways from the questions I asked Ainsley. I’ve also provided timings for each section of the video, should you want to dig into the answers you’re most interested in.
01:00: What is server-side rendering and why is it important?
Ainsley says the importance of SSR needs to be contextualised within the topic of rendering and the process of rendering itself:
Rendering is the process of populating templates with HTML or text. This can come from APIs, databases, or CMSs.
This can happen both on the server-side (i.e. a virtual machine or computer running in the cloud populating rich data using HTML) or on the client side (the client’s browser).
05:05: What is the <noscript> fallback and why is it important?
08:12: What are the most common blockers in terms of SSR implementation?
There are of course a lot of surrounding factors around this, and each scenario and website will have their own set of potential barriers that may get in the way of SSR implementation. However, what are the most common blockers Ainsley has seen come up when it comes to getting SSR over the line?
The most common blocker for SSR implementation is often the tech stack that a company chooses to use and what libraries developers are using. Does this content rely on an external API or anything else for rendering markup, for example?
It’s also important to use a suitable CMS that allows SSR implementation, as this can often be a problem.
Libraries such as React and Vue are great for building back-end applications, though aren’t great for front-end applications that need to perform for SEO. Reliance on these can be blockers for SSR implementation.
12:25: How can developers implement SSR easily?
With some of these common blockers in mind, what are the best ways for developers to easily implement SSR? What does Ainsley see as the best methods to achieve SSR for websites?
Progressive enhancement is a great overarching strategy to have in place throughout this process. Progressive enhancement is a philosophy for web design and development that puts emphasis on content before anything else.
In essence, this means that the user is able to access the content of a web page before anything else.
With the aforementioned blockers in mind, this is something that needs to be considered from the very beginning, and this means using the right tech stack when starting a build.
For pre-existing websites, the use of <noscript> tags can help display content to search engines which resembles JS-generated content.