server side rendering - Is there a way to compile an Angular component/module to Node module?

Question

I'm trying to compile an Angular module (or preferably a component) to its Node render-ready equivalent, and cache the compiled version in order to render it later with proper @Input (props), and finally, serving the user with generated HTML document string. I found @angular/platform-server's renderModuleFactory and renderModule functions which render a module by a url argument and returns the generated HTML in whole. Furthermore, I realized that it is using domino (1, 2, 3) in its heart as a virtual DOM, and run the SPA application on top of that virtual DOM using passed url argument.

My question is:

Is there a way to separate compilation of a module (or a single component) for two targets, a Node module target and a browser's DOM target? Where the Node module one has a render method which receives initial props, then renders (and returns) the final HTML string based on that?

The basic idea is what has already been implemented in Svelte, where you can compile a component for two separate targets (by setting generate option for the compile function). The Node (generate: 'ssr') version of the compiled component has a render method which accepts initial props for the component, and it generates the HTML string ready to be sent to the browser without any need for virtual DOM on the server. Also, if you want your page to be interactive, you should compile the component for browser (generate: 'dom'). Finally, when the application gets initialized on the browser, they get hydrated (more on client-side hydration here).

Is there a way to achieve the similar result on Angular without utilizing a virtual DOM on the server?

Thanks for your attention, and any help is appreciated!

question from:https://stackoverflow.com/questions/65873497/is-there-a-way-to-compile-an-angular-component-module-to-node-module

Answer 1

Waitting for answers