Server-side rendering SSR guidelines for Spire

For Spire Alpha, only pages accessed by SEO crawlers are required to render server-side. These are:

  • Product Detail Pages
  • Brand & Brand Detail Pages
  • Content Pages
  • Product/Category List pages

Other pages with fast APIs and hidden behind logins are nice to have, including:

  • My Account and its children
  • Cart and Checkout
  • Lists

Authenticated content that depends on slow API calls should not use server-side rendering, or the page will appear blank to the user until all APIs respond.

React functionality

As of React 16.13.1, most React functionality works for server-side rendering, except for useEffectuseLayoutEffect. The components will otherwise work, but the hooks will not run until client-side hydration. If the logic behind those hooks is required for SEO, you must instead implement the component as a class component and move API-calling logic into UNSAFE_componentWillMount . You can split a component into separate class and functional components if you wish to use the functional approaches for part of it.

Verify SSR functionality by refreshing the page. The initial HTML returned by the server should have the desired content, and the client-side JavaScript should not alter that content. Test links and other functionality with JavaScript disabled to ensure that SEO crawlers can navigate.

It is expected that React 17 will offer an alternative to UNSAFE_componentWillMount that enables functional components to be used in all scenarios.