Mechanism for having an endpoint acts like a socket

[grug]

Hi there,

I have an endpoint that is very slow and can potentially return a lot of objects. Currently, in my application this is what I'm doing:

1. For my page, I define getServerSideProps.
2. In getServerSideProps, I do all of my slow stuff and return a props object for my page component to consume.

For the end-user, this turns into a potentially very slow experience because the page won't load until everything has been loaded. It can take up to 30 seconds sometimes.

Ideally what I would like is the following:

1. Following the advice on the Next documentation, I load the page with loading states for the items that haven't been retrieved yet.
2. Each individual item is fetched, return it immediately to the frontend and have the frontend render it.

This allows the end-user to see things as soon as they have been fetched. This feels like a better user experience, even if there is some slow stuff going on behind the scenes.

What I think I need here, is some sort of socket-like mechanism that can pass through objects as they're retrieved. I might be wrong about this though 😂

Would anyone be able to point me in the right direction here? I've taken a look through the documentation and had a Google, but am unable to find exactly what I'm looking for.

Thanks!

-Dave

[rafaelalmeidatk]

I am not sure you need websockets for this, regular HTTP requests will work as expected. If you have 5 expensive tasks, you can fire 5 requests concurrently and as soon as one of them resolve, you can start rendering the data in the app.

[grug]

Hey @rafaelalmeidatk thanks for the response :)

I'd began writing a response to the tune of "I don't think that this is the best idea as the thing I'm working on is an exception to where this would be best practice" and then realised that I've overthought this way too much and that you are indeed correct 😂.

To work out how many requests need sending and what those requests are/look like is an inexpensive operation, so I could:

1. Work that all out in getServerSideProps and pass it to the page.
2. Display the loading state on the page.
3. Fire off all the requests I need to.
4. As each of those responses come in, render the result.

Thanks for causing me to rubber duck this and see the error in my ways!

-Dave

[rafaelalmeidatk]

Yeah that's the idea. If the inexpensive requests aren't important for SEO, you can skip gSSP and make the page full static.

[grug]

When you say "full static" you're referring to "don't do any SSR and let everything happen on the frontend", right?

[rafaelalmeidatk]

Yep, taking advantage of auto static optimization

[grug]

Perfect. Thank you so much for your time @rafaelalmeidatk - if you want me to send you beer, DM me on Twitter (@davewritescodes) with a delivery address :)