I am building a website using Express and React. I go with Server-side rendering
Now I am looking for a solution to hydrate my final HTML.
The issue is at the build time, the page is still not available. A page only started with a main component and Express middlewares can add/remove sub-components to that main component. It means we only know what is the final structure of the page at the end of the request
Is there any way I can hydrate that page and make React available in the client browser?
Thank you so much
I have created react application using redux that is working fine. But now I want to implement SSR. Although I have implemented SSR and that is working but on page load, I want to render that with data but its rendered without data.
How can I render my page with initial data in SSR?
Im trying to do SSR to my React + Next.js application. I have a proble with rendering dynamic modules. In _app.js I'm loading data and put them to my redux-saga. This is working fine but my SSR does not works for that data, because Im trying to render component with redux data instead of component props.
SSR only works, when I do api call inside getInitialProps, and put those requests via getInitialProps to my component. This is weird behaviour for me but let it be. It works by this but now I got another problem.
All those data that is responsible for my content are also listed in page view source. WTF - why there are in html content. Also because of that my page source view is loading few minutes.
Is there any option to not put those props into page source view ?
I need to render all the pages of my angular application for server side, all though I have created an angular SSR app all the pages of my application are not getting rendered except index page.
How can I render my all pages as SSR?
I'm using a custom tool similar to react-snap to create a snapshot of my app at build time, as recommended in the create-react-app docs. This generates a static server-rendered version, which I can deploy behind nginx without running react on the server. This works fine.
I'm also using code-splitting to lazily load some components to reduce the initial JS payload. (I use react-loadable, but I'm willing to change that if needed.) It works fine when creating the snapshot, and the HTML is generated correctly, which the user receives correctly, and everything is displayed fully server-rendered without even downloading any JS yet. This is great.
However, during rehydration on the client, the import(...) call for the async loaded component hasn't yet been fired. Meanwhile, the DOM already has the stuff that has to be rendered, from the snapshot.
In this scenario, is there a way to prevent the initial render of a component during mounting, since I already have the content in the DOM?
Also, is it possible to have react's hydration logic run after the import is complete, so that I can prevent any flicker even after the import is complete?
If it matters, the lazy-loaded components are infrequently used routes, managed by react-router.