In this article, you will learn the best ways to take advantage of server-side rendering within a VOLT Store. Server-side rendering means your site will be loaded by VOLT before it is delivered to the customer, improving page speed and SEO.
Server-side rendering is when something on a website is built and displayed (rendered) by the server, instead of by the client (the web browser) that is accessing the server. Traditional websites, containing just HTML and CSS files, are considered to be server-side rendered, as the browser knows exactly how to layout the webpage when it is received from the server.
However, newer websites built using JavaScript frameworks such as React or Angular frequently employ client-side rendering, where the web browser is responsible for laying out and displaying the webpage. When JavaScript is necessary for the layout of the page, then the website is considered to be client-side rendered. Since ecommerce stores are dynamic and rely on a database of products, they frequently employ client-side rendering, but that can mean a slow website experience for users.
The best ecommerce sites make use of server-side rendering instead of client-side rendering. Unfortunately, that can mean extra work for you as a developer. All VOLT sites use server-side rendering to load, instead of client-side rendering, even though VOLT is built on top of the React framework. In other words, VOLT has done the hard work of providing server-side rendering out-of-the-box, with no additional configuration needed. This helps VOLT offer its blazing-fast page speed, which helps improve your customers’ experience and increases your sales.
Server-side rendering means that the website that VOLT sends to the web browser is all ready to be displayed, without the need for JavaScript to process or load additional data. This doesn’t mean that your website can’t have dynamic effects, like adding items to a shopping cart. Instead, server-side rendering improves the initial page loading time and user experience.
In addition to helping page speed, server-side rendering provides search engine optimization (SEO), helping improve your search ranking on Google and other search engines. Client-side rendered websites may have an SEO penalty from Google, particularly if they use the app shell model, where the initial HTML does not contain the actual content for the site. Server-side rendered sites, like the VOLT Store, have already generated the HTML for the site before that HTML is sent to the client (the customer’s web browser).
You may also sometimes see the term static rendering used to differentiate traditional websites (with a pre-generated HTML file for each webpage) from server-side rendering. Some server-side rendering tools can also provide static rendering, usually in terms of a cache or a mandatory “build” step — as is the case with frameworks like Gatsby or Jekyll.
The difference between server-side rendering and static rendering is usually negligible, as long as the server is sufficiently powerful that the server-side rendering does not take long. On the other hand, server-side rendering is much better than client-side rendering, because the web browser is much slower than a web server. This is especially true for web browsers on mobile devices, which have less powerful CPUs. However, static rendering offers only a slight speed improvement over server-side rendering.
VOLT uses server-side rendering, not static rendering. Server-side rendering is a great option for ecommerce stores, because changes to your VOLT Store are available to customers immediately, without requiring the separate build step that would be needed with static rendering.
As mentioned, all VOLT sites use server-side rendering to help your ecommerce store load quickly. However, for developers using Element to build custom Blocks for the VOLT store, the rest of this article will help you make the best use of server-side rendering with VOLT.
First, you will learn about querying data, such as making a request to an API, using server-side code in VOLT. Previous articles have covered embedding Tweets, Instagram Posts, or both using server-side requests.
Then, you will learn about making client-side requests for data. Despite the advantages of server-side rendering, sometimes you need to request additional data after a page loads. In those cases, you will need to employ client-side rendering.
If you need to query any data to feed into your Block, make the request in the /src/getDataProps.js file. This is helpful for querying Volt Store data using the Element SDK or requesting data from a third-party API, such as a blog. Any requests for data from the /src/getDataProps.js file are performed on the server, and anything returned by the getDataProps function is then passed into your block as props via the data key.
The getDataProps function accepts two arguments: the utils provided by the SDK and the Block's configured props. This lets you use the Block’s props to configure the requested data, which will happen as server-side rendering before the Block is sent to the web browser.
For example, in the previous articles on using the oEmbed format to embed Tweets and Instagram posts, the URL for the social media post is configured as a prop. The HTML code to embed social media post itself is returned to the Block as part of the data prop (i.e. props.data in the /src/Block.js file).
If you need to query additional data once the page has loaded — for example, if a user clicks to load more results — most of the SDK utils are also passed into your Block props using the utils key.
“In Block.js these methods are available via props (for example: props.seo.setTitle()). In getDataProps, they are passed as part of utils, which is how we will reference them in this document.” —Element Platform Documentation for Block Utils
In addition, you can reference props.client in the /src/Block.js file to get access to the same SDK utils as those referenced as utils.client in the /src/getDataProps.js file. This means that, when necessary, you can use client-side rendering to query the VOLT Store’s products or request data from a third-party API.
If you would prefer, you could avoid needing to make a client-side data request by loading all the data you need in advance, and then only displaying it when needed. Of course, this is a trade-off — loading all the data before you need it makes the page load slower, but it will display the additional data more quickly. When you are not sure if a user is going to need additional data, sometimes you want to client-side render that data with a later request, which is called lazy loading.
A lazy loading (or “infinite scroll”) strategy does not request more data until the client requests it. With lazy loading, images or additional data are not downloaded until the user actually needs them. A previous article specifically discussed lazy loading of images for VOLT, which happens automatically and is part of what helps the VOLT Store load quickly.
them. A previous article specifically discussed lazy loading of images for VOLT, which happens automatically and is part of what helps the VOLT Store load quickly.
For most use cases, the best solution will be to request some data at first with a server-side request, then request additional data when necessary. As an example, you might have a custom Block that displays recent blog posts (from a WordPress site) or Tweets. You would configure the /src/getDataProps.js file to set up server-side rendering for the initial set of data. Then, if necessary, you would configure the /src/Block.js file to set up client-side rendering for additional data requested by the user.
VOLT uses server-side rendering out of the box, meaning your ecommerce store will load much quicker and have better SEO than sites that use client-side rendering. You don’t need to do anything special to set up server-side rendering for your VOLT Store, but there are a few things you should be aware of when you are developing custom Blocks for VOLT using Element.
When you are developing for VOLT, you should use the /src/getDataProps.js file to make server-side requests for data. For example, you might retrieve a social media post that you plan to embed into your VOLT Store. Once the page has loaded, you can request additional data using client-side requests from the /src/Block.js file. This could be useful for displaying additional products or loading additional social media posts when a customer requests them by scrolling down or clicking a link.
Utilizing server-side rendering in VOLT requires no additional configuration or setup. Even when customizing your VOLT Store with custom Blocks, it remains easy to make server-side requests for data, keeping your site fast and performant. Hopefully, this brief article has helped you understand the advantages of server-side rendering and why VOLT provides it by default.