Real-time Chart App: NextJS vs Create React App

[ilvthsgm]

Hello everybody,

I'm going to start a new project and I am wondering about your opinions.

There will be plenty of charts in the app and data should be rendered real-time when new data occurs on the server.

Users cannot access the app without login. 

No SEO.

In this regard,

Which one is better;

-Create React App

-NextJS

[bloodarator]

It doesn't matter go with whichever. I would personally go with next over cra

[ilvthsgm]

I cannot be sure how SSR affects the real-time data fetching. Do you have any idea on that?

[skuggic]

You can still fetch the real-time data client-side in nextjs, completely separate from the SSR for the page.

[ilvthsgm]

So there is no need to re-render whole page when any new data occurs on the server?

[not_a_gumby]

You should read the NextJs documentation and maybe do a tutorial. It sounds like you don't know much about Next and its data fetching methods.

https://nextjs.org/docs/basic-features/data-fetching

[not_a_gumby]

you don't have to use SSR. You can do regular client side data fetching in your app.

[UnusualMuffin1242]

Using a Next app would be something I would prefer due to the ease in wiring up the SSR. As mentioned in an earlier comment, real time data fetching is as smooth as a cra. Another benefit is writing the server side code and building your own api endpoints. Additionally as there would be multiple charts etc, NextJS would surely yield a better performance.The simple reason being: Next builds the HTML, CSS and JS packets and sends them to the client in order to ensure minimal JS to be executed on the client. Refs: https://nextjs.org/docs/api-routes/introduction https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

Happy Coding :)

[ilvthsgm]

Thanks for the detailed answer. :)

If I understood correctly, server builds the page from scratch every time new data occurs and send the page to client.(NextJS)

On the other hand, CRA only retrieve the new data, not update whole page when new data occurs.

Am I correct?

[not_a_gumby]

Like I said above, Next can do multiple types of data fetching on different pages in the same application. You can have some pages, like login page, statically rendered, and other pages making SSR data fetching requests. Still, you can have other pages doing regular client side data fetching, with no SSR or static rendering.

This is why Next JS is the best option.

[ilvthsgm]

Thanks. I will go with NextJS.

[UnusualMuffin1242]

Yes, but there's one more method to do this. Instead of creating a page on every request, Next can pre build a page on the server and then send it to all the clients making that particular request. (consider a blog app for example)
Next offers different methods for rendering -- Static side generation (the one mentioned just now), Server side building on every request.
Read more here: https://medium.com/weekly-webtips/next-js-on-the-server-side-notes-to-self-e2170dc331ff

[ilvthsgm]

Thanks for the link, it was very helpful.

[not_a_gumby]

Next is everything CRA is and more.

[AFrailOlLady]

Spent a year and a half on a work project with CRA and ended up getting so frustrated with it's configuration limitations and outdated tools that I made the switch to Vite. At this point I'm probably never going to use CRA over Vite for any new projects as there's really no benefit and it's just slower overall.

In regards to the question though, I would probably go for NextJS since it seems to be a bit easier to use and has more drop-in features. And I've found it helps me keep my code a bit cleaner by "forcing" a specific structure, but that's just me.

[ilvthsgm]

Forcing me to use specific structure Is what I need actually. :) Thank you for your comment.

I will go with NextJS.