I have a hobby project in react which I started using CRA. It only have few screen but uses material UI and few other libs so the minified bundle size already over 700k without splitting. In dev the refreshes became slow to the point where I have wait a few seconds to see result after I change a file in IntelliJ. So I wanted to give snowpack a try, and the results are amazing, In a blink of eye the browser screen is updated and state is preserved.
I read the linked issue on react-refresh on the release note, but no idea if it fast enough or not.
I jumped into a greenfield project that had been already polluted and “using” TS. The build was still running with a 1/0 and other explicitly broken code somehow.
I'm curious how this compares to Next.js. Next.js has had fast refresh for a while, and works great as an all-in-one solution for React websites.
I think the main difference is CRA has the concept of "ejecting", allowing you to avoid interacting with config files until you really need to customize how the build works.
Next.js is severely restricted by its proprietary router. CRA has the downside of not supporting server rendering, but you can at least use the standard react-router.
The weird proprietary was used colloquially, not to mean "not open source". In this case, it means something that is only used in relation to one other thing, which is NextJS.
I'm curious about restrictions of the next.js router compared to the standard react-router, are there specific serious restrictions you've experienced?
I've found the next router pretty easy to deal with, and have been writing less code to achieve the same things over time as next.js matures.
Next doesn’t support nested routes and layouts. So if you have, for example, a page that has a a sidebar for a master/detail view, when you load the nested page it blows away the whole DOM and has to render the whole page again, meaning you lose your scroll positions and anything else you want to persist across pages.
React Router on the other hand lets you render subroutes directly into an ‘outlet’, maintaining the DOM state outside of it.
This is a super common pattern when you’re building something like an admin dashboard app which I do often.
Yep. Lack of support for nested routes is what's keeping me away from Next.js too. A tab view that doesn't rerender the whole page requires jumping through many unofficial hoops with Next.js.
Even standard patterns like having seperate components for page header, sidebar that doesn't rerender the main content section feels very hacky with Next.js, and that too after digging through many people's blogs to read how they accomplished that.
I guess next.js really wants you to ditch the whole SPA idea atleast when it comes to routing.
I hope folks also explore more moderate patterns like server rendering only the first page load (either with react dom or using state hydration) or exploring better separation of client bundles too, and figure out what works best for them. Rather than sticking to whatever next.js or CRNA are set up for by default
I know there are tradeoffs to using any project framework or generator, but I'm just impressed by the amount of work people dedicate to these open source platforms. Congratulations on the release! I used this for a production application at work and it's served its purpose masterfully. Thank you for continuing to push the ecosystem forward.
19 comments
[ 0.34 ms ] story [ 934 ms ] threadI read the linked issue on react-refresh on the release note, but no idea if it fast enough or not.
For whatever reason CRA has a different hidden env var flag that controls this even though you have a “strict: true” in your tsconfig file.
I think the main difference is CRA has the concept of "ejecting", allowing you to avoid interacting with config files until you really need to customize how the build works.
I've found the next router pretty easy to deal with, and have been writing less code to achieve the same things over time as next.js matures.
React Router on the other hand lets you render subroutes directly into an ‘outlet’, maintaining the DOM state outside of it.
This is a super common pattern when you’re building something like an admin dashboard app which I do often.
Even standard patterns like having seperate components for page header, sidebar that doesn't rerender the main content section feels very hacky with Next.js, and that too after digging through many people's blogs to read how they accomplished that.
I guess next.js really wants you to ditch the whole SPA idea atleast when it comes to routing.
I hope folks also explore more moderate patterns like server rendering only the first page load (either with react dom or using state hydration) or exploring better separation of client bundles too, and figure out what works best for them. Rather than sticking to whatever next.js or CRNA are set up for by default
I’m looking for something that bakes in background jobs, db structure, and deploy scripts but haven’t found anything with comparable community/usage.