feat: Next.js support - Githubissues

aidenybai commented 2 years ago

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

SukkaW commented 2 years ago

Some references, and also a very naive TODO (TBC):

[ ] Compatible SSR method
- [ ] renderToString
- [ ] renderToPipeableStream
- [ ] renderToReadableStream
[ ] Fast refresh
[ ] Next.js plugin
- See: next-plugin-preact: https://github.com/preactjs/next-plugin-preact

QuiiBz commented 2 years ago

Also, I think we should support renderToReadableStream - it's the equivalent of renderToPipeableStream but for the browser, Deno and edge environments (like Deno Deploy, Cloudflare Workers, Lagon...)

SukkaW commented 2 years ago

Also, I think we should support renderToReadableStream - it's the equivalent of renderToPipeableStream but for the browser, Deno and edge environments (like Deno Deploy, Cloudflare Workers, Lagon...)

Nice catch!

And actually, you are also the collaborator of the repo. Feel free to update the existing TODO with your ideas!

phiberber commented 2 years ago

I think renderToString is already implemented in the React module:

https://github.com/aidenybai/million/blob/21644e4871fcd67d818f7f4007f74c8713e34bdf/packages/react/exports/server.ts#L3

renderToPipeableStream should not be that hard to make:

https://github.com/aidenybai/million/blob/dec80d0af168851541673a0317653422800baea7/packages/utils/index.ts#L103

In that point of the flow, we already know what the tag and attributes are, no need to wait for all the children to send that (Body, I'm looking at u)... Same for the children, the first children can already be written to the stream when its tag & attributes are done.

Fast refresh would probably look like the Prefresh package for NextJS

Preact and Million have different purposes, Million has a compiler that would probably need to be attached to a NextJS Webpack Build Hook, it would probably be better to create a MillionJS Webpack plugin first then.

aaron5670 commented 1 year ago

This would be a cool feature! 🔥

phiberber commented 1 year ago

With the release of Next 13. I doubt this is ever going to happen anytime soon. Turbopack does not plan on having a 1:1 Webpack API and there is no documentation on how to make a Turbopack plugin whatsoever.

It's good to notice that the Streaming support I've suggested has a big problem that's a child should be able to change its parent information. That can be through React Context or through props. It's a problem that every Streaming Framework encounters. That being said, Million being a compiler should be way ahead than other implementations.

I'm also not sure about the state of Million. For some reason it hasn't got the hype I've thought it would, @aidenybai is slowing down on commits to the repository, new frameworks are getting into production more often (Solid and Svelte mainly), these which solve most of the performance problems in React.

NextJS support should be able to bring some hype to this project, increasing the community and making it more active.

aidenybai commented 1 year ago

@phiberber this is a good take. I've reconsidering how viable a compat library is--it's really cool and all and it drives usage--but you're totally right that it's really hard to keep up with new frameworks.

Million's a bit at a crossroads right now: either the project continues with the initial thesis of "compile the virtual DOM" and "support React's ecosystem," or it shifts towards something else. And I don't have a good answer for the state of Million--it's a difficult challenge. I would love to hear feedback on the community first to understand the needs of React devs as it relates to virtual DOM.

phiberber commented 1 year ago

@aidenybai, Please no to yet another JS Framework. I've worked with multiple frameworks already, React, Preact, Svelte, Solid, Vue, Petite-vue, even considered using Inferno for a production project... Also worked with multiple SSR Frameworks; Gatsby, Next, Nuxt, Blitz, Sveltekit, Astro, Solid-Start, Vite-plugin-ssr, etc.

I would say that the best thing currently would be a compatibility layer to React, even better than what Preact currently does.

One big problem currently (I think) is the need to swap frameworks, Solid, Preact and React have all basically the same code (except the nomenclature, Show/For components and some little things), these little things make transitioning between React and Solid almost impossible if you're using any third-party UI Framework or library I would say.

The biggest problem I see in React & Next is not the Virtual DOM, for me it's the bundle mess, Solid recently has added Partial Hydration to the Solid-Start framework, it has been amazing to work with (except the fact that I would like to continue using NextJS).

Why there's three almost identical frameworks to solve one problem, performance? Why do I need to stop using MUI if I want to have the best performance out there?

Preact if I remember well has been trying to get out of the "React compatibility" scene with Preact 11, there's space for a new presence there then.

That's the problem I face and the needs I have. Having all the features Solid has, while having all the compatibility and ecosystem React has and still using Next, Gatsby or whatever.

I think Million should be presented as "If Svelte and React had a baby", that's where I think it would be able to get some hype and sponsoring.

aidenybai commented 1 year ago

Hi @phiberber, thanks for the very insightful feedback! I'll definitely take note of this... hopefully once college applications are done for me we can get something going here! In the meantime, would you be interested in joining our Discord? where we post faster updates.

phiberber commented 1 year ago

One update. I've found that Next is already supporting SWC Plugins, Turbopack has no documentation on plugin support still. I would say it shouldn't be too hard to write a SWC plugin for Million, much like Vite's plugin. Million still needs to support renderToReadableStream though.

aidenybai commented 1 year ago

v2!