feat: detect search crawlers, toggle stream button

package.json

@@ -20,8 +20,11 @@
     "@lomray/react-head-manager": "^1.1.0",
     "@lomray/react-mobx-manager": "^2.0.0-beta.19",
     "@lomray/react-route-manager": "^1.0.0",
-    "@lomray/vite-ssr-boost": "^1.0.0-beta.17",
+    "@lomray/vite-ssr-boost": "^1.0.0-beta.19",
     "axios": "^1.4.0",
+    "cookie-parser": "^1.4.6",
+    "isbot": "^3.6.12",
+    "js-cookie": "^3.0.5",
     "mobx": "^6.9.0",
     "mobx-react-lite": "^3.4.3",
     "react": "^18.2.0",
@@ -36,6 +39,8 @@
     "@lomray/prettier-config": "^1.2.0",
     "@lomray/stylelint-config": "^1.4.1",
     "@semantic-release/exec": "^6.0.3",
+    "@types/cookie-parser": "^1.4.3",
+    "@types/js-cookie": "^3.0.3",
     "@types/node": "^20.3.3",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",

src/pages/home/index.tsx

@@ -1,21 +1,38 @@
 import { Meta } from '@lomray/react-head-manager';
 import type { FCRoute } from '@lomray/vite-ssr-boost/interfaces/fc-route';
+import Cookies from 'js-cookie';
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLoaderData } from 'react-router-dom';
 import ReactLogoImg from '@assets/images/react.svg';
 import { APP_VERSION, IS_PROD } from '@constants/index';
 import RouteManager from '@services/route-manager';
 import styles from './styles.module.scss';
 
+interface ILoaderData {
+  isDefaultCrawler: boolean;
+}
+
 /**
  * Home page
  * @constructor
  */
 const Home: FCRoute = () => {
-  const [count, setCount] = useState(0);
+  const { isDefaultCrawler } = useLoaderData() as ILoaderData;
+  const [isCrawler, setIsCrawler] = useState(isDefaultCrawler);
+
   // show only on deployed application
   const hasVersion = IS_PROD && !APP_VERSION.startsWith('APP_');
 
+  /**
+   * Enable/disable stream for demo
+   */
+  const toggleCrawler = () => {
+    const nextVal = isCrawler ? '0' : '1';
+
+    setIsCrawler(nextVal === '1');
+    Cookies.set('isCrawler', nextVal);
+  };
+
   return (
     <>
       <Meta>
@@ -43,7 +60,9 @@ const Home: FCRoute = () => {
         </a>
       </div>
       <div className={styles.card}>
-        <button onClick={() => setCount((c) => c + 1)}>count is {count}</button>
+        <button onClick={toggleCrawler}>
+          You are watching site like: <strong>{isCrawler ? 'Search bot' : 'Human'}</strong>
+        </button>
         <p>
           <Link to={RouteManager.makeURL('details')}>How to works Suspense?</Link>
         </p>
@@ -67,4 +86,13 @@ const Home: FCRoute = () => {
   );
 };
 
+Home.loader = ({ request }): ILoaderData => {
+  const isDefaultCrawler =
+    request.headers.get('cookie')?.includes('isCrawler=1') ?? Cookies.get('isCrawler') === '1';
+
+  return {
+    isDefaultCrawler,
+  };
+};
+
 export default Home;

src/server.ts

@@ -4,6 +4,8 @@ import MetaServer from '@lomray/react-head-manager/server';
 import { Manager } from '@lomray/react-mobx-manager';
 import ManagerStream from '@lomray/react-mobx-manager/manager-stream';
 import entryServer from '@lomray/vite-ssr-boost/node/entry';
+import CookieParser from 'cookie-parser';
+import isBot from 'isbot';
 import { enableStaticRendering } from 'mobx-react-lite';
 import StateKey from '@constants/state-key';
 import routes from '@routes/index';
@@ -18,8 +20,10 @@ export default entryServer(App, routes, {
     /**
      * Once after create server
      */
-    onServerCreated: () => {
+    onServerCreated: (app) => {
       enableStaticRendering(true);
+
+      app.use(CookieParser());
     },
     /**
      * For each request:
@@ -51,12 +55,8 @@ export default entryServer(App, routes, {
     /**
      * We can control stream mode here
      */
-    onRouterReady: () => {
-      const isStream = true;
-
-      // const disable =
-      //   isBot(userAgent) &&
-      //   !['googlebot', 'some-other-bot'].some(n => userAgent.toLowerCase().includes(n))
+    onRouterReady: ({ context: { req } }) => {
+      const isStream = !isBot(req.get('user-agent')) && req.cookies?.isCrawler !== '1';
 
       return {
         isStream,