react rendering for a medium sized website dilemma
client side: fast and silky smooth seamless transitions when navigating between "pages" of the site, but you end up downloading the entire fucking website all at once
server side: jarring, slow transitions with a flash of a white background on slow computers or slow connections ('critical css' is not a solution)
is there some kind of hybrid Jow Forums?
where the website will client side rendering for seamless transitions, but only load the data for pages that are linked to from that particular page instead of downloading the whole site all at once?
failed to mention it is for a non-interactive micro brochure type website, but it has a sufficient number of pages that i dont want to do standard option a
Jow Forums doesn't actually know any programming desu
what you want to do is possible but I have no idea how since I don't use react.
Isaac Hall
Break your frontend application code into separate files which are aggressively cached. Navigation should only hurt once for the initial load of these files. Subsequent loading should just grab the content which changes.
So really, just design your shit correctly. Server side rendering is a meme to try to cover up how absurd frontend has gotten. Don't bother with it, it's just a problem paper-over, not any kind of real solution.
Carson Long
Yes angular and react both support this. User requests page. It's rendered on server through headless web browser. HTML gets sent to client. Client has static webpage while the entire website is being downloaded. When site is done downloading, JavaScript takes over and fast navigation begins. It's the best of both worlds.
Joseph Lewis
Yes, that sounds like precisely what I need!
Do you know where I can find any documentation/tutorials on this? I would Google it, but I'm not sure what terminology to use.
Thank you!
Jack Parker
Just look up >angular server side rendering Or >react server side rendering The respective docs and libs will show up. Also read this github.com/kamranahmedse/developer-roadmap Any more questions and these guys will help
Charles Collins
But if it's server side rendering for just the homepage and it downloads the rest of the site for client side rendering, isn't that basically the same as client side rendering? The problem is it would download every page of a 50 page site all at once. Is that ok?
Nathaniel Diaz
Depending on the nature of the site's data it may be cheaper to just deliver 50 pages of it as JSON and let a JS client drop it down a React component tree as needed. And you _could_ just fetch them on demand. Most users will be happy enough when the React app immediately shows them a cool spinner animation when they click something, even if the actual content shows up a second or two later.
Xavier Wilson
>if it's server side rendering for just the homepage No it's not. I guess it depends on your app but this isn't really true. >isn't that basically the same as client side rendering Yes. The point is that the user doesn't have to wait anymore. >The problem is it would download every page of a 50 page site all at once Not as big as you might think actually. Also, you could do things like only get some content on demand.
tl;dr: if you do it right, it's not a problem
Kevin Jenkins
>Most users will be happy enough when the React app immediately shows them a cool spinner animation when they click something, even if the actual content shows up a second or two later Depends on the website and content
Chase Harris
The normal approach to server side rendering with react is to do the first render on the server, and then hand it off to the client, which will take care of subsequent renders. The only benefits you get is content visible on the page before your bundle with scripts is loaded, maybe faster load times if there's plenty of requests to make at first, it might make your website usable without JS and it might have a positive effect on SEO (especially with search engines different than Google). I've implemented SSR from scratch on top of a existing project with a somewhat complicated stack of libraries that started with CRA. If you're planning to start a new one, make sure you get SSR from the very beginning, you can use something like next.js. Implementing SSR when you're working with an existing codebase that's actively developed is a waste of time and effort, you might need to make substantial changes and keep them up to date before you merge SSR into the main branch. Also, if your site is somewhat static and has not that much content, you can use static site generation (tools like gatsby exist) and use a simple static server to host your website.
Nathan Richardson
>non-interactive micro brochure type website Optimize your images and dont add massive bloat, this site doesnt need to be massive.
baam, your problem is gone.
Logan Ross
Don't use SSR, it's a dumb meme for people who use too many JS libraries
Make your SPA simpler
Joseph Rogers
>Don't use SSR, it's a dumb meme for people who use too many JS libraries >he doesn't want his page to work without js Enjoy being made fun of by people on this board.
Jordan Martinez
If your page displays anything without JS, you're doing it wrong
Nolan Howard
This is normally a symptom of bloated JS. Just use a backend framework + JS, SPA's a cancer.
Dominic Torres
Try using an SPA and then go back to your shitty website. I'll talk to you once you're done. Having to see the page load again sucks, I don't like having my screen flash white, or even worse, get paints without styles.
Andrew Kelly
SPAs are the worst meme to hit the internet since ads
Jordan Price
I have, Gmail is an example. Yeah, it's nice to look at, until most SPA's run into performance / consistency problems. For the average developer, building an SPA vs a typical website is exponentially harder to maintain the same level of quality. Why make life harder for yourself and the users, for negligible returns?
Leo Jenkins
I don't think it's made the project I'm working on that much harder, especially because React (and react-router) are designed well enough to not turn it into a burden.
Hudson Hill
just split your layout into a sperate file and load the route specific content while the user navigates.
