Server Side Rendering

What is SSR Rendering?

SSR is technique used to improve the load time of web apps. Most web apps built today are Single Page Applications (SPA) where all the code for the site is built and served on a single page. This makes for a great and intuitive user experience but bundling all of this code and loading it on to a single page is slow. This leads to poor performing SEO and a degraded user experience.

SSR solves this problem in a creative way. Instead of sending all the code at once to the client browser, SSR sends a barebones structure of the web app to the client which then renders very quickly. At the same time, the entire web app code is sent to a server which renders the code as well (hence the name Server Side Rendering). Once the web app is generated on the server, the server then hydrates the barebones structure making the web app fully functional on the client.

Helium and SSR

Helium utilizes SSR. It’s not required but we do recommend it. Below is an example of how you can utilize SSR in your Helium app with 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>
  );
}

Still have a question?

Get your questions answered in our Developer Discord.