Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

A resource on vdom based static site generators #20

Open
ghost opened this issue Jun 29, 2021 · 2 comments
Open

A resource on vdom based static site generators #20

ghost opened this issue Jun 29, 2021 · 2 comments

Comments

@ghost
Copy link

ghost commented Jun 29, 2021 •
edited by ghost
Loading

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
Copy link
Owner

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
Copy link
Author

ghost commented Jun 29, 2021 •
edited by ghost
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@patricoferris