Client-side vs Server side rendering

A guide to the rendering modes supported by our frontend template, including how to configure client-side and server-side rendering, when to use each, and how components are compiled and integrated with the backend.

Our frontend template supports two rendering modes: Client-side rendering (CSR) and Server-side rendering (SSR).

Client-side Rendering

Some components can be rendered on the client side. To enable this, add the component to the blocks variable in the react-loader.tsx file.

Example:

const blocks: { [name: string]: any } = {
  people: lazy(() => import('./organisms/people/People')),
  share: lazy(() => import('./organisms/share/Share')),
};

These components, along with their TSX code and logic, will be compiled and included in the backend, allowing them to be served to end users.

Server-side Rendering

Components that are not listed in the blocks variable support server-side rendering only. Their TSX code is used purely for demonstration purposes. During compilation, the template generates static HTML samples based on them.

The backend team then integrates these samples into ASP.NET Razor files as usual and replaces the placeholder data with actual data.

Any logic defined in TSX files for SSR-only components will be discarded at compile time. If these components require client-side interaction or behavior, they should import scripts from the src/assets/scripts folder.

This folder contains all client-side scripts that are compiled and delivered to the backend to serve end users.