@tramvai/module-page-render-mode NPM

@tramvai/module-page-render-mode

Enable different rendering modes for specific pages:

ssr
SSR mode - provides default tramvai behaviour, render full page on server-side.
client
Client mode - render only fallback for page component, then render full page on browser, after hydration. This mode can significally improve server rendering performance, but not recommended for pages with high SEO impact. By default, Header and Footer will be rendered as usual.

Installation

You need to install @tramvai/module-page-render-mode

yarn add @tramvai/module-page-render-mode

And connect in the project

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

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

Usage

Rendering mode

By default, this module connection has no changes, because default rendering mode is ssr. You can change this mode for all pages or for specific pages only.

Default mode

For global rendering mode changing, use token TRAMVAI_RENDER_MODE from @tramvai/tokens-render:

import { TRAMVAI_RENDER_MODE } from '@tramvai/tokens-render';

const provider = {
  provide: TRAMVAI_RENDER_MODE,
  useValue: 'client',
};

Mode for specifig pages

For specific pages available two options:

setting mode in route config:

const routes = [
  {
    name: 'main',
    path: '/',
    config: {
      bundle: 'mainDefault',
      pageComponent: 'pageDefault',
      pageRenderMode: 'client',
    },
  },
]

setting mode in page component static property:

const PageComponent = () => <div>Page</div>;

PageComponent.renderMode = 'client';

export default PageComponent;

Fallback

Standard behaviour for SPA applications - render some fallback with spinner or page skeleton before application was rendered. You can set default fallback for all pages with client render mode, or only for specific pages.

Default fallback

For setting default fallback, use token PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT:

import { PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT } from '@tramvai/module-page-render-mode';

const DefaultFallback = () => <div>Loading...</div>;

const provider = {
  provide: PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
  useValue: DefaultFallback,
};

Fallback for specific pages

For specific pages available few options:

add fallback to page component static property, use name pageRenderFallbackDefault:

const PageComponent = () => <div>Page</div>;

const PageFallback = () => <div>Loading...</div>;

PageComponent.components = {
  'pageRenderFallbackDefault': PageFallback,
};

export default PageComponent;

add default fallback to bundle, use name pageRenderFallbackDefault:

const DefaultFallback = () => <div>Loading...</div>;

const mainDefaultBundle = createBundle({
  name: 'mainDefault',
  components: {
    'pageRenderFallbackDefault': DefaultFallback,
  },
});

export default mainDefaultBundle;

and you can add fallback in route config, use key pageRenderFallbackComponent with any fallback name you provided in bundle or page component:

const routes = [
  {
    name: 'main',
    path: '/',
    config: {
      bundle: 'mainDefault',
      pageComponent: 'pageDefault',
      pageRenderFallbackComponent: 'myOwnFallbackComponent',
    },
  },
];

How-to

How to prevent Header and Footer Rendering

By default, Header and Footer will be rendered as usual, because this module provide Page component wrapper. If you want to make less work on server, use token PAGE_RENDER_WRAPPER_TYPE with layout or content value, e.g.:

const providers = [
  {
    provide: PAGE_RENDER_WRAPPER_TYPE,
    useValue: 'layout',
  },
];

With client rendering mode, all layout will be rendered in browser.

PAGE_RENDER_WRAPPER_TYPE value will be passed to default layout, where the library @tinkoff/layout-factory is used.

Troubleshooting

Fallback name conflicts

You might have a potential issue with conflict existing components and render fallback component names - pageRenderFallbackComponent and pageRenderFallbackDefault. For avoiding this issues, just change fallback name prefix using token PAGE_RENDER_FALLBACK_COMPONENT_PREFIX: