Server Side Rendering

What is SSR?

Server-Side Rendering (SSR) is a technique used to improve load performance and SEO. Instead of sending a blank HTML shell and loading everything on the client, SSR sends pre-rendered HTML from the server. This allows users to see meaningful content faster and improves search engine crawlability. Once loaded, client-side JavaScript takes over ("hydration") to make the application interactive.

Helium and SSR

Helium supports Server-Side Rendering out of the box. While not strictly required, we strongly recommend using SSR to optimize performance—especially for content-heavy pages or SEO-critical routes.

Here's an example using the <FeaturedContent /> component:

import React from 'react';
import { useTranslation } from 'react-i18next';
import {
  FeaturedContent,
  ContentTileStandardLayout,
  FeaturedContentContentItem
} from '@thoughtindustries/featured-content';
import {
  hydrateContent,
  useCatalogQuery,
  useAddResourceToQueueMutation
} from '@thoughtindustries/content';

export { Page };

function Page() {
  const { i18n } = useTranslation();
  const [addResourceToQueue] = useAddResourceToQueueMutation();
  const handleAddedToQueue = (item: FeaturedContentContentItem): Promise<boolean | void> =>
    item.displayCourse
      ? addResourceToQueue({ variables: { resourceId: item.displayCourse } }).then()
      : Promise.resolve(undefined);

  const { data, loading, error } = useCatalogQuery();

  let content;
  if (data) {
    content = data.CatalogQuery.contentItems.map((item, index) => {
      const hydratedItem = hydrateContent(i18n, item);
      const { authors, description, href, ...restItemProps } = hydratedItem;
      const transformedItem = {
        ...restItemProps,
        authors,
        shortDescription: description && `${description.substring(0, 75)} ...`,
        linkUrl: href
      };
      return <ContentTileStandardLayout.Item key={`item-${index}`} {...transformedItem} />;
    });
  }

  return (
    <div className="px-4">
      <FeaturedContent>
        <ContentTileStandardLayout
          desktopColumnCount={4}
          onAddedToQueue={handleAddedToQueue}
        >
          {content}
        </ContentTileStandardLayout>
      </FeaturedContent>
    </div>
  );
}