Feature request: server-side rendering

[stepancheg]

It would be perfect if codejar provided a react component which would work in both server and browser environments.

The second best option is a function like render(text) which would work on the server and return an HTML, identical on both sides. So re-rendering this HTML on the client would not cause page jump/blink. This function could be used to implement react component.

The third best option is a function like render(text) which would work on the server, and return HTML without syntax highlighting, so that re-rendering the same component in the browser only caused highlighting change, but no size/position changes.

Why it is important:

• server-side rendered pages are friendlier to search engines, slow internets and slow computers and people who disable JS
• when a page is only partially rendered on the server (with everything rendered on the server, but text editor rendered on the client), the page jumps/blinks on load, which is suboptimal from UX point of view

[antonmedv]

I think this is unrelated to codejar. CodeJar is code editor. Html generation should be done by your highligting function.

[stepancheg]

CodeJar modifies style attributes of existing HTML, so to replicate initial rendering, a part of CodeJar sources would need to be copied into client code. But as you say...

[antonmedv]

CodeJar modifies it only on user triggered events. I think you should take better look at docs and/or source code. If you need SSR proceed with your highlight func, codejar is obsolete on server.

[stepancheg]

CodeJar also modifies style on initialization: here.

[antonmedv]

Yes, true. I forgot about it.

[cheuksing]

I don't think this makes any sense, it has no reason to init code-jar during SSR. The purpose of the editor is handling user events and this only happens on the client-side.

During SSR, if you want to highlight your code block, just use highlight.js and sent the pre-processed HTML to the client. If you use prism.js, it doesn't work in a server environment and you need node-prism.js.

In the script @stepancheg mentioned, code-jar detects client browser to apply a suitable style, with a browser-only API. Although the user can pass the HTML request header to code-jar during initialization, this makes things very complex.

I think a better and cleaner approach is to render a placeholder in serverside and initialize code-jar and highlight codes in clientside.

[stepancheg]

I think a better and cleaner approach is to render a placeholder in serverside

That's exactly what I would want.

highlight codes in clientside.

We could also highlight code on the server-side too (to avoid page blinking at client page rerender), but that's a lesser issue.

code-jar detects client browser to apply a suitable style

As far as I see, the only difference between browsers is contentEditable attribute, which does not affect rendering.