@dooboostore/simple-boot-http-server-ssr 1.0.12 → 1.0.14

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dooboostore/simple-boot-http-server-ssr",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
   "typesVersions": {
-    ">=4.2": {
+    "*": {
       "*": [
         "dist/types/*"
       ]
@@ -62,17 +62,7 @@
     "url": "https://github.com/dooboostore-develop/packages"
   },
   "peerDependencies": {
-    "reflect-metadata": "^0.2.2",
-    "@dooboostore/core": "1.0.22",
-    "@dooboostore/core-node": "1.0.8",
-    "@dooboostore/core-web": "1.0.7",
-    "@dooboostore/dom-render": "1.0.109",
-    "@dooboostore/simple-boot-front": "1.0.128",
-    "@dooboostore/simple-boot-http-server": "1.0.21",
-    "@dooboostore/simple-boot": "1.0.51"
-  },
-  "dependencies": {
-    "jsdom": "^26.0.0"
+    "reflect-metadata": "^0.2.2"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
@@ -91,7 +81,19 @@
     "typescript": "^5.9.2",
     "@types/node-gzip": "^1.1.0",
     "esbuild-plugin-tsc": "^0.5.0",
-    "esbuild": "^0.23.0"
+    "esbuild": "^0.23.0",
+    "@dooboostore/core-node": "1.0.10",
+    "@dooboostore/core-web": "1.0.9",
+    "@dooboostore/dom-render": "1.0.112",
+    "@dooboostore/simple-boot": "1.0.53",
+    "@dooboostore/core": "1.0.28",
+    "@dooboostore/simple-boot-front": "1.0.130",
+    "@dooboostore/simple-boot-http-server": "1.0.23"
+  },
+  "dependencies": {
+    "jsdom": "^26.0.0",
+    "linkedom": "0.18.12",
+    "@dooboostore/dom-parser": "1.0.1"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/filters/IntentSchemeFilter.ts

@@ -6,61 +6,64 @@ import {Sim} from '@dooboostore/simple-boot/decorators/SimDecorator';
 import {HttpStatus} from '@dooboostore/simple-boot-http-server/codes/HttpStatus';
 import {RequestResponse} from '@dooboostore/simple-boot-http-server/models/RequestResponse';
 import {SimpleBootHttpServer} from '@dooboostore/simple-boot-http-server/SimpleBootHttpServer';
-import { Mimes } from '../codes/Mimes';
+import {Mimes} from '../codes/Mimes';
+import {Promises} from "@dooboostore/core/promise/Promises";
 
 @Sim
 export class IntentSchemeFilter implements Filter {
-    constructor(private intentManager: IntentManager) {
-      // (IntentManager as any).
-      // console.log('intent constructor', this.intentManager);
-    }
+  constructor(private intentManager: IntentManager) {
+    // (IntentManager as any).
+    // console.log('intent constructor', this.intentManager);
+  }
 
-    async onInit(app: SimpleBootHttpServer) {
-    }
+  async onInit(app: SimpleBootHttpServer) {
+  }
 
-    async proceedBefore({rr, app}: {rr: RequestResponse, app: SimpleBootHttpServer, carrier: Map<string, any>}) {
-        // const rr = rrr;
-        const url = rr.reqUrl;
-        const contentLength = Number(rr.reqHeader(HttpHeaders.ContentLength.toLowerCase() ?? '0'));
-        const acceptType = rr.reqHeader(HttpHeaders.Accept);
-        const contentType = rr.reqHeader(HttpHeaders.ContentType);
-        const intentScheme = rr.reqHeader(HttpHeaders.XSimpleBootSsrIntentScheme);
-        if (acceptType === Mimes.ApplicationJsonPostSimpleBootSsrIntentScheme && intentScheme) {
-            let intent = new Intent(`${intentScheme}:/${url}`);
-            intent.publishType = PublishType.INLINE_DATA_PARAMETERS;
-            // const responseHeader = {} as any;
-            // responseHeader[HttpHeaders.ContentType] = Mimes.ApplicationJson;
-            if (contentLength > 0) {
-                if (contentType.includes(Mimes.ApplicationJson)) {
-                    intent.data = [await rr.reqBodyJsonData(), rr];
-                } else if (contentType.includes(Mimes.MultipartFormData)) {
-                    intent.data = [await rr.reqBodyMultipartFormDataObject(), rr];
-                }
-                const rdatas = await this.intentManager.publish(intent);
-                const rdata = rdatas[0];
-                const wdata = rdata instanceof Promise ? await rdata : rdata;
-                rr.resStatusCode(HttpStatus.Ok);
-                rr.resSetHeader(HttpHeaders.ContentType, [Mimes.ApplicationJson])
-                await rr.resEnd(wdata ? JSON.stringify(wdata) : undefined);
-            } else {
-                intent.data = rr.reqUrlSearchParamTuples.length > 0 ? [rr.reqUrlSearchParamsObj, rr] : [rr];
-                const rdatas = await this.intentManager.publish(intent);
-                const rdata = rdatas[0];
-                const wdata = rdata instanceof Promise ? await rdata : rdata;
-                // const wdata =undefined;
-                rr.resStatusCode(HttpStatus.Ok);
-                rr.resSetHeader(HttpHeaders.ContentType, [Mimes.ApplicationJson])
-                await rr.resEnd(wdata ? JSON.stringify(wdata) : undefined);
-            }
-            // console.log('---------3--intent request', rr.req.readable, rr.req.readableLength);
-            return false;
-        } else {
-            return true;
+  async proceedBefore({rr, app}: { rr: RequestResponse, app: SimpleBootHttpServer, carrier: Map<string, any> }) {
+    // const rr = rrr;
+    const url = rr.reqUrl;
+    const contentLength = Number(rr.reqHeader(HttpHeaders.ContentLength.toLowerCase() ?? '0'));
+    const acceptType = rr.reqHeader(HttpHeaders.Accept);
+    const contentType = rr.reqHeader(HttpHeaders.ContentType);
+    const intentScheme = rr.reqHeader(HttpHeaders.XSimpleBootSsrIntentScheme);
+    if (acceptType === Mimes.ApplicationJsonPostSimpleBootSsrIntentScheme && intentScheme) {
+      let intent = new Intent(`${intentScheme}:/${url}`);
+      intent.publishType = PublishType.INLINE_DATA_PARAMETERS;
+      // console.log('---------1--intent request', intentScheme, url, contentLength, contentType );
+      // const responseHeader = {} as any;
+      // responseHeader[HttpHeaders.ContentType] = Mimes.ApplicationJson;
+      if (contentLength > 0) {
+        if (contentType.includes(Mimes.ApplicationJson)) {
+          intent.data = [await rr.reqBodyJsonData(), rr];
+        } else if (contentType.includes(Mimes.MultipartFormData)) {
+          intent.data = [await rr.reqBodyMultipartFormDataObject(), rr];
         }
+        // console.log('---------2--intent request',intent);
+        const rdatas = await this.intentManager.publish(intent);
+        const rdata = rdatas[0];
+        const wdata = rdata instanceof Promise ? await rdata : rdata;
+        rr.resStatusCode(HttpStatus.Ok);
+        rr.resSetHeader(HttpHeaders.ContentType, [Mimes.ApplicationJson])
+        await rr.resEnd(wdata ? JSON.stringify(wdata) : undefined);
+      } else {
+        intent.data = rr.reqUrlSearchParamTuples.length > 0 ? [rr.reqUrlSearchParamsObj, rr] : [rr];
+        const rdatas = await this.intentManager.publish(intent);
+        const rdata = rdatas[0];
+        const wdata = rdata instanceof Promise ? await rdata : rdata;
+        // const wdata =undefined;
+        rr.resStatusCode(HttpStatus.Ok);
+        rr.resSetHeader(HttpHeaders.ContentType, [Mimes.ApplicationJson])
+        await rr.resEnd(wdata ? JSON.stringify(wdata) : undefined);
+      }
+      // console.log('---------3--intent request', rr.req.readable, rr.req.readableLength);
+      return false;
+    } else {
+      return true;
     }
+  }
 
-    async proceedAfter({rr, app}: {rr: RequestResponse, app: SimpleBootHttpServer, carrier: Map<string, any>}) {
-        return true;
-    }
+  async proceedAfter({rr, app}: { rr: RequestResponse, app: SimpleBootHttpServer, carrier: Map<string, any> }) {
+    return true;
+  }
 
 }

package/src/filters/SSRDomParserFilter.ts

@@ -0,0 +1,233 @@
+import { RequestResponse } from '@dooboostore/simple-boot-http-server/models/RequestResponse';
+import { HttpHeaders } from '@dooboostore/simple-boot-http-server/codes/HttpHeaders';
+import { SimpleBootHttpSSRFactory } from '../SimpleBootHttpSSRFactory';
+import { ConstructorType } from '@dooboostore/core/types';
+import { Filter } from '@dooboostore/simple-boot-http-server/filters/Filter';
+import { Mimes } from '@dooboostore/simple-boot-http-server/codes/Mimes';
+import { HttpStatus } from '@dooboostore/simple-boot-http-server/codes/HttpStatus';
+import { SimpleBootHttpServer } from '@dooboostore/simple-boot-http-server/SimpleBootHttpServer';
+import { SimFrontOption } from '@dooboostore/simple-boot-front/option/SimFrontOption';
+import { SimpleBootFront } from '@dooboostore/simple-boot-front/SimpleBootFront';
+import { AsyncBlockingQueue } from '@dooboostore/core/queues/AsyncBlockingQueue';
+import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
+import * as JSDOM from 'jsdom';
+import { NotFoundError } from '@dooboostore/simple-boot-http-server/errors/NotFoundError';
+import { DomRenderProxy } from '@dooboostore/dom-render/DomRenderProxy';
+import { filter } from '@dooboostore/core/message/operators/filter';
+import { first } from '@dooboostore/core/message/operators/first';
+import { delay } from '@dooboostore/core/message/operators/delay';
+import { firstValueFrom } from '@dooboostore/core/message/internal/firstValueFrom';
+import { parseHTML } from 'linkedom';
+import {Promises} from '@dooboostore/core/promise/Promises';
+import { DomParserInitializer } from '../initializers/DomParserInitializer';
+
+export type FactoryAndParams = {
+  frontDistPath: string;
+  frontDistIndexFileName?: string;
+  factorySimFrontOption: (window: any) => SimFrontOption;
+  factory: SimpleBootHttpSSRFactory;
+  poolOption: {
+    max: number;
+    min: number;
+    clearIntervalTime?: number;
+  };
+  using: ConstructorType<any>[];
+  domExcludes?: ConstructorType<any>[];
+  ssrExcludeFilter?: (rr: RequestResponse) => boolean;
+  simpleBootFront?: {
+    notFoundError?: boolean;
+  };
+};
+
+export class SSRDomParserFilter implements Filter {
+  private simpleBootFrontPool: SimpleBootFront[] = [];
+  private simpleBootFrontQueue = new AsyncBlockingQueue<SimpleBootFront>();
+  // private indexHTML: string;
+  private welcomUrl = 'http://localhost';
+  private poolGeneration = 0;
+  private intervalId?: NodeJS.Timeout;
+
+  constructor(
+    public config: FactoryAndParams,
+    public otherInstanceSim?: Map<ConstructorType<any>, any>
+  ) {
+    config.frontDistIndexFileName = config.frontDistIndexFileName || 'index.html';
+    // this.indexHTML = JsdomInitializer.loadFile(this.config.frontDistPath, config.frontDistIndexFileName);
+  }
+
+  async onInit(app: SimpleBootHttpServer) {
+    for (let i = 0; i < this.config.poolOption.min; i++) {
+      await this.pushQueue();
+    }
+
+    if (this.config.poolOption.clearIntervalTime && this.config.poolOption.clearIntervalTime > 0) {
+      this.intervalId = setInterval(() => {
+        this.poolGeneration++;
+      }, this.config.poolOption.clearIntervalTime);
+    }
+  }
+
+  async onDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+    // this.simpleBootFrontQueue.clear();
+    this.simpleBootFrontPool.forEach(front => {
+      (front as any).jsdom?.window.close();
+    });
+    this.simpleBootFrontPool = [];
+  }
+
+  async makePage() {
+      let windowPromise = await new DomParserInitializer(
+          this.config.frontDistPath,
+          this.config.frontDistIndexFileName || 'index.html',
+          { url: this.welcomUrl }
+      ).run();
+      return windowPromise;
+    // const jsdom = await new JsdomInitializer(
+    //   this.config.frontDistPath,
+    //   this.config.frontDistIndexFileName || 'index.html',
+    //   { url: this.welcomUrl }
+    // ).run();
+    // return jsdom;
+  }
+
+  async makeFront(window: Window) {
+    const name = RandomUtils.uuid();
+    (window as any).ssrUse = false;
+    const option = this.config.factorySimFrontOption(DomRenderProxy.final(window));
+    const simpleBootFront = await this.config.factory.create(option, this.config.using, this.config.domExcludes);
+    simpleBootFront.run(this.otherInstanceSim);
+    (simpleBootFront as any).generation = this.poolGeneration;
+    return simpleBootFront;
+  }
+
+  enqueueFrontApp(simpleBootFront: SimpleBootFront) {
+    // this.simpleBootFrontPool.set(simpleBootFront.option.name!, simpleBootFront);
+    this.simpleBootFrontPool.push(simpleBootFront);
+    this.simpleBootFrontQueue.enqueue(simpleBootFront);
+  }
+  async pushQueue() {
+    if (this.simpleBootFrontPool.length < this.config.poolOption.max) {
+      this.enqueueFrontApp(await this.makeFront(await this.makePage()));
+    }
+  }
+
+  async proceedBefore({ rr, app }: { rr: RequestResponse; app: SimpleBootHttpServer; carrier: Map<string, any> }) {
+    if (this.config.ssrExcludeFilter?.(rr)) {
+      return false;
+    }
+    if (rr.reqHasAcceptHeader(Mimes.TextHtml) || rr.reqHasAcceptHeader(Mimes.All)) {
+      if (this.simpleBootFrontQueue.isEmpty()) {
+        await this.pushQueue();
+      }
+      const simpleBootFront = await this.simpleBootFrontQueue.dequeue();
+      try {
+        (simpleBootFront.option.window as any).ssrUse = true;
+        delete (simpleBootFront.option.window as any).server_side_data;
+        const url = rr.reqUrlObj({ host: 'localhost' });
+        if (this.config.simpleBootFront?.notFoundError) {
+          // intent router check first
+          const intent = await simpleBootFront.getIntent(url.pathname);
+          // route를 못찾은상태에서 router path까지 안맞으면 404 처리한다.  route랑 router랑 다르니깐 헛갈리지말도록
+          if (intent.module === undefined && !intent.getRouterPathData(rr.reqUrlPathName)) {
+            throw new NotFoundError({ message: `Not Found: ${rr.reqUrlPathName}` });
+          }
+        }
+
+        // runRouting!!
+        const targetUrl = url.toString();
+        // console.log('runRoutingrunRouting', targetUrl);
+        await simpleBootFront.goRouting(targetUrl);
+        await Promises.sleep(0); // <--중요: 이거 넣어야지 두번불러지는게 없어지는듯? 뭐지 event loop 변경된건가?
+
+        // console.log('runRout22222ingrunRouting', targetUrl);
+
+        // simpleBootFront.routingSubjectObservable.subscribe(it=>{
+        //   console.log('zzzzzzzzzzzzzzzzzzz', it);
+        //   if (it.triggerPoint==='end') {
+        //     console.log('zzz@@', it.routerModule.intent);
+        //   }
+        // })
+
+        const data = await firstValueFrom(
+          simpleBootFront.routingSubjectObservable.pipe(
+            filter(
+              (it) =>
+                it.triggerPoint === 'end' &&
+                typeof it.routerModule.intent.uri === 'string' &&
+                targetUrl.endsWith(it.routerModule.intent.uri)
+            ),
+            // delay(1000),
+            first()
+          )
+        );
+        // console.log('???????done');
+        await Promises.sleep(0)
+        const html = this.makeHTML(simpleBootFront);
+        // console.log('---------',html);
+        await this.writeOkHtmlAndEnd({ rr }, html);
+      } finally {
+        (simpleBootFront.option.window as any).ssrUse = false;
+        delete (simpleBootFront.option.window as any).server_side_data;
+        if ((simpleBootFront as any).generation < this.poolGeneration) {
+          // Stale instance, destroy it
+          const jsdom = (simpleBootFront as any).jsdom as JSDOM.JSDOM | undefined;
+          jsdom?.window.close();
+          const index = this.simpleBootFrontPool.indexOf(simpleBootFront);
+          if (index > -1) {
+            this.simpleBootFrontPool.splice(index, 1);
+          }
+          this.pushQueue();
+        } else {
+          // Current instance, return to queue
+          this.simpleBootFrontQueue.enqueue(simpleBootFront);
+        }
+      }
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  makeHTML(simpleBootFront: SimpleBootFront) {
+    (simpleBootFront.option.window as any).document.querySelectorAll('*').forEach((el:HTMLElement )=> {
+      Array.from(el.attributes).forEach(attr => {
+        if (/^dr-/.test(attr.name) || /^domstyle/.test(attr.name) || /this-path/.test(attr.name)) {
+          el.removeAttribute(attr.name);
+        }
+      });
+    });
+    let html = simpleBootFront.option.window.document.documentElement.outerHTML;
+      if (!/^<!DOCTYPE html>/i.test(html)) {
+        html = '<!DOCTYPE html>' + html;
+      }
+    html = html.replace(/\$\{[\s\S]*?\}\$/g, '');
+    const serverSideData = (simpleBootFront.option.window as any).server_side_data;
+    if (serverSideData) {
+      const data = Object.entries(serverSideData)
+        .map(([k, v]) => {
+          if (typeof v === 'string') {
+            return `window.server_side_data.${k} = ${v}`;
+          } else {
+            return `window.server_side_data.${k} = ${JSON.stringify(v)}`;
+          }
+        })
+        .join(';');
+      if (data) {
+        html = html.replace('</head>', `<script> window.server_side_data={}; ${data}; </script></head>`);
+      }
+    }
+    return html;
+  }
+  async writeOkHtmlAndEnd({ rr, status = HttpStatus.Ok }: { rr: RequestResponse; status?: HttpStatus }, html: string) {
+    rr.resStatusCode(status);
+    rr.resSetHeader(HttpHeaders.ContentType, Mimes.TextHtml);
+    await rr.resEnd(html);
+  }
+
+  async proceedAfter({ rr, app }: { rr: RequestResponse; app: SimpleBootHttpServer; carrier: Map<string, any> }) {
+    return true;
+  }
+}

package/src/filters/SSRFilter.ts

@@ -172,8 +172,8 @@ export class SSRFilter implements Filter {
           simpleBootFront.routingSubjectObservable.pipe(
           // @ts-ignore
             filter(
-              (it: any) =>
-                it.state === 'end' &&
+              (it) =>
+                it.triggerPoint === 'end' &&
                 typeof it.routerModule.intent.uri === 'string' &&
                 targetUrl.endsWith(it.routerModule.intent.uri)
             ),

package/src/filters/SSRLinkDomDomFilter.ts

@@ -0,0 +1,227 @@
+import { RequestResponse } from '@dooboostore/simple-boot-http-server/models/RequestResponse';
+import { HttpHeaders } from '@dooboostore/simple-boot-http-server/codes/HttpHeaders';
+import { SimpleBootHttpSSRFactory } from '../SimpleBootHttpSSRFactory';
+import { ConstructorType } from '@dooboostore/core/types';
+import { JsdomInitializer } from '../initializers/JsdomInitializer';
+import { Filter } from '@dooboostore/simple-boot-http-server/filters/Filter';
+import { Mimes } from '@dooboostore/simple-boot-http-server/codes/Mimes';
+import { HttpStatus } from '@dooboostore/simple-boot-http-server/codes/HttpStatus';
+import { SimpleBootHttpServer } from '@dooboostore/simple-boot-http-server/SimpleBootHttpServer';
+import { SimFrontOption } from '@dooboostore/simple-boot-front/option/SimFrontOption';
+import { SimpleBootFront } from '@dooboostore/simple-boot-front/SimpleBootFront';
+import { AsyncBlockingQueue } from '@dooboostore/core/queues/AsyncBlockingQueue';
+import { RandomUtils } from '@dooboostore/core/random/RandomUtils';
+import * as JSDOM from 'jsdom';
+import { NotFoundError } from '@dooboostore/simple-boot-http-server/errors/NotFoundError';
+import { DomRenderProxy } from '@dooboostore/dom-render/DomRenderProxy';
+import { filter } from '@dooboostore/core/message/operators/filter';
+import { first } from '@dooboostore/core/message/operators/first';
+import { firstValueFrom } from '@dooboostore/core/message/internal/firstValueFrom';
+import { parseHTML } from 'linkedom';
+import { LinkedomInitializer } from '../initializers/LinkedomInitializer';
+
+export type FactoryAndParams = {
+  frontDistPath: string;
+  frontDistIndexFileName?: string;
+  factorySimFrontOption: (window: any) => SimFrontOption;
+  factory: SimpleBootHttpSSRFactory;
+  poolOption: {
+    max: number;
+    min: number;
+    clearIntervalTime?: number;
+  };
+  using: ConstructorType<any>[];
+  domExcludes?: ConstructorType<any>[];
+  ssrExcludeFilter?: (rr: RequestResponse) => boolean;
+  simpleBootFront?: {
+    notFoundError?: boolean;
+  };
+};
+
+export class SSRLinkDomDomFilter implements Filter {
+  private simpleBootFrontPool: SimpleBootFront[] = [];
+  private simpleBootFrontQueue = new AsyncBlockingQueue<SimpleBootFront>();
+  // private indexHTML: string;
+  private welcomUrl = 'http://localhost';
+  private poolGeneration = 0;
+  private intervalId?: NodeJS.Timeout;
+
+  constructor(
+    public config: FactoryAndParams,
+    public otherInstanceSim?: Map<ConstructorType<any>, any>
+  ) {
+    config.frontDistIndexFileName = config.frontDistIndexFileName || 'index.html';
+    // this.indexHTML = JsdomInitializer.loadFile(this.config.frontDistPath, config.frontDistIndexFileName);
+  }
+
+  async onInit(app: SimpleBootHttpServer) {
+    for (let i = 0; i < this.config.poolOption.min; i++) {
+      await this.pushQueue();
+    }
+
+    if (this.config.poolOption.clearIntervalTime && this.config.poolOption.clearIntervalTime > 0) {
+      this.intervalId = setInterval(() => {
+        this.poolGeneration++;
+      }, this.config.poolOption.clearIntervalTime);
+    }
+  }
+
+  async onDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+    // this.simpleBootFrontQueue.clear();
+    this.simpleBootFrontPool.forEach(front => {
+      (front as any).jsdom?.window.close();
+    });
+    this.simpleBootFrontPool = [];
+  }
+
+  async makePage() {
+    return new LinkedomInitializer(
+      this.config.frontDistPath,
+      this.config.frontDistIndexFileName || 'index.html',
+      { url: this.welcomUrl }
+    ).run();
+    // const jsdom = await new JsdomInitializer(
+    //   this.config.frontDistPath,
+    //   this.config.frontDistIndexFileName || 'index.html',
+    //   { url: this.welcomUrl }
+    // ).run();
+    // return jsdom;
+  }
+
+  async makeFront(window: Window) {
+    const name = RandomUtils.uuid();
+    (window as any).ssrUse = false;
+    const option = this.config.factorySimFrontOption(DomRenderProxy.final(window));
+    const simpleBootFront = await this.config.factory.create(option, this.config.using, this.config.domExcludes);
+    simpleBootFront.run(this.otherInstanceSim);
+    (simpleBootFront as any).generation = this.poolGeneration;
+    return simpleBootFront;
+  }
+
+  enqueueFrontApp(simpleBootFront: SimpleBootFront) {
+    // this.simpleBootFrontPool.set(simpleBootFront.option.name!, simpleBootFront);
+    this.simpleBootFrontPool.push(simpleBootFront);
+    this.simpleBootFrontQueue.enqueue(simpleBootFront);
+  }
+  async pushQueue() {
+    if (this.simpleBootFrontPool.length < this.config.poolOption.max) {
+      this.enqueueFrontApp(await this.makeFront(await this.makePage()));
+    }
+  }
+
+  async proceedBefore({ rr, app }: { rr: RequestResponse; app: SimpleBootHttpServer; carrier: Map<string, any> }) {
+    if (this.config.ssrExcludeFilter?.(rr)) {
+      return false;
+    }
+    if (rr.reqHasAcceptHeader(Mimes.TextHtml) || rr.reqHasAcceptHeader(Mimes.All)) {
+      if (this.simpleBootFrontQueue.isEmpty()) {
+        await this.pushQueue();
+      }
+      const simpleBootFront = await this.simpleBootFrontQueue.dequeue();
+      try {
+        (simpleBootFront.option.window as any).ssrUse = true;
+        delete (simpleBootFront.option.window as any).server_side_data;
+        const url = rr.reqUrlObj({ host: 'localhost' });
+        if (this.config.simpleBootFront?.notFoundError) {
+          // intent router check first
+          const intent = await simpleBootFront.getIntent(url.pathname);
+          // route를 못찾은상태에서 router path까지 안맞으면 404 처리한다.  route랑 router랑 다르니깐 헛갈리지말도록
+          if (intent.module === undefined && !intent.getRouterPathData(rr.reqUrlPathName)) {
+            throw new NotFoundError({ message: `Not Found: ${rr.reqUrlPathName}` });
+          }
+        }
+
+        // runRouting!!
+        const targetUrl = url.toString();
+        await simpleBootFront.goRouting(targetUrl);
+        await new Promise(r => setTimeout(r, 0)); // <--중요: 이거 넣어야지 두번불러지는게 없어지는듯? 뭐지 event loop 변경된건가?
+
+
+        // simpleBootFront.routingSubjectObservable.subscribe(it=>{
+        //   console.log('zzzzzzzzzzzzzzzzzzz', it);
+        //   if (it.triggerPoint==='end') {
+        //     console.log('zzz@@', it.routerModule.intent);
+        //   }
+        // })
+
+        const data = await firstValueFrom(
+          // @ts-ignore
+          simpleBootFront.routingSubjectObservable.pipe(
+          // @ts-ignore
+            filter(
+              (it) =>
+                it.triggerPoint === 'end' &&
+                typeof it.routerModule.intent.uri === 'string' &&
+                targetUrl.endsWith(it.routerModule.intent.uri)
+            ),
+            // delay(1000),
+            first()
+          )
+        );
+        // console.log('???????done');
+        const html = this.makeHTML(simpleBootFront);
+        await this.writeOkHtmlAndEnd({ rr }, html);
+      } finally {
+        (simpleBootFront.option.window as any).ssrUse = false;
+        delete (simpleBootFront.option.window as any).server_side_data;
+        if ((simpleBootFront as any).generation < this.poolGeneration) {
+          // Stale instance, destroy it
+          const jsdom = (simpleBootFront as any).jsdom as JSDOM.JSDOM | undefined;
+          jsdom?.window.close();
+          const index = this.simpleBootFrontPool.indexOf(simpleBootFront);
+          if (index > -1) {
+            this.simpleBootFrontPool.splice(index, 1);
+          }
+          this.pushQueue();
+        } else {
+          // Current instance, return to queue
+          this.simpleBootFrontQueue.enqueue(simpleBootFront);
+        }
+      }
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  makeHTML(simpleBootFront: SimpleBootFront) {
+    (simpleBootFront.option.window as any).document.querySelectorAll('*').forEach((el:HTMLElement )=> {
+      Array.from(el.attributes).forEach(attr => {
+        if (/^dr-/.test(attr.name) || /^domstyle/.test(attr.name) || /this-path/.test(attr.name)) {
+          el.removeAttribute(attr.name);
+        }
+      });
+    });
+    let html = simpleBootFront.option.window.document.documentElement.outerHTML;
+    html = '<!DOCTYPE html>' + html;
+    html = html.replace(/\$\{[\s\S]*?\}\$/g, '');
+    const serverSideData = (simpleBootFront.option.window as any).server_side_data;
+    if (serverSideData) {
+      const data = Object.entries(serverSideData)
+        .map(([k, v]) => {
+          if (typeof v === 'string') {
+            return `window.server_side_data.${k} = ${v}`;
+          } else {
+            return `window.server_side_data.${k} = ${JSON.stringify(v)}`;
+          }
+        })
+        .join(';');
+      if (data) {
+        html = html.replace('</head>', `<script> window.server_side_data={}; ${data}; </script></head>`);
+      }
+    }
+    return html;
+  }
+  async writeOkHtmlAndEnd({ rr, status = HttpStatus.Ok }: { rr: RequestResponse; status?: HttpStatus }, html: string) {
+    rr.resStatusCode(status);
+    rr.resSetHeader(HttpHeaders.ContentType, Mimes.TextHtml);
+    await rr.resEnd(html);
+  }
+
+  async proceedAfter({ rr, app }: { rr: RequestResponse; app: SimpleBootHttpServer; carrier: Map<string, any> }) {
+    return true;
+  }
+}