SolidJS•3d ago

SSG / Partial Hydration

Hello all, I am doing SSG without SolidStart and it works for the most part, but I can't get on click to work on a button. My current flow is: I am using --ssr to build via entry-server, which renderToStrings the Landing page. The Landing Page has a placeholder div. Using entry server, I am also injecting my generateHydrationScript script, and remaining js, including entry-client. Using the entry-client, I hydrate the component into the div and it renders, however, when I click it, nothnig happens. I expected it to log to console. No errors from hydration either. Are there any sample projects or detailed articles I can look at on the topic? I am currently stuck and don't really have any directions.

14 Replies

zulu•3d ago

is your project on github?

AKOP•3d ago

it isn't. currently working on a private project

zulu•3d ago

no problem, wanted to see what is going on I don't know about samples, so wait until others reply

AKOP•3d ago

thanks OK so I was able to create a sample project that represents the private repo.

AKOP•3d ago

https://github.com/gh-awk/ssg-sample/

GitHub

GitHub - gh-awk/ssg-sample: SolidJS SSG sample

SolidJS SSG sample. Contribute to gh-awk/ssg-sample development by creating an account on GitHub.

AKOP•3d ago

use "npm run preview" to build and see the results. the button is not included in the initial Home.jsx file, instead there is a div placeholder but when the page loads, it properly renders it in the placeholder. but if i click it, nothing in the console * entery-server.jsx, renders home.jsx (ssg) * generate.js uses entry-server.js file to update index.html with the ssg output from home and injects the hydration scripts + client-entry.js * client-entry.js hydrates my actual entry-server is much more complicated where i ssg certain routes and not others, I only mention this here just in case, I do figure this out and someone else in the future has a similar need

zulu•3d ago

looks like

function eventHandler(e) {
  if (sharedConfig.registry && sharedConfig.events) {
    if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
  ...

function eventHandler(e) {
  if (sharedConfig.registry && sharedConfig.events) {
    if (sharedConfig.events.find(([el, ev]) => ev === e)) return;
  ...

is exiting because of this rule

if (sharedConfig.events.find(([el, ev]) => ev === e)) return;

if (sharedConfig.events.find(([el, ev]) => ev === e)) return;

and it does not let the element process event attached to it

zulu•3d ago

based on the repo it looks like the server and the client are not symmetric on the server entry you are rendering <Home> on the client entry you are rendering <Button> and then you try to mount it to the placeholder so the client never fully finish the hydration process as it would have expect, there are no hydration mismatch errors but the because the hydration is not completed, it keep queuing the events for later https://stackblitz.com/edit/github-hzsxcafw-betnujgs?file=src%2Fentry-server.jsx I think, I am not too sure if it is the correct definition, but if what you did was intentional, you are probably looking into something like islands / partial hydrations https://github.com/solidjs/solid/issues/264

GitHub

Partial Hydration · Issue #264 · solidjs/solid

This is the last core feature missing in our SSR story. Truth be told outside of Marko most libraries aren't doing amazing here. We can too consider a more manual approach here at first. I thin...

AKOP•3d ago

Thank you so much for digging into it. I'll look at partial hydration. On the symmetry part, for what it's worth, I added <Button/> in the home.jsx (so it's rendered on the server side too). The server rendered and the one hydrated on are the same with the exception of data-hk attribute. the server rendered has the attribute. the hydrated doesn't. I'll look at link you sent. thanks.

zulu•3d ago

the client start hydration from the button an then kind of patch the server rendered dom for the basic ssr to work it needs to run from the same root, it will use the data-hk hydration markers. you can see that it works in the stackblitz link I sent. when the hydration is proper. I don't know how well documented is the partial hydration in solid is, but good luck. it seem that this magic is a trade secret. if you have any luck let me know

AKOP•3d ago

i get a blank page in the rendered side panel when I click the stackblitz link. how do i get it to render?

zulu•3d ago

in the terminal press ctrl+c then run npm run build and then vite preview dev does not work for this

AKOP•2d ago

got it, thanks @zulu figured it out! I updated the sample and added a readme that explains it. man, this problem vexed me for 3 weeks so happy that i finally figured it out. thanks for your help, it really set me on the right track. the key is to use <NoHydration> and <Hydration>. You must hydrate starting with the root so you can mark everything NoHydration

zulu•16h ago

awesome 😄

Gaming

Programming

SSG / Partial Hydration

Did you find this page helpful?