Skip to main content

Client-side rendering

Introduction

Tramvai doesn't have full client-side rendering mode, but has limited ability to render page content only in browser. In this mode, all requests to application server will be handled as usual, but instead of real pages content rendering, we can render only light-weight fallback (spinner, skeleton, etc.) on server. After page loading in browser, full page will be rendered. It is very useful to reduce the load on the application server.

Get started

caution

Before using a feature, make sure you use SpaRouterModule! With NoSpaRouterModule you will have a cyclic redirect.

⌛ Install @tramvai/module-page-render-mode module:

npm install @tramvai/module-page-render-mode

⌛ Сonnect module in the project:

import { createApp } from '@tramvai/core';
import { PageRenderModeModule } from '@tramvai/module-page-render-mode';

createApp({
name: 'tincoin',
modules: [ PageRenderModeModule ],
});

@tramvai/module-page-render-mode documentation

After that, we need to provide default fallback. In this guide, it fill be empty white page.

⌛ Provide fallback page:

import React from 'react';
import { createApp } from '@tramvai/core';
import {
PageRenderModeModule,
PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
} from '@tramvai/module-page-render-mode';

const Fallback = () => null;

createApp({
name: 'tincoin',
modules: [ PageRenderModeModule ],
providers: [
{
provide: PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
useValue: Fallback,
},
],
});

⌛ Prevent Header and Footer rendering:

import React from 'react';
import { createApp } from '@tramvai/core';
import {
PageRenderModeModule,
PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
PAGE_RENDER_WRAPPER_TYPE,
} from '@tramvai/module-page-render-mode';

const Fallback = () => null;

createApp({
name: 'tincoin',
modules: [ PageRenderModeModule ],
providers: [
{
provide: PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
useValue: Fallback,
},
{
provide: PAGE_RENDER_WRAPPER_TYPE,
useValue: 'layout',
},
],
});

After that, you can run client rendering mode for concrete pages, or for all of it. In this guide, we will enable client mode for all pages.

⌛ Enable client mode:

import React from 'react';
import { createApp } from '@tramvai/core';
import { TRAMVAI_RENDER_MODE } from '@tramvai/tokens-render';
import {
PageRenderModeModule,
PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
PAGE_RENDER_WRAPPER_TYPE,
} from '@tramvai/module-page-render-mode';

const Fallback = () => null;

createApp({
name: 'tincoin',
modules: [ PageRenderModeModule ],
providers: [
{
provide: PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
useValue: Fallback,
},
{
provide: PAGE_RENDER_WRAPPER_TYPE,
useValue: 'layout',
},
{
provide: TRAMVAI_RENDER_MODE,
useValue: 'client',
},
],
});

After that, all requests to application will return white page, and original content will be rendered after main scripts will be loaded, parsed and executed.

Deep dive

For achieve maximum server performance, we can cache our page fallback, and distribute it from the cdn or balancer. This will completely free up the application server.

caution

When caching a fallback, your users potentially can have a outdated content. Also, you will have the same meta tags for all application pages, it can affect SEO.

In client-side rendering mode, you can generate static HTML from every page, but we recommended to create special static route for this. It will allow you to change meta tags information. Example below use file-system pages feature.

⌛ At first, create empty fallback page:

pages/FallbackPage.tsx
import React from 'react';

export const FallbackPage = () => {
return null;
};

export default FallbackPage;

⌛ And add new static route with this page to application:

const routes = [
{
name: 'fallback',
path: '/__secret_fallback__/',
config: {
pageComponent: '@/pages/FallbackPage',
meta: {
seo: {
metaTags: {
title: 'Some common title',
},
}
}
},
},
]

⌛ Then build your application as usual:

tramvai build {{ appName }}

⌛ In the end, generate static HTML only for one page (if we use default fallback for all pages, page url doesn't matter):

tramvai static {{ appName }} --buildType=none --onlyPages=/__secret_fallback__/
tip

How tramvai static works?

This command basically runs the compiled server.js and makes a HTTP request to the specified URLs, every response will be saved as an HTML file.

After this steps, you can find a file dist/static/__secret_fallback__/index.html. You can serve this file from CDN or balancer, and it will be working as usual SPA.

Environment variables

In tramvai application we can separate a two types of env variables:

  • build-time env
  • deployment env

When using the command tramvai static, only build-time env will be used and are already built into the code at tramvai build step, so you need to pass deployment env wherever you run tramvai static.