reactjs / react.dev

The React documentation website
https://react.dev/
Creative Commons Attribution 4.0 International
10.9k stars 7.45k forks source link

List Vite at the same level as SSR frameworks as a way to start a new React project #5797

Open matijaSos opened 1 year ago

matijaSos commented 1 year ago

In the "Start a New React Project" section of the docs, Vite (and Parcel) are currently mentioned at the bottom of a collapsible toggle "Can I use React without a framework", hidden by default. They are listed as an option only if your app has "unusual" constraints (no further explanation or example of what that could be).

As Dan recently explained, the main reason behind this is that SSR frameworks offer the optionality of, well, SSR. The argument is that although you may not need it now, you might in the future, so you should still start with an SSR framework. But it isn't a free lunch - this way, you get immediately locked into a specific framework that makes a lot of other decisions for you that you haven't even had a chance to evaluate yet.

The recent article "New React docs pretend SPAs don't exist anymore" caused a lot of reactions, and many developers expressed their opinion on Reddit (300+ comments) and HackerNews (200+ comments).

This was the top comment in the Reddit thread:

Screenshot 2023-03-22 at 12 52 27

My point is not at all that an SSR framework is a bad/wrong choice for any kind of app, and I believe it is a totally valid recommendation, even for SPAs. But it is evident that developers still widely recognize other solutions as equally good for particular use cases. Also, with the current setup, beginners in React are now forced to immediately choose between three frameworks which all add a lot on the top of React. It is almost an impossible task for a beginner (in the end, 80% will choose Next simply because it is listed on top).

Vite should be listed next to Next, Remix, and Gatsby. I would clearly depict the pros and cons and possible pitfalls.

I understand that the aim here was to protect developers from using react in a "wrong" way, but, at the end of the day, React is a library, not a framework, and there are a lot of benefits to it. The docs should respect and objectively reflect what the developer community identified as sensible ways to use it, not the other way around.

Ruchita1010 commented 1 year ago

As a beginner in React and when I saw NextJS, Remix, and all these things mentioned, I was stunned. I mean I've heard about NextJS and what benefits it offers but at the same time, it's overwhelming to me to jump straight into it without knowing anything about React. And even NextJS says "To effectively use Next.js, it helps to be familiar with JavaScript, React, and related web development concepts". So, I feel that Vite should be mentioned at the same level!

martinovicdev commented 1 year ago

To add a bit to this discussion, I would like to raise a point about the ease of use for beginners. This is something that is sitting in the "Get started" section which will be seen by the newcomers to either React or general development. As such, it should provide a minimal way to learn React. To use those frameworks effectively and to appreciate the problems they are solving, you have to know the basics.

Before new docs, CRA was the default and similarly, Vite should be considered a default for newcomers to React as it won't add complexity to new React users who are just getting started. In that way, new learners will gradually learn with a minimal environment and add complexity later on. Then after they have fully grasped the basics, they can move on to frameworks. Next.js has a really nice intro to JavaScript which moves on to React and then finally to Next.js.

We can talk about ways of using those frameworks (e.g. you can have a perfectly viable Next.js SPA with 100% code on client and also have a way of including SSR to Vite) but that is something that should be discussed after having knowledge of React itself. Initially, you want a simple way to get started with a new React app so you can learn about it and play with it.

How to express this? Vite could be added in "If you're new to React" section above current one as an option for beginners to use it to get started with React. As for @matijaSos's suggestion, Vite should have a place next to React frameworks themselves because it is a viable and reasonable way to build your React application.

oskvr commented 1 year ago

They seem to have settled on the somewhat idealistic idea that every project will eventually outgrow Vite and require some framework-specific features. In reality, most beginners just need a playground for practicing the core fundamentals of React, and for that a 30 MB Vite project is probably a more sensible starting point than a 200 MB Next.js project.

By starting small and hitting walls they might even develop a better understanding of the benefits of using a framework.

bdudelsack commented 1 year ago

I'm teaching TypeScript and React at the university for the beginners. I've used CRA last semester and decided to go with Vite this year. I don't want to confuse my students with the complexity of Next.JS or Gatsby and would like to show them that Vite is a legitimate approach as shown in official docs

alexleduc76 commented 1 year ago

Another argument in favour of this is that the Next.js documentation is great to learn what Next.js adds to React, but is not a good starting point to learn React. I can easily imagine that a segment of junior devs trying to learn React will navigate to the Next.js website after typing the npx command from the Start a New React Project page on React.dev, and totally miss out on the starter documentation on the React.dev site and be confused.

The first page of the Next.js documentation doesn't even tell you something like "who this documentation is for: Developers already familiar with React" nor attempt to redirect you back to React.dev to learn the basics.

benma commented 1 year ago

I was looking at a way to start a simple React app and react.dev did not deliver. It hit me with a bunch of heavy frameworks that I don't want to get into. Found Vite on some totally unrelated blog and it worked extremely well for my purpose. Please add this to the main page on react.dev.

I know for a fact that I will never need SSR for my small project.

matijaSos commented 9 months ago

It's been over 6 months since this was posted, with over 100 people expressing their support. Is there ever going to be any kind of reaction/answer from any of the maintainers?

lunaleaps commented 8 months ago

Hi @matijaSos, the points you and this group have brought have been heard and are being considered. Our team does think it makes sense to lift up some of the non-framework approaches to React and also provide clear disclaimers for each option. These changes require careful consideration and as we've been focussed on catching up on canary documentation, it hasn't been a priority but as we wrap up more docs, it is definitely something we'll be revisiting. Thanks for caring

cucar commented 6 months ago

I feel this prevents evolution of the React ecosystem! All new users are being sent to NextJS, Gatsby, Remix and other frameworks as leads. I have a new idea of implementing SSR data as a new framework on top of React, very much like these companies. What would I have to do to be listed there? Can I be listed if I don't have any users? How would I get any users if you keep promoting these libraries? I feel CSR should be promoted first and foremost to new users, along with Vite. It feels very biased that React is sending leads to these companies, which they make money from. It begs the question why.

JakeSaterlay commented 1 month ago

I really think this should be considered. As mentioned above not everyone building with React is a professional developer, some are hobbyists and trying to learn. Being immediately shoved a framework in your face can be super daunting and put newer, aspiring developers off. I really hope the team re-consider this.