try content-visibility: auto

package.json

@@ -44,7 +44,7 @@
   },
   "scripts": {
     "build": "netlify build",
-    "dev": "NODE_ENV=development remix dev"
+    "dev": "NODE_ENV=development netlify dev"
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",

src/entry.server.tsx

@@ -32,8 +32,7 @@ export default async function handleRequest(
 ) {
   // check if we have a cached response in memory
   const cachedResponse = cache.get(request.url);
-  const isBuildUrl = request.url.includes('/build/');
-  if (cachedResponse && !isBuildUrl) {
+  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();
@@ -64,15 +63,13 @@ export default async function handleRequest(
   // tee the stream so we can cache it and send it to the client
   const [toReponse, toCache] = body.tee();
 
-  if (!isBuildUrl) {
     streamToText(toCache).then(html => {
       console.log('Caching', request.url);
       cache.set(request.url, {
         html: html.replace('Rendered Fresh', `Rendered from cache ${new Date().toISOString()}`),
         date: new Date(),
       });
     });
-  }
 
   const headers = new Headers(responseHeaders);
   headers.set("Content-Type", "text/html");

src/styles.css

@@ -97,8 +97,8 @@ body::-webkit-scrollbar-thumb {
   grid-template-rows: 1fr auto auto;
 }
 
-.PersonWrapper:nth-child(5) {
-  background: green;
+.PersonWrapper:nth-child(6n) ~ .PersonWrapper {
+  content-visibility: auto;
 }
 
 .PersonInner {