Server Side Rendering (SSR)

Front-Commerce uses SSR to improve SEO and UX by serving HTML pages to users on their first hit to the server. This documentation explains everything you need to know about it when working on a typical Front-Commerce application.

Front-Commerce uses SSR - as opposed to CSR - to improve SEO and UX by serving HTML pages to users on their first hit to the server. You can read a request data-flow in Front-Commerce to get a better understanding of this process.

To generate this HTML page, Front-Commerce will render the React application as a string. During this process, your React components will trigger GraphQL queries to fetch data from the GraphQL layer. This may involve hitting remote APIs to retrieve the necessary data, which is then used to generate the HTML content of your page.

In a Front-Commerce project, server-side rendering is managed by Remix. We utilize Remix's native features to simplify the process for developers, so you don’t have to worry about the technical details. However, it's not a black box, and there are some important aspects you should be aware of while creating your theme.

This section details everything frontend developers must keep in mind when authoring components in a SSR context

There is no window on the server!

Even though it may seem obvious, you are very likely to come across this problem at some point! Browser APIs are not available during SSR. Keep it in mind when using them, and provide a graceful fallback.

Sometimes, it could be as simple as a default value or returning earlier from your function without any side effects.

Examples:

const doSomethingWithIntersectionObserver = () => {
  if (typeof window === "undefined" || !window.IntersectionObserver) {
    return;
  }
  // …
};

const initializePosition = (setPosition) => {
  if (typeof navigator === "undefined" || !("geolocation" in navigator)) {
    setPosition(DEFAULT_LATITUDE, DEFAULT_LONGITUDE);
  } else {
    navigator.geolocation.getCurrentPosition((position) => {
      setPosition(position.coords.latitude, position.coords.longitude);
    });
  }
};

useEffect to the rescue!

There may be situations where rendering a totally different component during server-side rendering might be relevant.

For instance, instead of displaying a map centered on the user's geolocation, it might be better to render a placeholder (page skeleton) on the server and load the map with additional data during CSR. Another use case would be to avoid unnecessary overhead by not rendering some components during SSR: a social media feed may not make sense on the server.

You can use useEffect to conditionally render a component or populate it with data on the client side after the initial server-side render.

Example:

import React, { useEffect, useState } from "react";

interface Location {
  latitude: number;
  longitude: number;
}

const MyMapComponent = () => {
  const [location, setLocation] = useState<Location | null>(null);

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setLocation({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          });
        },
        (error) => {
          console.error("Error getting geolocation:", error);
        }
      );
    }
  }, []);

  if (!location) {
    return <div>Loading map...</div>; // Placeholder during SSR
  }

  return (
    <div>
      <h2>Map centered at your location</h2>
      <div>
        Latitude: {location.latitude}, Longitude: {location.longitude}
      </div>
      {/* Here you would render your map component using the location */}
    </div>
  );
};

export default MyMapComponent;

Please keep in mind that by default the server version will always be displayed first. This means that if you are on a category page and navigate to a product page, it will first display the server version of the product page. When it's done loading, it will then display the client version. The goal here is to enable faster navigation and display only critical information on page mount.

If you want to change this behavior and display the client version of the component immediately, you can use useEffect to handle the client-side logic and state updates.

A viewport as consistent as possible

When using server-side rendering, standard CSS media queries are honored and should be used as much as possible. However, be aware that browser-specific APIs aren't available on the server.

For more advanced use cases and solutions in our default theme, please refer to the Adapting Content to the Viewport guide in the Theme Chocolatine area.

Learn more

If you want to learn more about SSR in Front-Commerce, we recommend you to understand how Server timings could help you spot performance issues and have a look at hydration.