ultra
ultra copied to clipboard
Is SSR cache HTML escaped in the HTML inline script for client side hydration?
Recently I fixed SSR cache data not being HTML escaped within the HTML inline script for client side hydration in Ruck v7.0.0:
https://github.com/jaydenseric/ruck/commit/da7fb7d445128c22a32bd2f1fbf6fd5e1bc12886
Basically, if the JSON contains HTML it could cause the HTML inline script to terminate early and the rest of the JSON would be rendered on the HTML page by the browser. I discovered this when a Ruck app page for a blog post had the blog post markdown that contained a HTML image tag queried from the GitHub gist API, which gets cached during SSR and hydrated on the client.
I tried to see how Ultra handles the same thing, and it seems it doesn’t? Is this where a cache data JSON string is being used as a raw JavaScript value for a HTML inline script?
https://github.com/exhibitionist-digital/ultra/blob/82ea9bebd6abf70a4a7ec97bf5632c847b5d2c49/src/render.ts#L130-L132
I'm not sure how Aleph.js works but it seems they might also have the same issue:
https://github.com/alephjs/aleph.js/blob/19b337b0335e2766cd1df4ad753f9d8352a302e3/server/renderer.ts#L226
I struggled to see how Fresh handles it, but maybe they don't do it right either? Perhaps here?
https://github.com/denoland/fresh/blob/216f1dc1fb72bb7fabbd14354b4cd30d5f98974e/src/server/render.tsx#L244-L246
Building and hydrating SSR cache is now user controlled -- Here is an example https://github.com/exhibitionist-digital/ultra/blob/main/examples/with-react-query/src/hooks/useDehydrateReactQuery.tsx#L24-L25
I've added a link to the known limitations around dehydrated state.