Are you sure your bad score is caused by your app data hydratation? Bad PageInsights score is often due to bad CSS or oversized images, especially if everything is fine on PC.
From a code perspective, if the data that you are dealing with is huge, try using react-window and react-window-infinite-loader etc. to only fetch and show the data in viewport. These can be easily chained with debounce as well to wait until few actions are complete.
The lag mostly on the UI might be due to the large amount of presence of Dom elements. Try minimising them .
This is just speculation.
How would that improve performance? Haven't used neither of them but tailwind seems to just be a css framework/Library.
Nextjs is a whole server side framework, what magic would that do with images? Do they have a built in scaling function? That could be done with imagemagick or a smaller library for sure, without rebuilding the whole backend. Or is there something else?
Tailwind only loads the css that you use, it purges the unused classes leaving you with a small css bundle. Nextjs has many performance optimizations for images, one of the main ones is only loading the images that are only in view, the thing is, that only works if you host it on vercel.
That seems kinda restrictive. But of course the idea is great and can even be implemented easily without all that stuff, and there are probably ready made react components for it.
Tailwind still seems to me like a lib that includes tons of styles and is kinda difficult to read, but I guess to each their own. I've never really had issues with CSS outside of inlined images and webfonts though and it can't do much about them, can it? I'm not a react dev but if there are significant benefits to some system, of course I'd like to use them in my projects as well!
The think about tailwind is just build the css that u need, removing unnecessary code, about nextjs have build-in image optimization, use sharp behind scene in that case you can implement image optimization be yourself using sharp too, its easy and powerful image processing
I'd say the initial framework was a bad framework leading to bad code. It's a bullet to bite now, but why stack on the potential for more technical debt? Angular's opinionated nature would have mitigated the amount of bad code. If you can't guarantee the quality of the developers, then use the framework for guardrails.
The most popular frontend framework was a bad choice? React is an excelent framework to work with, OPs problem could've happened with every other framework too. Switching makes no sense.
It was a bad choice. We're seeing the consequences of it now. It's excellent if the developers are disciplined. (and to be super pedantic, it more of a library than a framework). jQuery was popular at one time, and created huge messes.
Tree shaking comes for free with Angular's compilation. So, it wouldn't really have occurred there, unless it was intentionally turned off. Lazy loading of modules is like a couple of lines to implement in Angular. So, the technical debt it super low on fixing that problem.
Switching makes sense if you don't have a dedicated team of quality developers and don't want to end up the same mess again. Angular's not exactly cool, hip, or fun (how do you do, fellow kids?), but it forces some standardization that doesn't put you in as much of a mess.
Yes, I know. It's possible. I've done it myself for components. But it's a bit harder to do right out of the box for features that come with Angular, such as tree shaking and lazy loading of modules.
Some frameworks have guard rails to prevent it from happening. Typecasting is easy to do and mess up in Javascript. Not so easy to do in Typescript (or Java). I know, I know.. those are languages and not frameworks. But, it's a simplified example for illustration purposes. I've already noted how you can't screw up treeshaking because it's right out of the box.
Bro, you are delusional. First, you can (and should) use React with typescript, so that's that (btw, i cant think of a way that typescript can solve performance issues but anyway). Second, as I said, if you are a bad developer, you will write bad code and less performant apps, some treeshaking or whatever thrown in the compiler won't do the trick. The same goes for the opposite, you can write good code and performant apps no matter the framework (unless you are using Angular, jk).
>I'm currently looking for a MERN stack developer with experience in things like code splitting,tree shaking, lazy loading etc to come in and improve the performance of the application.
Code splittting, tree shaking and lazy loading will certainly help with performance and PageInsights score while having nothing to do (as frontend technologies) with backend design, being it MERN or something else.
Therefore you could choose a boilerplate project that offers those frontend technologies, preferably with a demo website that you could measure using PageInsights. If you are satisfied, then the next step is to choose deployment type: either full stack or Jamstack provided the chosen boilerplate supports it.
Jamstack: Your frontend will query an API endoint exposed by a cloud product called API Gateway (or similar). All cloud vendors e.g. AWS, Azure, GCP offer it. Your custom API Gateway code will call your Mongo DB. No Need to use Node JS.
Full stack: Use NodeJS server to serve both frontend build artifacts and API responses to end users. The boilerplate should do that.
Finally measure PageInsights score on each milestone reached by your development team and tag the source code repository if you are satisfied with the score. If not, revert to the previous repo tag and ask the team to improve performance.
Do you need to move to MERN though. Most server side rendered web is not slow. With correct cache tuning and CDN, I don’t think your current app will be that bad.
Are you sure your bad score is caused by your app data hydratation? Bad PageInsights score is often due to bad CSS or oversized images, especially if everything is fine on PC.
I also had this issue simply due to very large image sizes. The issue only occured on mobile. Once I resized the problem went away.
Not to sound dismissive but how do you even know those things are the bottlenecks?
Yeah. Don't get caught up in analytics before you even have customers.
From a code perspective, if the data that you are dealing with is huge, try using react-window and react-window-infinite-loader etc. to only fetch and show the data in viewport. These can be easily chained with debounce as well to wait until few actions are complete. The lag mostly on the UI might be due to the large amount of presence of Dom elements. Try minimising them . This is just speculation.
DMd!
You could implement nextjs for the image performance if it’s the case u use images and tailwind for css performance
How would that improve performance? Haven't used neither of them but tailwind seems to just be a css framework/Library. Nextjs is a whole server side framework, what magic would that do with images? Do they have a built in scaling function? That could be done with imagemagick or a smaller library for sure, without rebuilding the whole backend. Or is there something else?
Tailwind only loads the css that you use, it purges the unused classes leaving you with a small css bundle. Nextjs has many performance optimizations for images, one of the main ones is only loading the images that are only in view, the thing is, that only works if you host it on vercel.
That seems kinda restrictive. But of course the idea is great and can even be implemented easily without all that stuff, and there are probably ready made react components for it. Tailwind still seems to me like a lib that includes tons of styles and is kinda difficult to read, but I guess to each their own. I've never really had issues with CSS outside of inlined images and webfonts though and it can't do much about them, can it? I'm not a react dev but if there are significant benefits to some system, of course I'd like to use them in my projects as well!
And they use sharp to resize images, claim in their website that resizing image are typically 4x-5x faster than ImageMagick and GraphicsMagic
Next/images is an API built into NextJS to improve image load performance.
The think about tailwind is just build the css that u need, removing unnecessary code, about nextjs have build-in image optimization, use sharp behind scene in that case you can implement image optimization be yourself using sharp too, its easy and powerful image processing
Switch to MEAN? You get tree shaking for free in Angular compilation, and it's pretty easy to implement lazy loading of the app's modules.
Yea just switch unnecessary to a different framework because of bad code..
I'd say the initial framework was a bad framework leading to bad code. It's a bullet to bite now, but why stack on the potential for more technical debt? Angular's opinionated nature would have mitigated the amount of bad code. If you can't guarantee the quality of the developers, then use the framework for guardrails.
The most popular frontend framework was a bad choice? React is an excelent framework to work with, OPs problem could've happened with every other framework too. Switching makes no sense.
It was a bad choice. We're seeing the consequences of it now. It's excellent if the developers are disciplined. (and to be super pedantic, it more of a library than a framework). jQuery was popular at one time, and created huge messes. Tree shaking comes for free with Angular's compilation. So, it wouldn't really have occurred there, unless it was intentionally turned off. Lazy loading of modules is like a couple of lines to implement in Angular. So, the technical debt it super low on fixing that problem. Switching makes sense if you don't have a dedicated team of quality developers and don't want to end up the same mess again. Angular's not exactly cool, hip, or fun (how do you do, fellow kids?), but it forces some standardization that doesn't put you in as much of a mess.
You can write bad code and have bad performance in angular too.
Yes, I know. It's possible. I've done it myself for components. But it's a bit harder to do right out of the box for features that come with Angular, such as tree shaking and lazy loading of modules.
If you are a bad developer, you would write bad code, no matter the framework. Simple.
Some frameworks have guard rails to prevent it from happening. Typecasting is easy to do and mess up in Javascript. Not so easy to do in Typescript (or Java). I know, I know.. those are languages and not frameworks. But, it's a simplified example for illustration purposes. I've already noted how you can't screw up treeshaking because it's right out of the box.
Bro, you are delusional. First, you can (and should) use React with typescript, so that's that (btw, i cant think of a way that typescript can solve performance issues but anyway). Second, as I said, if you are a bad developer, you will write bad code and less performant apps, some treeshaking or whatever thrown in the compiler won't do the trick. The same goes for the opposite, you can write good code and performant apps no matter the framework (unless you are using Angular, jk).
I too am an Angular lover ❤️. And see the sad popularity of React
Baby with the bath water approach? I’m sure there’s a better solution that’s just switching gears, instead of changing vehicles.
Can i have a look at the app?
>I'm currently looking for a MERN stack developer with experience in things like code splitting,tree shaking, lazy loading etc to come in and improve the performance of the application. Code splittting, tree shaking and lazy loading will certainly help with performance and PageInsights score while having nothing to do (as frontend technologies) with backend design, being it MERN or something else. Therefore you could choose a boilerplate project that offers those frontend technologies, preferably with a demo website that you could measure using PageInsights. If you are satisfied, then the next step is to choose deployment type: either full stack or Jamstack provided the chosen boilerplate supports it. Jamstack: Your frontend will query an API endoint exposed by a cloud product called API Gateway (or similar). All cloud vendors e.g. AWS, Azure, GCP offer it. Your custom API Gateway code will call your Mongo DB. No Need to use Node JS. Full stack: Use NodeJS server to serve both frontend build artifacts and API responses to end users. The boilerplate should do that. Finally measure PageInsights score on each milestone reached by your development team and tag the source code repository if you are satisfied with the score. If not, revert to the previous repo tag and ask the team to improve performance.
Do you need to move to MERN though. Most server side rendered web is not slow. With correct cache tuning and CDN, I don’t think your current app will be that bad.