Skeleton loading is a technique used to enhance the user experience during the wait time for content to load, by providing a placeholder that resembles the structure of the final content. This approach significantly improves user engagement, as it creates a sense of immediate response and reduces perceived loading times. Users are less likely to abandon the page, as the skeleton screens suggest progress and assure them that content is on its way.
On the SEO end, implementing skeleton loading can positively impact several key metrics in Google PageSpeed Insights, directly contributing to better SEO outcomes. By providing visual placeholders for content as it loads, skeleton screens can reduce the First Contentful Paint (FCP) and Largest Contentful Paint (LCP) times, which are critical measures of perceived loading speed and user experience. This improvement is because users see immediate feedback that the page is loading, which can make the wait seem shorter.
In this article we are going to introduce the approach by creating a Next.js app from scratch, but it can be applied to existing applications as well (as we did for some of our projects).
First, make sure you have a Next.js project set up. If you're starting from scratch, you can create a new Next.js app by running:
SWR is a React hook library for data fetching developed by Vercel. Install SWR in your project:
As mentioned earlier, the skeleton loader serves as a placeholder mirroring the structure of the final content. It's crucial to ensure that the skeleton maintains the same size as our actual component with real data. Consider the following component as an example:
It resembles the final UI, providing users with a clear idea of what to expect once the content is loaded. Additionally, it prevents layout changes, ensuring a smooth experience for users. Now, let's see how we can implement the loading experience.
We can integrate useSWR into our component by passing it our API endpoint and a function responsible for fetching data. This hook returns a couple of values: data and isLoading (there are a few more but we don't need to worry about them right now). Depending on whether data is still loading or not, we'll decide whether to display the skeleton component or our actual content.
But why do we use SWR? Couldn't we manage this with a simple React state? Well, yes, we could handle it with React state alone, but making use of a data-fetching library allows us to have more control over things like caching, revalidation, error handling, and loading states. In addition, it looks a lot cleaner in our React components. However, SWR offers a significant advantage for Server-Side Rendering.
Step 5: Server Side Rendering
Server-Side Rendering (SSR) in Next.js is great for making web pages load fast by preparing them in advance, delivering static HTML even with actual data to the user and then delegating the rest of the rendering to the client side. However, when we need to fetch data after the page loads, users may still experience waiting times. This is where SWR becomes useful. Not only assists Next.js in determining when to display our Skeleton component while fetching data on the user's device, thanks to the isLoading variable, but it also seamlessly integrates with Static Site Generation (SSG). This integration allows Next.js to serve a cached page and then revalidate the data on the client side using SWR. This process enhances response times and maintains a consistent layout.
SWR can be used with static exports (SSG) as well, you can enable this option by changing the output mode in next.config.js:
At build time, Next.js will generate each page as a static HTML file, which you can utilize without a server. Thanks to SWR, instead of a blank page, you'll have a page populated with your skeletons!
To learn more about how Next.js can be used with SWR and other cool features, check out the documentation.
In this article, we've explored the concept of skeleton loading as a method to enhance user engagement by providing placeholders during loading times, reducing user abandonment and improving overall user experience. We've dug into the technical implementation using a Next.js application, utilizing SWR for efficient data fetching and displaying skeleton screens until the content fully loads.
