search

cereallarceny / cra-ssr

[DEPRECATED] Server-side rendering with create-react-app, React Router v4, Helmet, Redux, and Thunk
484 stars 118 forks source link

SSR || Prod - page flashes on first load #53

Open czco opened 5 years ago

czco commented 5 years ago

Absolutely love the framework and we've developed two sites on the framework. One of them is about Custom Software Development. If you open it you'll notice page flashes on the first load. The same happens with the other site we published but cannot share the URL. Anyone have an idea why and what can be done to prevent it?

heshamelmasry77 commented 5 years ago

@czco this is the main problem which made me decide to move to next js

czco commented 5 years ago

@heshamelmasry77 we love Next.js, we have been using next.js for 3 years but it can be slow and painful. Recently we built a CRM that can text on next.js.

we can list 50 issues we came across with next.js in last 3 years. its an overkill if all we want is blog content readable by google and standard CRA pattern with React Router.

Also the main problem we moved to this was Google webmaster tools not seeing next.js content right away Checkout this issue. Ideal situation would be that @cereallarceny can give some input on how to solve this flash and then us going back to next.js

heshamelmasry77 commented 5 years ago

@czco I also noticed how slow it is when i moved to next js. and the next config looks crab. I hope someone find a solution for the flashing problem. This flashing problem happens because of the css. some people solved it using styled components and some other people solved by adding the styles as chunks. something like that :

 const extraCSS = extractAssets(manifest, {}, '.css')
            .map(c => `<link href="/${c}" rel="stylesheet">`);

and use the chunks first load,

czco commented 5 years ago

@heshamelmasry77 we are using styled-components, we were thinking the flash is because of styled-components but again we need @cereallarceny. it would bother us to see this awesome repo die because of no support. @francisrod01 what's the thumbs-down for?

czco commented 5 years ago

Having done a fresh deployment of cra-ssr with styled-components, there is no page flash so this may an issue with some other change we made. If you are facing the same issue please reach out, we hopefully might find a solution soon deployed fresh app

czco commented 5 years ago

The reason there is no page flash on a fresh deployment of cra-ssr is that none of the routes contain components. If inside any route you create a component, let's say and put the HTML in there it will flash, the flash is due to initial load on the server plus reload on the client.. Does anyone know how to fix this? @cereallarceny @arturparkhisenko @gbreux

Issue can be seen at Silicon Beach Developers

francisrod01 commented 5 years ago

WE all need to put the routes after an initial "HTML" structure. This repository is just an example of how to build a CRA SSR application, but isn't the better one.

czco commented 5 years ago

@francisrod01 its a technical problem and we are sure there is a solution. let's focus on finding that

francisrod01 commented 5 years ago

its a technical problem and we are sure there is a solution. let's focus on finding that

WE all need to put the routes after an initial "HTML" structure.

You right!

czco commented 5 years ago

@francisrod01 Thanks you for attempting to provide a solution. Unfortunately, we need to used styled-components and have page-level components for page-level content.. Some time was wasted moving from next.js to cra-ssr and back to next.js. Overall we feel it's not ready for production use though it is a great attempt and we love the project

cereallarceny commented 5 years ago

@czco My apologies, I haven't been very responsive with this project. It's my full intention to pick things up again, despite the fact that you've moved on to Next. It's a great framework, I don't blame you. If you're interested, I'm logging this as an issue to be fixed by version 2.

cereallarceny commented 5 years ago

@heshamelmasry77 I also understand you moved to Next.js. I plan to pick up active development on this project again if you're interested. In particular, I'll pay close attention to page flashing. It was an issue on my implementations of cra-ssr as well. If you're interested in contributing (or anyone in this thread for that matter), I'd be thrilled to have the help!