New to JS frameworks in general, can Solid do what I'm looking for?
Hello Everyone!
tl;dr - Can Solid do client-side JS only? If so, how?
Background:
I'm a hobbyist programmer with experience rooted in "the old ways" (e.g. I started with PHP in 2005 when <table> was still often used for page organization), but I've recently started working on a semi-serious project that I think could benefit from a JS framework. It's a performance sensitive project, which led me to SolidJS, but it seems like the tutorials and starter guides don't address exactly what I'm trying to figure out.
Project Details:
- A custom ASP.NET webserver is used to handle requests, routing, and SSR. It uses Kestrel as it's base, but it doesn't use any of the other tools usually associated with ASP.NET (e.g. no razor/blazor).
- Most of the pages frequently change, but are static after the page loads (e.g. similar to the homepage of a news website); however, there are some dynamic content parts (e.g. a chat box), and there is desire to support other dynamic parts in the future.
What (I Think) I Want from a Framework:
- Does not participate in the SSR that generates the static HTML and default CSS
- Implements the dynamic content (presumably using API calls) after the page loads
- Facilitates custom CSS per page/user
- Allows me to write JS using simplified syntax and tools (e.g. JSX)
- (Optional) Also simplifies the other standard things that vanilla JS is fine for (e.g. menu dropdowns)
Question Summary:
The tutorials for Solid (and other frameworks) seem to take over the entire rendering process from the document root on up. Perhaps hydration is the solution, but I can't figure out how that would work. If I write SolidJS code, how do I get that to the client? Does SolidJS build vanilla JS for the client on every page load? What would I need to add to the HTML SSR to make that happen? Am I just totally misunderstanding what SolidJS (and other JS frameworks) does at a fundamental level?
I'd greatly appreciate any help anyone could provide!
12 Replies
Solid Start with ssr disabled can provide the 4 main things you say you want from a framework, the fifth you can get from tools like Kobalte and Corvu
Actually since you’re accessing an existing API, using plain Solid with Vite will give you a client only app you can serve through a static file host
Thanks! The API isn't actually written yet, so I'll check out solid start. It looks like I'll need to learn about Vite too. 🙂
Ah ok, yeah in that case Start with
ssr: false will spit out a server you can run for API routes, and a bunch of static files you can serve to the client
No need to worry about hydration or anything, that only applies when SSR is enabledIs it correct to presume that solid start is going to be hosting it's own server to handle calls for the dynamic content? If so, how does the client know where to send the request?
Or if not, where would I, for example, need to put the code that actually makes a request to the database?
Yeah Start will produce its own server you can run, which will handle your server code. You'll probably want to make API routes that can handle GET/POST/etc requests, then you can
fetch them on the client. You'd need to provide the base URL as an environment variable that is embedded in to the client at build time
Alternatively you can make use server functions that run server code but can be called like regular functions on the client, since they handle the fetch call internally. I think that requires your server and client are both running on the same domain though, depnding on your situation that may not work for you.Gotcha, I'll have to think about the tradeoff of having a separate server process running for the dynamic content vs having everything served from one webserver. Using Vite to make static files and hosting my own API may be better in that case. Either way, this has helped a lot in me wrapping my brain around what, more broadly than Solid, a JS framework is actually doing, and I'm pretty sure I understand my options.
Thanks a lot for taking the time! 🙂
Also, it's hosted over the web, so I can't assume the same domain.
No worries, note that if you want filesystem routing you'll want to use Start instead of plain Vite - Start can do a client-only build too.
I'm thinking this might be my workflow: use Solid on Vite to build the static JS files hosted on the webserver; use ASP.NET to dynamically point to the appropriate JS needed for each page during SSR; also use ASP.NET to respond to API calls from the Solid-produced JS
does that check?
Mostly - what does SSR look like for you? If it's SSRing a shell to be filled in by Solid on the client then that should work
Yeah, pretty much. I expect 90% of the page to load right away with a few boxes that have dynamic content to load over the next few seconds. That 90% may shift down as low as 30% depending on the page, but the general idea is the same.
the "dynamic content" is basically plugin apps within the otherwise msotly static website
So long as you're not expecting Solid to make the SSRed content itself interactive then that sounds like a good plan
Sounds like a fair tradeoff 🙂