better-react-mathjax icon indicating copy to clipboard operation
better-react-mathjax copied to clipboard

Render MathJax in the backend (SSR)

Open fast-reflexes opened this issue 3 years ago • 3 comments

There has been discussion around this earlier and now it seems NextJS 13 is supporting serverside components. This makes it more interesting to look into using the MathJax library itself to generate MathJax n the serverside and then not downloading MathJax in the frontend at all.

fast-reflexes avatar Nov 04 '22 16:11 fast-reflexes

Just to avoid people finding the wrong resource: https://docs.mathjax.org/en/latest/server/start.html links to official examples.

A common problem is that some client-side features are lost when rendering server-side, e.g., the mathjax menu (and everything it enables) depends on client-side rendering and there's currently no hydration solution (besides re-rendering).

You can do a lot of things server-side however (e.g., generate descriptions for accessibility) and it's sometimes easier to just build your own for these missing features (e.g., copy&paste for sources).

pkra avatar Nov 07 '22 10:11 pkra

Good points. And I know accessibility is a very important concern of the Mathjax creators so definitely worth to thread lightly here.

fast-reflexes avatar Nov 07 '22 15:11 fast-reflexes

I personally prefer SSR and have built (with help from the MathJax team) a lightweight helper that makes expressions explorable on the client (see the last examples on github pages). While it's naturally possible to do this on the client, too, I suspect most people would prefer the standard client-side MathJax experience.

Given how MathJax works the full experience invariably needs re-rendering - which might still be done efficiently (e.g., via an instant.page or quicklink kind of approach).

pkra avatar Nov 08 '22 07:11 pkra