Merge pull request #1543 from wesbos/slow-html

Testing content-visibility: auto
This commit is contained in:
Wes Bos 2023-02-23 11:07:42 -05:00 committed by GitHub
commit c8555e195d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 6050 additions and 49 deletions

View file

@ -32,6 +32,7 @@
"country-emoji": "^1.5.6",
"isbot": "^3.6.6",
"joi": "^17.8.1",
"netlify-cli": "^13.0.0",
"normalize.css": "^8.0.1",
"prop-types": "^15.8.1",
"react": "^18.2.0",
@ -42,9 +43,8 @@
"typescript": "^4.9.5"
},
"scripts": {
"build": "remix build",
"dev": "NODE_ENV=development remix dev",
"start": "remix start"
"build": "netlify build",
"dev": "NODE_ENV=development netlify dev"
},
"devDependencies": {
"@types/styled-components": "^5.1.26",

File diff suppressed because it is too large Load diff

View file

@ -1,7 +1,7 @@
const { config } = require("@netlify/remix-edge-adapter");
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
...config,
...(process.env.NETLIFY || process.env.NETLIFY_LOCAL ? config : {}),
appDirectory: "src",
future: {
unstable_postcss: true,

View file

@ -12,7 +12,7 @@ export default function Person({ person }) {
const img = `https://images.weserv.nl/?url=${unavatar}&w=100&l=9&af&il&n=-1`;
const { tag: currentTag } = useParams();
return (
<div className="PersonWrapper">
<div className="PersonWrapper" style={{ contentVisibility: "auto" }}>
<div className="PersonInner">
<header>
<img

View file

@ -33,7 +33,7 @@ export default async function handleRequest(
// check if we have a cached response in memory
const cachedResponse = cache.get(request.url);
if (cachedResponse) {
console.log('Serving from cache', request.url);
// 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();
@ -63,13 +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();
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(),
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");