diff --git a/package.json b/package.json index 0c450f0b..d0d36ab7 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "country-emoji": "^1.5.6", + "isbot": "^3.6.6", "joi": "^17.8.1", "normalize.css": "^8.0.1", "prop-types": "^15.8.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ba862d2f..bf534b36 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,7 @@ specifiers: eslint: ^8.34.0 eslint-config-wesbos: ^3.2.3 husky: ^8.0.3 + isbot: ^3.6.6 joi: ^17.8.1 lint-staged: ^13.1.2 normalize.css: ^8.0.1 @@ -54,6 +55,7 @@ dependencies: '@types/react': 18.0.28 '@types/react-dom': 18.0.11 country-emoji: 1.5.6 + isbot: 3.6.6 joi: 17.8.1 normalize.css: 8.0.1 prop-types: 15.8.1 @@ -4895,6 +4897,11 @@ packages: resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==} dev: true + /isbot/3.6.6: + resolution: {integrity: sha512-98aGl1Spbx1led422YFrusDJ4ZutSNOymb2avZ2V4BCCjF3MqAF2k+J2zoaLYahubaFkb+3UyvbVDVlk/Ngrew==} + engines: {node: '>=12'} + dev: false + /isexe/2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} diff --git a/src/entry.server.tsx b/src/entry.server.tsx index 253d2c5b..daca8b3d 100644 --- a/src/entry.server.tsx +++ b/src/entry.server.tsx @@ -1,84 +1,70 @@ -import { PassThrough } from 'stream'; import type { EntryContext } from '@remix-run/node'; -import { Response } from '@remix-run/node'; import { RemixServer } from '@remix-run/react'; -import { renderToPipeableStream } from 'react-dom/server'; +import { renderToReadableStream } from 'react-dom/server'; const ABORT_DELAY = 5000; type CachedResponse = { - html:string; + html: string; date: Date; } const cache = new Map(); - -export default function handleRequest( +export default async function handleRequest( request: Request, responseStatusCode: number, responseHeaders: Headers, remixContext: EntryContext ) { + console.log('😆'); console.log(request.url); - // check if we have a cached response in memory - const cachedResponse = cache.get(request.url); - if (cachedResponse) { - console.log('Serving from cache', request.url); - // if we have a cached response, check if it's less than 5 seconds old - const now = new Date(); - const diff = now.getTime() - cachedResponse.date.getTime(); - if (true || diff < 5000) { - // if it's less than 5 seconds old, return the cached response - responseHeaders.set('Content-Type', 'text/html'); - return new Response(cachedResponse.html, { - headers: responseHeaders, - status: responseStatusCode, - }); - } - } + // // check if we have a cached response in memory + // const cachedResponse = cache.get(request.url); + // if (cachedResponse) { + // console.log('Serving from cache', request.url); + // // if we have a cached response, check if it's less than 5 seconds old + // const now = new Date(); + // const diff = now.getTime() - cachedResponse.date.getTime(); + // if (true || diff < 5000) { + // // if it's less than 5 seconds old, return the cached response + // responseHeaders.set('Content-Type', 'text/html'); + // return new Response(cachedResponse.html, { + // headers: responseHeaders, + // status: responseStatusCode, + // }); + // } + // } - return new Promise((resolve, reject) => { - let didError = false; - const chunks: Uint8Array[] = []; + let didError = false; + const chunks: Uint8Array[] = []; - const { pipe, abort } = renderToPipeableStream( - , - { - onShellReady: () => { - const body = new PassThrough(); - - body - .on('data', (data) => { - chunks.push(data); - }) - .on('end', () => { - const html = Buffer.concat(chunks).toString('utf8'); - cache.set(request.url, { html: html.replace('Rendered Fresh', `Served from Cache ${new Date().toString()}`), date: new Date() }); - }) - - responseHeaders.set('Content-Type', 'text/html'); - - resolve( - new Response(body, { - headers: responseHeaders, - status: didError ? 500 : responseStatusCode, - }) - ); - - pipe(body); - }, - onShellError: (err: unknown) => { - reject(err); - }, - onError: (error: unknown) => { - didError = true; - - console.error(error); - } + const body = await renderToReadableStream( + , + { + onError: (error: unknown) => { + didError = true; + console.error(error); } - ); + } + ); + console.log(body); + + // body + // .on('data', (data) => { + // console.log('data', data); + // chunks.push(data); + // }) + // .on('end', () => { + // const html = Buffer.concat(chunks).toString('utf8'); + // cache.set(request.url, { html: html.replace('Rendered Fresh', `Served from Cache ${new Date().toString()}`), date: new Date() }); + // }) + + const headers = new Headers(responseHeaders); + headers.set("Content-Type", "text/html"); + new Response(body, { + headers, + status: didError ? 500 : responseStatusCode, + }) - setTimeout(abort, ABORT_DELAY); - }); }