I am planing to develop a huge app (Let's say more than 100 pages with a lot of JS charts and maps) using React, React-Router and Webpack. I believe the size of final JS file is going to be so large and that is going to be so annoying for User during first page load.
Is there any way to load the final JS partially, for example based on the selected route? or I should stick to server-side rendering and using some other libraries like PJAX? I appreciate any other solution as well.
Related
Im not sure im in the right place, but ill still ask.
I have a single page app writen in React and an html landing page writen is pure html and css. The two have different css and nothing in one depends on the other. My question is how can I structure the website files in a way that the landing page loading times are very fast and the react app is also acessible? I want to user Firebase Hosting for it.
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
I am working on next js based react app and I am trying to minimize the First Contentful Paint(FCP) time, I have tried dynamic imports wherever possible, moved images to CDN but it didn't help. is there any other way to improve the FCP score for my site page. I have nothing to share as a code or what I have done so far. please anyone suggest how can I improve the FCP score.
Well you can do many things :
1- Using Next js build in <Image/> component
2- Minimizing your css files with PurgeCss
3- Using SSG and ISR rendering techniques
4- Use #Next/bundle-analyzer to analyze your js bundles
and so on .....
i am working on a angular 8 application , when user clicks on a button it should redirect to a vendor portal which is completely a different webapp (diff Url), when user redirect to vendor page , user should see the same header ,footer and navigation what i have in my web application. but the vendor application is on angularJS(1.x).
so my question is can we convert the Angular8 project/component into a standalone JS file and ask the vendor to load the JS file in their application ? this JS file should contain the logic to replace/inject with in their page. for ex: we ask the vendor to create a html element with ID name "custom-header" in their page and ask them to add my JS file (hosted on CDN ) on their landing page, and in my JS file we need to write a logic to look for "custom-header" Id and replace with our content ?
so can we write custom code in our Angular8 application and export it as a standalone JS file ?
Note: my Header/Navigration/footer angular components are shared components , i want to use the same component in my webapp as well as vendor component
Here's the shortest answer: No.
Here's the 'been there done that answer':
I've spent time trying to make things backward compatible and it's rarely worth the effort. I have written alot of angularJS and Angular2+ code and believe that any time you spend trying to crowbar a solution here would be better spent just making the angularJS module. AngularJS a simple, fast framework and you could have your result quickly. Alot/most of your logic/html could be directly ported over with small mods.
Here's the TL;DR answer:
I hate to ever say 'You can't do that' with technology because I'm usually wrong... but you can't do that directly. Well, I guess you could use iframes but that's not a good idea.
While there is a path to incrementally merge angularJS into an Angular 8 app, the same is not true of the reverse. However, you should be able to leverage much of the existing logic from the A8 app into a module that angularJS could just import.
Without seeing how intricate the A8 component is, angularJS is alot simpler and it's relatively easy to throw together a controller/directive/view single import. I don't see a clear path to automatically updating the aJS code when you update your angular 8.
This may sound weird at first but please read until the end. Generally Single Page Applications
(SPAs) consists of a single index.html and several JS scripts and routing is handled via Javascript with libraries like React Router, so the first load is slow because you are loading the entire application. So with the advent of Progressive Web Apps and Service Workers would not be better to split your Single Page Application into several SPAs for faster loading? Auth state and other shared state could be stored in Local Storage like for example Firebase does it. What are the issues with this approach?
As a comment from Sam already mentioned you should use code splitting to speed up the loading of your application.
You can start off by code splitting your app by the routes and build up from there.
Try using React.Suspense and React.lazy it should be a fairly quick process and you will see immediate results. Monitor the 'Network' tab in the dev tools and you will see different chunks loaded as you navigate your application.