I recently shipped a fairly large website (~50k lines of code) built in Next.js and React. Here’s a
about some of the key learnings:
-
Show this thread
-
Let’s talk about React Hooks. To me they’ve been both a bit of a blessing and a curse. First off, some things can be solved really beautifully (data fetching, async loading of 3P scripts, etc.). But for some things it just feels like the wrong tool for the job.
3 replies 3 retweets 61 likesShow this thread -
I believe
@dan_abramov pointed out that the previous lifecycle methods often introduced subtle bugs and inconsistencies. This is totally true, but moving to hooks introduced a whole new class of problems (at least for me).2 replies 3 retweets 52 likesShow this thread -
The useEffect hook has subtleties that isn’t obvious at a first glance. For instance, passing callback functions as dependencies to useEffect (that may or may not change on each render depending on the consumer of the component) bit me multiple times.
5 replies 5 retweets 52 likesShow this thread -
Moving on to Next.js. It really helped a lot to quickly get us going (great job
@timneutkens,@rauchg, et al!). I did however put a bit too much trust into getting solid performance right out-of-the-box.1 reply 1 retweet 28 likesShow this thread -
Even though we were doing a lot of things right (server side rendering, http/2, using a CDN, efficient caching, aggressive code splitting, etc.), we were just getting a moderate ~55 points in Lighthouse.
4 replies 1 retweet 33 likesShow this thread -
It was especially the time-to-interactive metrics that was causing issues. Was this what
@slightlylate has been talking about all this time?2 replies 1 retweet 23 likesShow this thread -
I started testing different ideas and there were mainly three things that had a large impact: 1. Moving from React to Preact (+10 points) 2. Carefully optimizing the chunks emitted by Webpack (+15 points) 3. Removing the ads on our landing pages on mobile devices (+15 points)
13 replies 14 retweets 129 likesShow this thread -
Replying to @PeterssonJesper @dan_abramov and
Awesome findings thanks for sharing!! I'm curious if you've had a chance to maintain a Preact app for awhile. I always try to start with preact, but in every project that ended up being long-lived I've regretted it.
3 replies 0 retweets 1 like -
Replying to @patrickhulce @PeterssonJesper and
I always end up getting burned by a subtle inconsistency with react or need some integration later on that it doesn't support and end with wasted days that weren't worth the 40k. That effort if invested elsewhere in the app usually could have had bigger perf wins.
1 reply 0 retweets 0 likes
How much of this would be fixed by starting w/ Preact, in your experience?
-
-
Replying to @slightlylate @PeterssonJesper and
These *are* all projects that started with preact. I still think it's valuable to start with and if you never run into its limitations, then great! But thusfar where a very large application was maintained consistently it always seemed to outgrow preact in the end.
1 reply 0 retweets 1 like -
Replying to @patrickhulce @slightlylate and
And for that reason I get worried when we pin hopes for improvement on telling existing large and complicated applications to make the switch from React to Preact. (Not saying that's what's happening here, but it feels like I see this advice often enough to get nervous)
2 replies 0 retweets 1 like - 1 more reply
New conversation -
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
& Web Standards TL; Blink API OWNER
Named PWAs w/
DMs open. Tweets my own; press@google.com for official comms.