React VS qwik

Regarding page rendering with Next.js, pre-rendering is a fundamental component. It is a key feature of Next.js, which means that static HTML content is generated in advance rather than dynamically on each request. When comparing the page source of a traditional React.js web app and a Next.js web app, it is clear that the Javascript code is loaded before the contents are rendered to the user, which is a bad user experience. However, when inspecting the contents of a Next.js page source, the HTML is already generated with all the necessary data, making Next.js the most efficient method for improved web performance and user experience.

In this blog tutorial, we will see how we can setup a ReactJs project with Typescript, styled-components and redux toolkit.

React has stated that this will be supported in the future. However that issue is old enough to be in kindergarten. So I'm looking for a nice easy abstraction in the meantime.

A bare closure would always see the latest values because it closes over them during render. And the latest useEffect closure will have closed over that method..

Here is the test suite for useEffectEvent and the test ensuring it does not provide a stable reference: https://github.com/facebook/react/blob/main/packages/react-r...

And then a wild 'exhaustive-deps'[0] appears!

[0]: https://github.com/facebook/react/issues/14920

React.js - for our frontend

The now-legacy documentation could originally be found at reactjs.org; this now redirects to the brand-new react.dev domain. When the new docs were still in beta, they were hosted at beta.reactjs.org, which now also redirects to react.dev. The original documentation can still be found, for those who need it, at legacy.reactjs.org. This was done to make a fresh start and clear separation between the current vs. legacy documentation.

I find this to be a very nice high-level explanation: https://medium.com/@ryardley/react-hooks-not-magic-just-arra...

In reality we use a linked list rather than an array. If you wanna dive into the code, I can give some pointers. For example, useState is implemented like this during first render (https://github.com/facebook/react/blob/87c803d1dad7e5fe88634...) and like this during next renders (https://github.com/facebook/react/blob/87c803d1dad7e5fe88634...).

However, _conceptually_ I'd recommend to think of Hook return values similar to "extra inputs" to your function, kind of like extra arguments. There are different ways to formalize it in different languages. We picked plain function calls for simplicity and low overhead, although you could imagine `yield` with generators or something like that.

Unbelievable that they’ve gone ahead launching this, going all in on hooks, while the fundamental problem with them, which was raised in 2018 is still unsolved: https://github.com/facebook/react/issues/14099

And they just handwave it away in the docs with an imaginary future API. Embarrassing.

If you want to, you could build the front-end separately, using something like React or Vue, but that would require a good knowledge of JavaScript.

There's already qwik, that does SSR and then converts the rest of the app into lazily loaded event handlers.

So there are many frameworks that can do SSR/SSG and hence generate HTML for the client. But most of them come with hydration costs. So for our example, we have chosen Qwik because it uses resumability instead of hydration to make the application interactive. Astro would have also been a good choice because it delays the hydration cost until the island is ready. Anything which does not add JavaScript on startup and produces HTML would have been a great choice.

They have different trade-offs sure, where bundling typically creates large opaque blobs of JS used by the entire SPA resulting in large initial download & parsing/execution time which is why it's preferable to only download & execute code needed which is easy to achieve with cohesive modules.

The opposite of large JS bundles is a framework like Qwik [1] which achieves perfect PageSpeed scores by downloading the least JS possible, both initially and then at runtime by only downloading the JS needed per interaction, resulting in very small downloads over a lot more requests.

[1] https://qwik.builder.io

An example of a framework that uses Hydration is NextJS and one that uses resumability is used by frameworks like Qwik

These days, you almost never need write all of that above crazy stuff by hand. Frameworks like NextJS and Qwik, as well as platforms like Cloudinary and Builder.io, provide image components that make this easy, and look instead like the below:

When you look at the current web ecosystem, you'll see players like Deno, Bun, Qwik all pushing the frontier on performance in their own domain.

Others worth a look:

- Qwik[1]: code is very similar to React, only the interactive parts are sent to the browser, and they only execute on demand (eg when you interact with the thing)

- Astro[2]: probably the most popular “islands” framework, lets you bring your own interactive framework

- SolidStart[3]: doesn’t mention in the docs yet for some reason, but also supports “islands” in SolidJS, which is also one of the fastest client frameworks and also will feel familiar coming from React

[1]: https://qwik.builder.io/

[2]: https://astro.build/

[3]: https://start.solidjs.com/getting-started/what-is-solidstart