htm icon indicating copy to clipboard operation
htm copied to clipboard

How to use with server side rendering?

Open balupton opened this issue 5 years ago • 8 comments

It would be nice if there was documentation on how to use this with server side rendering.

Such that:

  1. Server sends the prerendered compontent
  2. Client receives the prerendered component and makes it interactive for the user

balupton avatar Dec 24 '18 01:12 balupton

For now, the best result I've found is this:

https://zeit.co/blog/seamless-serverless-markup-htm

balupton avatar Dec 24 '18 01:12 balupton

@balupton based on this blogpost, I made a small example with data fetch & SSR: https://github.com/goldo/serverless-htm-now

I guess if you want to to make the client interactive, you would code just nearly as you would have done with React. Here's a good example: https://www.youtube.com/watch?v=Y5cGZqrSQTM

goldo avatar Dec 26 '18 02:12 goldo

You could use esm to import es modules: https://github.com/kristoferjoseph/arc-ssr-esm/

kristoferjoseph avatar Mar 25 '19 20:03 kristoferjoseph

One could probably pair htm, react, and pika for client and server side rendering on cloudflare workers right? With terraform for deployment? I think that would be a sweet combo. As zeit ends up costing me about $5/month anyway, due to need for many deployments a month.

balupton avatar Apr 10 '19 06:04 balupton

It would be nice if there was documentation on how to use this with server side rendering.

Such that:

  1. Server sends the prerendered compontent
  2. Client receives the prerendered component and makes it interactive for the user

I am also looking for a good implementation or this, without any need for transpile in dev environment.

I have also done something similar to @goldo's approach, but I'm afraid it doesn't cut it when it comes to components.

Hooks can be a solution, but to me it seems like we have to give up a bit too much flexibility when ruling out components entirely.

mfolkeseth avatar Apr 15 '19 11:04 mfolkeseth

I created a small demo to make it work-ish. Although I had to use some dependency injection of htm and vhtml to make it render seamless on server and client. I also had to rely on a Hooks-inly implementation. Not too keen on this opinionated implementation tho.

Take a look here if you are interested https://github.com/mfolkeseth/dvlp-test. Some feedback towards a better approach would be very much appreciated 👍

mfolkeseth avatar Apr 16 '19 12:04 mfolkeseth

@balupton Check out this approach for server side render without heavy transpiler https://github.com/mfolkeseth/dvlp-test.

Or check out dvlp if you want to roll your own implementation.

mfolkeseth avatar Apr 25 '19 07:04 mfolkeseth

I'm guessing as cloudflare-workers is web workers, they should have the dom apis available, so they should be able to run htm (via a bundler) without anything fancy right?

balupton avatar Jun 17 '20 06:06 balupton