search

patricoferris / sesame

A site generator in OCaml 🐫 (OCurrent pipelines too)
https://patricoferris.github.io/sesame/
MIT License
70 stars 6 forks source link

A resource on vdom based static site generators #20

Open ghost opened 3 years ago

ghost commented 3 years ago

The following might be useful if you start to go down the path of incorporating jsoo w/vdom library. The link below is an early commit in react-static, which is one of the simpler React based static site generators. It demonstrates walking through a routing tree and invoking render on a set of React components corresponding to each route. I'm not sure if there is an equivalent of hydrate in any of the jsoo vdom libraries currently.

https://github.com/react-static/react-static/blob/e01098637b05f25f0f9e8009a4dafbc36b6e9878/build.js

Feel free to close this issue now or leave it open as a thread for designing jsoo integration.

patricoferris commented 3 years ago

Thanks @kanishka-work :))

I've been doing some FRP recently with Brr_note and that's been fun. More and more Sesame and in particular current-sesame is becoming a website building orchestration tool with the sesame library providing some primitives (jekyll-format parsing, limited image optimisation etc.). For the Javascript story there are two options I think I will ultimately recommend:

  1. Something like alpinejs is perfect for a lot of the little UI showing and hiding that people want to do.
  2. For jsoo incorporation I'm thinking I could provide a Current_dune (or just Current_jsoo but dune takes care of a lot of the OCaml building) plugin that will watch a directory, build the results and return the js file that could be served or copied to an out directory. That way, you are only limited by what jsoo is limited by.

I'm going to keep this open though because I don't fully understand the hydration + jsoo idea but it sounds quite interesting so I'd like to return to it when I have some more time :)) Thanks again!

ghost commented 3 years ago

build the results and return the js file that could be served or copied to an out directory

The only thing I would add here is that you want to aim for the following...

On first entering the site, you will want to have a page like:

<body>
<div id="main">
<! -- prerendered stuff -->
<h1>Title</h1>
...
</div>

and you will want jsoo to take over "main" and mount the application ("hydrate") over that dom node.

I think that's the minimum you need to achieve decent lighthouse scores and be compatible with SEO. A next step after that is to implement code splitting.

NextJS also has a concept of prefetching pages when a user hovers over a link, which might be fast enough where the pretender isn't needed for lighthouse performance scores..At that point, you would only use pretender for SEO.