ETag and new Remix + React 18 + streaming setup

[gonstoll]

Hello! How does one setup etags now with the new structure on entry.server.tsx? Where previously you got the markup from the renderToString function:

const markup = renderToString(
  <RemixServer context={remixContext} url={request.url} />
);
headers.set("Content-Type", "text/html");
headers.set("ETag", etag(markup));

Now I don't know how to operate with the new createReadableStreamFromReadable that returns a ReadableStream instead of plain markup.

[kiliman]

With streaming, you no longer have the entire markup before sending the Response to the client.

If you want to use Etag, then it's best to generate that based on your content rather than the resulting HTML.

Something like this:

// routes/blog.$.tsx

// return the Etag headers for full document requests as well
export const headers: HeadersFunction = ({ loaderHeaders }) => loaderHeaders

export async function loader({ request, params }: LoaderFunctionArgs) => {
  let slug = params['*']
  const post = await getPost(slug)
  if (!post) {
    throw new Response('Not Found', { status: 404 })
  }
  const weakHash = generateWeakHash(JSON.stringify(post))
  const etag = request.headers.get('If-None-Match')
  if (etag === weakHash) {
    return new Response('Not Modified', { status: 304 })
  }
  return json({ post }, { headers: { 'Etag': weakHash } })
}

[gonstoll]

This makes soooo much sense! Thank you @kiliman!

[reloadedhead]

Hey, sorry for jumping in here, but I figured I'd rather ask here instead of adding ! I've started implementing caching and use of etags in a Remix project of mine. Behaviour is great, but I am having trouble with type inference. By returning a new response object with no body, I loose type inference from useLoaderData:

export async function loader() {
  /* stuff */

  const etag = md5(/* calculate my etag */)
  if (etag === request.headers.get("If-None-Match")) {
    return new Response("Not modified", { status: 304 });
  }

  return json(/* my stuff */)
  
}

Type inference for the return of useLoaderData<typeof loader>() is any. Any idea how could I fix this?

[gonstoll]

Yeah I remember bumping into this back then. This is how I solved it. I basically type casted the result when etag is matching:

export async function loader({request}) {
  const data = getData(request)
  const weakHash = md5(JSON.stringify(data))
  const etag = request.headers.get('If-None-Match')
  if (etag === weakHash) {
    return json('' as unknown as {data: typeof data}, {status: 304})
  }
  const headers = {ETag: weakHash}
  return json({data}, {headers})
}

As long as you keep your return signature in sync between both cases useLoaderData will infer stuff right. Another route you can take is discriminate both responses:

export async function loader({request}) {
  const data = getData(request)
  const weakHash = md5(JSON.stringify(data))
  const etag = request.headers.get('If-None-Match')
  if (etag === weakHash) {
    return json({type: 'not-modified' as const}, {status: 304})
  }
  const headers = {ETag: weakHash}
  return json({type: 'success' as const, data}, {headers})
}

Then you can check against type === 'success' on your component and get data inferred correctly. Tho arguably this is a suboptimal approach as you don't really care about which type your response is at the component level, you always want to render the same. For that reason I chose to go with the first option.

[reloadedhead]

Thanks for the response! I was hoping for something more elegant than casting, but I guess this is a very edge case. Given that the spec expects no body with a 304 response I ended up with

if (etag === request.headers.get("If-None-Match")) {
    return new Response(undefined, { status: 304 }) as unknown as { stuff: typeof myStuff };
}

Feels fishy but since the browser won't access the response's body I guess its fine.

Anyways, gracias 🧉

[angelinekwan]

With the json being deprecated and will be removed in React Router v7 in favor of Single Fetch. Based on the docs, it mentioned can replace json with data

If you were returning headers or status via json, you can use the new data util as a drop-in replacement to set those values.

Based on @kiliman example, replacing json with data

return json({ post }, { headers: { 'Etag': weakHash } }) -> return data({ post }, { headers: { 'Etag': weakHash } })

This would result in a TypeScript error in the component where it uses useLoaderData<typeof loader>(). Since now the loader returns serialized data, TypeScript sees it as a JsonifyObject, which may not have the exact same structure or property types as the original LoaderData type. Is there suggestion on how to resolve this typescript issue? 🙏