All topics

Correct way of implementing dynamic SSR

QuietRocket

12 days ago

Hi! I previously posted about making a community package for Convex. I advanced on that and am polishing by using it in my project and improving.

One thing I noticed is that I found myself having to place a lot skeleton’s while waiting for the convex client library to load and load data via the realtime socket. I was wondering, as a package/library creator, is there any way to achieve dynamic SSR?

Ideally I’d like for the page to be completely rendered on the server, then dynamic hydration kicks in to allow for Convex’s powerful realtime queries.

Thanks
Andreas Møller

11 days ago

If the data is coming from a websocket then no. that is not possible. Websockets are built for the browser. they are not meant to be called from a backend.
@Andreas Møller
If the data is coming from a websocket then no. that is not possible. Websockets are built for the browser. they are not meant to be called from a backend.
QuietRocket

11 days ago

Thanks for your answer. Convex has an HTTP REST API. So technically I can do SSR via the REST API for initial population. With the same query structure I can then transition to websocket based.
QuietRocket

11 days ago

Would I be required to define a Convex service and load data from the service? Then in the on load for example, refresh the data?

If that's the case, it's somewhat complicated from a package maintainer's perspective as I would require package users to configure a service and duplicate their queries and loading logic, once for the service and once for my package.

---

Ideally it would be best to have access to something at a different layer of abstraction with more control as a package maintainer. Even pure code would do. Like, an action with does a fetch request but the fetch is done during SSR rendering.
NoCode ProCode

9 days ago

As long as the data comes from a native GET API with “Auto Fetch” you will have SSR. WebSockets or Custom Code does not run Server Side, but Client Side.
NoCode ProCode

9 days ago

You could do the initial request via GET API (to get SSR) and then use the WebSocket (which works Client Side) to update the Data.

Here is a little breakdown:

1. GET Data via API
2. Set API Data as “Initial Value” in the Variable for SSR
3. Initialize the WebSocket (Client Side Connection)
4. When the WebSocket gets new Data send to it have it overwrite the relevant parts of the variable setting the Page Data.

This hybrid approach allows for SSR + Client Side Updates via Realtime WebSocket Connections.

I hope this helps 🙏💛
QuietRocket

9 days ago

Thanks NCPC! Yes that's how I imagined it. I guess then there's no way for a package creator to configure and call services on the user's part.

What I was hoping was for my package to expose a single component which itself defines a service that it uses, for instance, a GET call.

That way the user has to just pass query details in the component args and the component intelligently manages calling the GET via service followed by using an action to get realtime data.
The decision to pervent packages from defining and using services seems rather arbitrary don't you think?
NoCode ProCode

9 days ago

You would create an api and copy it and have the user paste it 😉
One sec - making a video
@QuietRocket
Thanks NCPC! Yes that's how I imagined it. I guess then there's no way for a package creator to configure and call services on the user's part.

What I was hoping was for my package to expose a single component which itself defines a service that it uses, for instance, a GET call.

That way the user has to just pass query details in the component args and the component intelligently manages calling the GET via service followed by using an action to get realtime data.
Lucas G

9 days ago

A service is defined by a base URL and its API key, you could receive those values via attributes in a component as well as a path for any calls and dynamically set the calls that way
Lucas G

9 days ago

For services it is recommended to store the URL/Key values in global formulas, the user could simply pass those same values in to the package's components
Lucas G

9 days ago

The InstantDB package accepts the app id required and then all other functions take in the table that you want to transact to, for example.
The Supabase upload input one takes in a supabase url and api key then handles the rest
I think what you're describing should be doable 👍
NoCode ProCode

9 days ago

@QuietRocket https://www.tella.tv/video/streamlined-api-integration-hjvp
@Lucas G
I think what you're describing should be doable 👍
QuietRocket

8 days ago

Ok, I will take a look at the InstantDB and Supabase upload packages for inspiration. Yeah I see what you're describing, I'll see. Thanks Lucas
@NoCode ProCode
@QuietRocket https://www.tella.tv/video/streamlined-api-integration-hjvp
QuietRocket

8 days ago

NCPC, this approach is very inspiring and creative! Really opens a whole new approach to developer tooling in NC which is unique to NC since everything is just data. I love it. Thank you for this video ❤️
@QuietRocket
NCPC, this approach is very inspiring and creative! Really opens a whole new approach to developer tooling in NC which is unique to NC since everything is just data. I love it. Thank you for this video ❤️
NoCode ProCode

8 days ago

You’re most welcome 🙏

Correct way of implementing dynamic SSR

QuietRocket

Andreas Møller

QuietRocket

QuietRocket

NoCode ProCode

NoCode ProCode

QuietRocket

NoCode ProCode

Lucas G

Lucas G

Lucas G

NoCode ProCode

QuietRocket

QuietRocket

NoCode ProCode