As more companies embrace digital initiatives, businesses must work hard to not only find an audience for their site, but keep users engaged and interested. However, competing for clicks is becoming increasingly challenging, leaving little room for poor performance in speed and SEO and furthering the importance of social media in driving traffic and gaining conversions. That’s why tools like static site generation (SSG) and server-side rendering (SSR) are gaining (or in the case of SSR, regaining) popularity as a way to optimize performance, SEO, social media sharing, and other business drivers.
Learning about SSR and SSG and when to use them can help digital businesses weigh every possible option for enhancing the user experience and boosting their bottom line. This post will explain the basics of SSR and SSG, their pros and cons, and the various factors businesses should consider when determining how to render web pages.
What Are SSR and SSG?
- In SSR, a client requests content, dynamic HTML is pre-rendered on the server, and the page is delivered to the client’s browser.
- In SSG, static HTML is rendered at build time from templates and content provided by the developer, then delivered upon request by the client.
How Does Rendering Impact Websites’ Bottom Line?
Making the right choice between SSR, SSG, and CSR can play a huge part in one of the biggest determinants of organic traffic: SEO rankings. Statistics cited in a 2017 Forbes blog post stated that the first page of search engine results can capture as much as 92% of web traffic, and only 15% of users will click on an ad or try a different search if they are unsatisfied with first page results. The algorithms that determine SEO rankings take into account not only the quality and relevance of content, but factors like speed, security, mobile friendliness, and most importantly, crawlability. As noted in a blog post from the web traffic statistic site Alexa, “If bots can’t crawl it, they can’t index it, and that means your site won’t appear in search results.”
In addition, CSR does not generate accurate link previews—a real problem for sites that rely on social media sharing to drive traffic. When links are shared on social media, a preview should appear with a picture and title to draw users into the site. These previews are generated by crawlers from social media sites that scan HTML for meta tags describing how the preview should look. However, with client-side rendering, a blank HTML file will be sent from the server, resulting in a generic preview that is the same for every page on the site or no preview at all, making the link less enticing to viewers.
Given the high expectations of today’s users, even small differences in page speed can have a big impact on user interaction. Deloitte’s 2020 report Milliseconds Make Millions found that a 0.1s improvement in mobile speed yielded improvements in conversions, bounce rates, customer engagement, and order size across multiple industries. Furthermore, it stated that slow sites made over 40% of e-commerce users less likely to make a purchase, and over 30% less likely to return to the site.
While the need for speed is obvious to most site owners, what constitutes page speed is a bit more complicated. Device type, user location, Internet connection, and network conditions all play a role in user-experienced speed, resulting in metrics that can vary significantly from user to user, especially when rendering is done on the client side. Furthermore, speed can actually be broken down into multiple subcategories that reflect not only how quickly users can view content, but the type of content they can view, whether they can interact with it, and the time it takes for server-side processes to initiate. These metrics include:
- TTFB, or Time to First Byte: the time between requesting a page and the first byte loaded by a server or other network resource;
- FP, or First Paint: the time it takes for any pixel to load on a user’s screen after requesting a webpage;
- FCP, or First Contentful Paint: the time it takes for any element of the page’s requested content to load on a user’s screen; and
- TTI, or Time To Interactive: the time from when a page starts loading to when it can reliably react to user input.
Although client-side rendering has a fast TTFB, FCP and TTI can take a long time, a problem that is compounded for sites with a lot of dynamic content or API calls, and users with a poor Internet connection. As a result, mobile experiences will suffer and impatient users may navigate away from the web page before interacting with or even viewing the content they requested.
What Are the Pros and Cons of SSR and SSG?
Although CSR provides a fast TTFB and great flexibility for web applications, sites that rely on SEO, social media sharing, and mobile users for traffic may want to consider a different rendering method. Whether SSR or SSG is better for your site depends largely on the site’s specific requirements. As with every web technology, there are pros and cons to both methods.
Although SSR is an older rendering method than CSR, it has recently gained renewed popularity. In addition to being better for SEO and social media, SSR leverages the reliable Internet connection of the server to render most of the site’s content, resulting in a faster FCP, especially for users with poor connectivity. Content on server-rendered sites is also as up-to-date as possible, making SSR great for both dynamic sites and sites that refresh during user sessions, such as news sites.
Pros of SSR:
- Social media friendly
- SEO friendly
- Fast FCP and FP
- Up-to-date content
Cons of SSR:
- Slow TTFB
- Server-intensive workloads
- Can’t be cached by traditional CDNs
- Navigating across a site is slow without universal rendering
- TTI is longer than FTP with universal rendering
Static site generation is another alternative to CSR that may seem like a return to older development methods, but recent improvements to SSGs are making them an increasingly popular option. While updating statically generated sites was once a cumbersome task, automation has significantly eased this maintenance burden. New tools like NextJS and GatsbyJS allow developers to add more client-rich functionality to sites, and today’s wide variety of SSGs support many different languages and frameworks. And generating at build time produces incredibly fast load times, making SSGs ideal for keeping up with the high performance expectations of today’s users. Finally, SSGs do not rely on databases, improving their security and allowing them to live entirely on CDNs for massive scalability during performance spikes.
Although there are clear advantages to SSG, rendering at build time does present some problems. It is not a good choice for personalized sites, since content is generated before users request it. Depending on how a site caches and purges content, it may not always be up to date. Finally, individual HTML files must be generated for every URL on a site with each site build, so a site with thousands of pages will have very slow build speeds, making SSG an impractical choice.
Pros of SSG:
- Fast load times
- Social media friendly
- SEO friendly
- Mobile friendly
Cons of SSG:
- Problematic for sites with many pages
- No personalization
- Content may be stale
SSR and SSG with Azion
Changes in user habits and development techniques have renewed interest in SSR and SSG as alternatives to client-side rendering. And while rendering choice will always involve some tradeoffs in terms of pros and cons, Azion’s Edge Platform can minimize the drawbacks of SSG and SSR.
Developers can reduce the server-intensive workloads of SSR with Azion’s Edge Functions, which allow pages to pre-render on the nearest edge node before sending them across to a requesting client. The power of Azion’s Edge Caching is a force multiplier when it comes to delivering content quickly through dynamic caching for faster load times. In addition, our serverless computing model also reduces costs and usage by executing workloads only when they are requested and charging on a per-use basis.
Azion customers using SSG can not only enjoy the performance and cost benefits of caching their content on the edge, but choose from a variety of options for caching and purging content to ensure it is as up-to-date as possible. To learn more about Edge Application and Edge Caching, check out these blogposts and see if Azion’s products are right for your website.