@tramvai/module-page-render-mode 2.28.0 → 2.31.0

package/README.md

@@ -9,9 +9,27 @@ Enable different rendering modes for specific pages:
 - `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.
 
+- `static`
+
+  Static mode - in-memory cache for page HTML markup.
+
+  Response for first request for specific page, without `Cookie` header, will be cached directly, and sended as response to next requests for this page. Otherwise, unpersonalized request for the same page will be triggered at background, and result will be cached.
+
+  5xx responses will not be cached by default, but this behaviour are configurable.
+
+  Any responses from cache will have `X-Tramvai-Static-Page-From-Cache` header.
+
+  Additional metric with name `static_pages_cache_hit` will be added with cache hits counter.
+
+  Response from cache will be sended from `customer_start` command line, and next lines execution will be aborted.
+
+  Cache will be segmented by page path and method, request hostname, device type and browser (modern or default group).
+
 ## Installation
 
 You need to install `@tramvai/module-page-render-mode`
@@ -28,7 +46,7 @@ import { PageRenderModeModule } from '@tramvai/module-page-render-mode';
 
 createApp({
   name: 'tincoin',
-  modules: [ PageRenderModeModule ],
+  modules: [PageRenderModeModule],
 });
 ```
 
@@ -36,8 +54,7 @@ createApp({
 
 ### 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.
+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
 
@@ -69,7 +86,7 @@ For specific pages available two options:
         pageRenderMode: 'client',
       },
     },
-  ]
+  ];
   ```
 
 - setting mode in page component static property:
@@ -84,8 +101,7 @@ For specific pages available two options:
 
 ### 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.
+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
 
@@ -102,7 +118,6 @@ const provider = {
 };
 ```
 
-
 #### Fallback for specific pages
 
 For specific pages available few options:
@@ -117,7 +132,7 @@ For specific pages available few options:
   const PageFallback = () => <div>Loading...</div>;
 
   Page.components = {
-    'pageRenderFallbackDefault': PageFallback,
+    pageRenderFallbackDefault: PageFallback,
   };
 
   export default Page;
@@ -131,7 +146,7 @@ For specific pages available few options:
   const mainDefaultBundle = createBundle({
     name: 'mainDefault',
     components: {
-      'pageRenderFallbackDefault': DefaultFallback,
+      pageRenderFallbackDefault: DefaultFallback,
     },
   });
 
@@ -154,12 +169,28 @@ For specific pages available few options:
   ];
   ```
 
+### Static pages
+
+#### Options
+
+- `ttl` parameter spicified page response cache time. Default - `60000` ms.
+- `maxSize` parameter spicified maximum cached urls count (can be up to 4 pages per url for different segments). Default - `1000`. For apps with heavy HTML and a lot of urls memory usage can be increased significantly.
+
+```ts
+const provider = {
+  provide: STATIC_PAGES_OPTIONS_TOKEN,
+  useValue: {
+    ttl: 60 * 1000,
+    maxSize: 1000,
+  },
+};
+```
+
 ## 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.:
+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.:
 
 ```ts
 const providers = [
@@ -174,12 +205,39 @@ With `client` rendering mode, all layout will be rendered in browser.
 
 `PAGE_RENDER_WRAPPER_TYPE` value will be passed to [default layout](references/modules/render.md#basic-layout), where the library [@tinkoff/layout-factory](references/libs/tinkoff-layout.md#wrappers) is used.
 
+### How to clear static page cache
+
+If you want to clear all cache, make POST request to special papi endpoint without body - `/{appName}/private/papi/revalidate/`.
+
+For specific page, just add `path` parameter to request body, e.g. for `/static/` - `{ path: 'static' }`.
+
+### How to disable background requests for static pages
+
+For example, you want to cache only requests without cookies, without extra requests into the application:
+
+```ts
+const provider = {
+  provide: STATIC_PAGES_BACKGROUND_FETCH_ENABLED,
+  useValue: () => false,
+};
+```
+
+### How to enable 5xx requests caching for static pages
+
+For example, 5xx responses are expected behaviour:
+
+```ts
+const provider = {
+  provide: STATIC_PAGES_CACHE_5xx_RESPONSE,
+  useValue: () => true,
+};
+```
+
 ## 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`:
+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`:
 
 ```ts
 import { PAGE_RENDER_FALLBACK_COMPONENT_PREFIX } from '@tramvai/module-page-render-mode';

package/lib/browser.d.ts

@@ -0,0 +1,9 @@
+import type { TramvaiRenderMode } from '@tramvai/tokens-render';
+export * from './tokens';
+declare module '@tramvai/react' {
+    interface PageComponentOptions {
+        renderMode?: TramvaiRenderMode;
+    }
+}
+export declare class PageRenderModeModule {
+}

package/lib/{index.es.js → browser.js}

@@ -5,7 +5,6 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { useDi } from '@tramvai/react';
 import { PAGE_SERVICE_TOKEN } from '@tramvai/tokens-router';
-import { useRoute } from '@tramvai/module-router';
 import { createToken } from '@tinkoff/dippy';
 
 const PAGE_RENDER_FALLBACK_COMPONENT_PREFIX = createToken('pageRenderFallbackComponentName');
@@ -15,11 +14,25 @@ const PAGE_RENDER_FALLBACK_COMPONENT_PREFIX = createToken('pageRenderFallbackCom
 const PAGE_RENDER_DEFAULT_MODE = createToken('pageRenderDefaultMode');
 const PAGE_RENDER_WRAPPER_TYPE = createToken('pageRenderWrapperType');
 const PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT = createToken('pageRenderDefaultFallbackComponent');
+const STATIC_PAGES_CACHE_TOKEN = createToken('static pages cache');
+const STATIC_PAGES_SHOULD_USE_CACHE = createToken('static pages should use cache');
+const STATIC_PAGES_SHOULD_SET_TO_CACHE = createToken('static pages should set to cache');
+const STATIC_PAGES_BACKGROUND_FETCH_ENABLED = createToken('static pages can fetch page');
+const STATIC_PAGES_OPTIONS_TOKEN = createToken('static pages options');
+const STATIC_PAGES_COMMAND_LINE = createToken('static pages command line');
+const STATIC_PAGES_MODIFY_CACHE = createToken('static pages modify cache', { multi: true });
+const STATIC_PAGES_CACHE_5xx_RESPONSE = createToken('static pages cache 5xx response');
 
-const PageRenderWrapper = ({ children }) => {
+const getPageRenderMode = ({ pageService, defaultRenderMode, }) => {
     var _a;
+    const { pageComponent, pageRenderMode } = pageService.getConfig();
+    const { renderMode } = (_a = pageService.getComponent(pageComponent)) !== null && _a !== void 0 ? _a : {};
+    const mode = pageRenderMode || renderMode || defaultRenderMode;
+    return mode;
+};
+
+const PageRenderWrapper = ({ children }) => {
     const [mounted, setMounted] = useState(false);
-    const { config } = useRoute();
     const pageService = useDi(PAGE_SERVICE_TOKEN);
     const fallbackKey = useDi(PAGE_RENDER_FALLBACK_COMPONENT_PREFIX);
     const defaultRenderMode = useDi(PAGE_RENDER_DEFAULT_MODE);
@@ -27,10 +40,8 @@ const PageRenderWrapper = ({ children }) => {
         token: PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT,
         optional: true,
     });
-    const { pageComponent, pageRenderMode } = config;
-    const { renderMode } = (_a = pageService.getComponent(pageComponent)) !== null && _a !== void 0 ? _a : { renderMode: false };
     const FallbackComponent = pageService.resolveComponentFromConfig(fallbackKey) || DefaultFallbackComponent;
-    const mode = renderMode || pageRenderMode || defaultRenderMode;
+    const mode = getPageRenderMode({ pageService, defaultRenderMode });
     useEffect(() => {
         if (mode === 'client') {
             setMounted(true);
@@ -49,44 +60,46 @@ const pageRenderHOC = (WrapperPage) => (props) => {
     return (jsx(PageRenderWrapper, { children: jsx(WrapperPage, { ...props }) }));
 };
 
+const sharedProviders = [
+    {
+        provide: LAYOUT_OPTIONS,
+        multi: true,
+        useFactory: ({ wrapperType }) => {
+            return {
+                wrappers: {
+                    [wrapperType]: pageRenderHOC,
+                },
+            };
+        },
+        deps: {
+            wrapperType: PAGE_RENDER_WRAPPER_TYPE,
+        },
+    },
+    {
+        provide: PAGE_RENDER_FALLBACK_COMPONENT_PREFIX,
+        useValue: 'pageRenderFallback',
+    },
+    {
+        provide: PAGE_RENDER_DEFAULT_MODE,
+        useFactory: ({ tramvaiRenderMode }) => {
+            return tramvaiRenderMode;
+        },
+        deps: {
+            tramvaiRenderMode: TRAMVAI_RENDER_MODE,
+        },
+    },
+    {
+        provide: PAGE_RENDER_WRAPPER_TYPE,
+        useValue: 'page',
+    },
+];
+
 let PageRenderModeModule = class PageRenderModeModule {
 };
 PageRenderModeModule = __decorate([
     Module({
-        providers: [
-            {
-                provide: LAYOUT_OPTIONS,
-                multi: true,
-                useFactory: ({ wrapperType }) => {
-                    return {
-                        wrappers: {
-                            [wrapperType]: pageRenderHOC,
-                        },
-                    };
-                },
-                deps: {
-                    wrapperType: PAGE_RENDER_WRAPPER_TYPE,
-                },
-            },
-            {
-                provide: PAGE_RENDER_FALLBACK_COMPONENT_PREFIX,
-                useValue: 'pageRenderFallback',
-            },
-            {
-                provide: PAGE_RENDER_DEFAULT_MODE,
-                useFactory: ({ tramvaiRenderMode }) => {
-                    return tramvaiRenderMode;
-                },
-                deps: {
-                    tramvaiRenderMode: TRAMVAI_RENDER_MODE,
-                },
-            },
-            {
-                provide: PAGE_RENDER_WRAPPER_TYPE,
-                useValue: 'page',
-            },
-        ],
+        providers: [...sharedProviders],
     })
 ], PageRenderModeModule);
 
-export { PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT, PAGE_RENDER_DEFAULT_MODE, PAGE_RENDER_FALLBACK_COMPONENT_PREFIX, PAGE_RENDER_WRAPPER_TYPE, PageRenderModeModule };
+export { PAGE_RENDER_DEFAULT_FALLBACK_COMPONENT, PAGE_RENDER_DEFAULT_MODE, PAGE_RENDER_FALLBACK_COMPONENT_PREFIX, PAGE_RENDER_WRAPPER_TYPE, PageRenderModeModule, STATIC_PAGES_BACKGROUND_FETCH_ENABLED, STATIC_PAGES_CACHE_5xx_RESPONSE, STATIC_PAGES_CACHE_TOKEN, STATIC_PAGES_COMMAND_LINE, STATIC_PAGES_MODIFY_CACHE, STATIC_PAGES_OPTIONS_TOKEN, STATIC_PAGES_SHOULD_SET_TO_CACHE, STATIC_PAGES_SHOULD_USE_CACHE };

package/lib/error.d.ts

@@ -0,0 +1,7 @@
+import { SilentError } from '@tinkoff/errors';
+export declare class StopCommandLineRunnerError extends SilentError {
+    static errorName: string;
+    name: string;
+    constructor();
+}
+export declare const isStopCommandLineRunnerError: (error: Error) => error is StopCommandLineRunnerError;

package/lib/server.d.ts

@@ -0,0 +1,9 @@
+import type { TramvaiRenderMode } from '@tramvai/tokens-render';
+export * from './tokens';
+declare module '@tramvai/react' {
+    interface PageComponentOptions {
+        renderMode?: TramvaiRenderMode;
+    }
+}
+export declare class PageRenderModeModule {
+}