🎉 Welcome to the Mobify DevCenter, our new home for v2.0 documentation and developer resources! (For now, the site is desktop-only.) Switch to old site
close
Mobify DevCenter
DocumentationAPI & SDK ReferenceHow-To Guides
search_icon_focus

Creating the Server-Side Version of a Page

To build fast, cacheable pages, responses should be appropriate to serve to all users, and they should be appropriate to serve for some duration of time. To achieve this, pages for caching by CDN or Application Cache should not contain any personalized or frequently-changing content.

Personalized information such as a user’s name, number of items in the cart, and preferred payment method is inappropriate to cache and send to different users. If a page includes personalized information, that page is not relevant to other users.

Frequently-changing content can also be less suitable for caching, because there’s a risk that we would respond with stale content. Examples are a product’s price, remaining inventory, or sales promotions. Imagine a product details page which typically shows the remaining inventory for a product. We would exclude the inventory from the rendered version of the page, to prevent rendering an out of date inventory count.

Because we avoid including any personalized or frequently-changing information in the server-side rendered page, it will always be a subset of the client side page. That is, the client side version of the page will have the addition of any personalized or frequently-changing content. This is critical for any entry pages in your site that are relevant to guest users, such as the home page, category listing, product listing, and product detail pages, as they need to leverage the cache to load as quickly as possible. Personalized or frequently-changing content can be requested once the PWA has loaded on the user’s device.

To determine if we are server side or client side, we check if the typeof window object. The window object is only present client-side.

Let’s consider a product detail page, as an example. Typically, cacheable content on this page would include the product name, images, and description. We would not cache personalized content such as the shopping cart, or saved items. We would also avoid caching frequently-changing information such as the price of remaining inventory.

Note: To preview a server-side rendered page, append the ?mobify_server_only query string to the URL you’d like to preview. For example, you can test the server-side rendered version of www.example.com by visiting the URL www.example.com?mobify_server_only.

Example: cacheable product description component

export default function ProductDescription() {
return (
<div>
<h1>{name}</h1>
{/* Here, the price is only shown client side,
* because changes frequently */}
{typeof window != 'undefined' && (
<>
<p>Price: ${price}</p>
</>
)}
</div>
)
}

That concludes our how-to on creating server-side rendered versions of pages. To learn more about Mobify’s server-side rendering, check out our Universal React Rendering documentation.