I'm using SSR to render HTML. I'm using Webpack's code-splitting, so after React loads, it fetches the chunks. While it's fetching, it doesn't know what to display. If I return null, React overwrites the SSR'ed HTML and replaces it with a white screen. After the chunks load, React renders content again.
How can I get React to not overwrite the SSR'ed HTML? Is it possible for React to not render anything until all the chunks are loaded?
Related
I am using react by adding react CDN in index.html file in my simple HTML, CSS, and JS editor according to
according to this doc React, and it is working fine in my code editor's preview:
Code Editor's Preview
But on the main web page, it is not showing the react output set by root.render.
My Webpage View
I want my root.render to run two times accurately and show my data as it is showing in the preview.
Even the data is showing in the console but not on the page like this:
WebPage with console
"like_button_container86551" is the ID of the div in which react app will render, you can access the complete code which I am using here React website file
I don't get the real reason but I solved it with a trick, as data was showing in the console that means that DOM is not showing the updated data so I just assign a key to my div of the content
<span onClick={handleClickOpen} key={contentKey}>
...
</span>
and after the rendering of the component in the useEffect function I increase the key by 1 which means I refresh the DOM element and now the content is shown:
useEffect(() => {
setContentKey(1 + contentKey);
}, []);
I was going through this post regarding how Facebook redesigned its homepage. It talks about code splitting and loading code in three tiers for fast first paint.
The first bundle loads the "skeleton" of the page to indicate loading of data:
The second bundle loads all the "above the fold content" at once:
Third bundle contains code for the rest of the page.
Considering that Facebook used React to build their new webpage, I would like to understand how the code in bundle-2 interacts with the code in bundle-1?
What I mean is, that once bundle-2, along with its data is loaded, the "UI skeletons" are replaced by actual components with complete data at the same place. That means in React code, we will have to either:
place the skeleton components besides other "content" components, or
we can replace the root of all skeleton component with the 'content' component.
When I loaded the page over a slow connection, I could see that some skeleton components were not replaced by content components after load. This means either they duplicated skeleton components in bundle-2 (corresponding to case 2 from above), or they somehow managed to load all 'content' components besides skeleton components by discarding the corresponding skeleton components (this corresponds to case 1 from above). If this is the case, how could they be managing this in React (at code level)?
Using NodeJS to build an web app, I am using React and Pug together. I know that Pug is for rendering static content, and React is responsible for rendering dynamic content. I have a page that needs both.
Think about the Instagram web page, it has some static content, but when user scroll down to the bottom, it will load more pictures.
I have a Pug template, which in the end, I included the React script like this:
block scripts
script(src="/component/design-grid.js" type="module")
And I want to trigger my react code by doing(This won't work):
script ReactDOM.render(<DesignGrid mainPage={true} category={"daily"} verified={false}/>, document.getElementById("grid-container"));
What's the standard way to accomplish something like this?
I've for the last month trying to add my react component into a pdf without showing it on the screen, with no luck.
I've exhausted everything I could find on SOF, such as HTML2Canvas which can't be used in my case since the component have to be rendered before one can convert it to canvas and add it.
It does not have to be in the client.
Have you seen the print media query in CSS?
You can do
#media print {
/* Your CSS */
}
You can use this to hide a component with CSS on the normal page but then when it comes to printing you can make that component visible. The component will always need to be on the DOM though.
If you're just trying to have users print your page to pdf using the print dialog, then GavinHenderson5's answer should be sufficient. If you need to actually produce a PDF file that users can download, then a combination of GavinHenderson5's solution with something like Headless Chrome may be preferable.
We have a backend endpoint setup that has a running Chrome instance that then calls a URL on the frontend (rendered React components) printing it to PDF. Using print media queries, you can double dip any styling of the components or display: none/block; if you want to pick and choose for the rendering.
How do I remove unused css in a webpage?
I could see that bundled css takes more time to load when I try in performance. I was trying to optimize that case by rendering the bundled css based on page wise (using react routing)
Example: There is a webpage called 'A'. If I load the page, the css used in that page alone should render. other css should not loaded or used. like wise it has to be done for every other pages.