Lit-html: Nodejs implementation

[lukasoppermann]

Hey,

I was wondering if there is a plan to make lit work with nodejs so that the templates can be rendered on the server? I am wondering if this will become a valid alternative for handlebars.

[web-padawan]

There is a community project of this kind, but I'm not sure how actively is it maintained: https://github.com/motss/lit-ntml

[lukasoppermann]

Hey, thanks for getting back to me. I have seen this, but would be more comfortable if the main project actually supports it. Lit-ntml is a reimplementation, correct? Not just an adapter using the lit-html library?

[web-padawan]

You are right, it is a reimplementation.

See also https://github.com/Polymer/lit-html/issues/516#issuecomment-439652792

[web-padawan]

Another library which you might be interested in: https://github.com/popeindustries/lit-html-server

[lukasoppermann]

Thanks, I will look into it.

From the referenced #516

However, is Server-side rendering still on track for 1.0 (as stated 1.0 Roadmap)?
By the way, do you have any hint about 1.0?

Is it? Where is this roadmap. I feel this could be pretty neat, as it means one can reuse the same code for server and front-end rendering, for e.g. when I want to prepare all pages but update some content when the user interacts with it.

[justinfagnani]

So this is definitely on our short list of priorities for early 2019. We'll be doing some exploration in the next few weeks, but my initial idea is to create an even stronger separation between html and render() so that you can use the same import for html to define templates, but a different render() function to stream chunks of templates and values out.

That part is relatively easy I think. The more complex parts will be around client-side hydration.

[lukasoppermann]

Awesome. Client-side hydration is not something that lit-html would be concerned with though, right? That would be for something else or done by the individual developer.

[popeindustries]

@lukasoppermann hydration generally refers to the process of converting your static, server-rendered html into a dynamic, client-side representation based on the template shared between the two environments. So, in the case of lit-html, we need a way to convert the html string generated on the server into the <template>-backed instances used by lit-html in the browser.

Most hydration phases also require that the data used to render the template on the server is also present on the client to "synchronize" state and html output between the two environments. So given the same template and data, the output on the server and client should be equivalent. If not, the client would most likely have to do a full re-render instead of re-using the server rendered html.

[popeindustries]

@justinfagnani very interesting idea to share a common html function. I guess the challenge there will be avoiding the cost of a "virtual-dom" type of intermediate data structure. I'm sure this cost could be mitigated on the server if it's possible to reuse instances between render calls, but my initial hunch is that there is a considerable performance benefit to "storing" the templates as plain tagged template strings. In any case, it will be fun to explore the possibilities!

[popeindustries]

Inspired by @justinfagnani's idea, I've taken the last few days to refactor lit-html-server to enable caching of parsed templates, as well as align the design as much as I felt practical with that of lit-html. So far, the performance benefits are very encouraging!

Take a look at popeindustries/lit-html-server#3 if you're interested in the code, or install @popeindustries/lit-html-server@beta to try it out!

[balupton]

Why was this closed? Has lit-html accomplished this now with an official builtin solution?

[jridgewell]

I think it's being de-duplicated to https://github.com/Polymer/lit-html/issues/187.