How SolidStart SSR (& hydration) work?
I would like to know how SSR work in SolidStart.
When HTML DOM add to web page and render in server, it sends to client side (browser). Then client side handle events, states etc. (Dynamic parts). is this correct, how Solid knows Components or DOM to handle events (referencing) ? It has pre rendered content before JS load in client side (browser).
When use SolidJS, JS return DOM and reference to the code within the JS code like button click event. How solidstart reference it when DOM in page not in JS file?
If SSR use following method, it can handle dynamic parts like solidjs.
Sever Side DOM ---> Client Side Solid Code ---> Render. (This method need to run JS after page full load so SSR may not be this method)
If you can explain it with code, it will be better.
Old days PHP use for SSR and JS or JQuary use to handle event by referencing ID value or Class values.
20 Replies
It adds comments to the html-string so it knows which parts are which.
thank you for information. I could not find any example codes for SSR in solidstart. is there have any recommend sites?
I am not 100% sure what you mean with
any examples codes for SSR in solidstart all examples in solidstart are about SSR.
Maybe I wasn't clear with my answer, you as a developer do not have to think about those html-comments, it's an implementation detail of the framework.
You mentioned in the other thread you had experience with PHP+jQuery. In that situation it is the developer who links the html output with the js.
With metaframeworks it is the framework itself who links the js with the html, because it has knowledge of the code in the back and front-end. This process of linking html with javascript is called hydration.
To communicate to itself which parts of the DOM relate to which part of the codebase, it uses these html-comments.
Other data/state that exists in your app that needs to cross from server to client is serialised and streamed into the html.
This again is not something developers have to think about, but is automagically ✨ done by the framework (and seroval, a serialiser made by Alexis, one of the core members of solid).
The big dream of meta frameworks is to blur the line between server and client.And that dream/imagination goes pretty far.
In PHP days if you did a request on the server, you had to wait for it to be completed to start sending the html back to the client.
But with solidstart you don't even need to do that: even promises get serialised! This means that you can start a request, immediately send all the code and html that does not depend on this request (because of
<Suspense/> see https://youtu.be/oQ1zn7cdtyU?si=0vW1xZ8w9vCN6WZX for a great video on that topic. Really 🤯 my mind) and once the request is completed stream the response to the client.Future Frontend
YouTube
Ryan Carniato - SolidJS: Why all the Suspense?
In this talk Ryan discusses SolidJS and its relationship with React's Suspense.
Slides: https://docs.google.com/presentation/d/1NoJtBdpf13noV-4MebYMZkhJhWn4Y79-7f00SlSCAmc
Oh I thought solidstart codes are combination of code. Client side and Server side. Thank you very much for information.
I wounder how to reference DOM with JS. Now it is clear. I also thought, if that can link HTML DOM with JS, someone can create packages for python, PHP, rust to send HTML with comments from server like JS do. So then can make full stack frameworks. Just an idea.
Thank you for information. Very helpful.
you are welcome!
I also thought, if that can link HTML DOM with JS, someone can create packages for python, PHP, rust to send HTML with comments from server like JS do.this is absolutely possible 🙂 but you need a common protocol. I remember I saw @ParasocialFix made an rsc implementation in golang. pretty cursed but it's possible 🙂
GitHub
GitHub - JLarky/strike: Let's GO and create React Server Components
Let's GO and create React Server Components. Contribute to JLarky/strike development by creating an account on GitHub.
What do you mean cursed? 🙂 this is inspired by framework called Bud, it does SSR for Svelte but it's written in Go
GitHub
GitHub - livebud/bud: The Full-Stack Web Framework for Go
The Full-Stack Web Framework for Go. Contribute to livebud/bud development by creating an account on GitHub.
And one for PHP is called inertia https://inertiajs.com/
Inertia.js - The Modern Monolith
Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
Do you know why like this community? They talk about real engineering stuff, not just about a product. That is what I like.
Cool. That means you know protocol. Hope you make a package for rust, that work with solid. :start:
For Rust there's Leptos, which is re-implementing Solid in Rust basically 🙂 https://www.youtube.com/live/zgY7ql1xwW4?si=CdcqUv47c796yq5d
Ryan Carniato
YouTube
Building Web UI's in Rust w/ Greg Johnston
Today we are going to learn about building Web UIs in Rust. I've been watching the evolution of WASM DOM performance and in the past few months there has bee...
It's one of the fastest frameworks to render on the server as well as I think the fastest wasm framework for client side rendering speeds
yeah. I mean Rust package for SSR. Client side use Solid JS not WASM. But I think future will be WASM.
I have plans to play with Solid once my RSC stuff is done, I still not 100% how that could look for solid 🙂 but I'm not really interested in Rust, it's probably going to be Go, OCaml or Gleam
If you look at the DOM in the browser SSRed SolidJS will have
data-hk attributes that it uses to bind the JS state/handlers to the correct elements.
https://youtu.be/s4Rd2snXSr0?t=13449Ryan Carniato
YouTube
Looking at Nuxt3
Vue SSR has been strangely absent from the streams and it's time to rectify that. So I'm taking the dive into the world of Nuxt 3. Come join me in learning the basics and maybe even making an app.
[0:00] Introduction
[4:24] Welcome Daniel Roe
[36:21] Getting Started with Nuxt
[43:40] Vue Server Components?
[58:58] Getting Started for Real
[1:18...
If you want to inspect the DOM in the browser have a look at
https://solid-movies.app/
It was implemented with SolidStart Beta 1 (experimental island branch).
data-hk attributes everywehere.
For a commercial site:
https://post.news/feed/news
But I think it's mostly CSR.Post News
Post News
Access journalism from premium publishers without subscriptions or ads. Discover, follow, and connect with diverse voices on topics you care about.
my kind of cursed 🪄 that black magic, alchemy type of experimentations.
didn't know about bud, looks interesting.
Thank you for the information. Yeah, I checked it. That is nice.
💯 the stuff that people make in this discord is just 🤯