Pure React vs Next.js | What’s Happening in React?

Summary

The video discusses recent changes in the React ecosystem and their implications for developers. It addresses concerns about the future of React applications, the shift towards server-side rendering, and the choice between using plain React or a framework. The speaker recommends that beginners start with plain React and then explore frameworks like Next.js, emphasizing the importance of understanding the reasons behind technology choices. The video also highlights the popularity and job opportunities provided by React, and encourages developers to adapt and learn new tools as the landscape evolves.

Takeaways

• 🚀 React is undergoing significant changes, impacting how developers create and approach applications.
• 📚 The React team released new documentation in March, shifting focus towards frameworks over plain React library for new applications.
• 🤔 There is confusion among developers, especially beginners, due to the push towards frameworks and the de-emphasis on plain React for app creation.
• 🌐 Server-side rendering (SSR) is gaining popularity and is supported by the React team, with Next.js being a prominent example.
• 📈 According to a JavaScript survey, React continues to be the most popular library with high usage and retention rates, indicating job opportunities and learning resources.
• 🛠️ For beginners, it is recommended to start with plain React to understand the fundamentals before moving onto frameworks.
• 🔄 The choice between using a framework or plain React should be based on the specific needs of the project, such as size, interactivity, and SEO requirements.
• 🔥 Next.js is the leading rendering framework, and its popularity is expected to grow with the introduction of the stable App directory version.
• 🧱 Build tools are evolving, with Vite gaining significant traction and potentially overtaking Webpack for new projects.
• 🌟 The key to navigating the ever-changing landscape of web development is continuous learning and adaptation, regardless of the specific technologies used.

Q & A

What are some of the major changes happening in the React world?

The React team has released new documentation that now recommends using a framework instead of the pure React library for creating applications. This shift is towards server-side rendering, with Next.js gaining popularity.

Why did the React team make the change to recommend frameworks over plain React?

The change is due to the growing popularity of server-side rendering and the benefits it brings, such as faster initial page load speeds and better search engine optimization. Frameworks like Next.js provide these features out of the box.

What is the concern regarding the new documentation for beginners?

The new documentation might be confusing for beginners as it suggests using frameworks without providing a clear guide on how to create client-only React applications, which could make starting with React more challenging for new learners.

How does the popularity of React affect job opportunities?

React remains the most popular library according to the latest JavaScript survey, with a high usage rate and retention rate. This means there are many apps built with React, leading to more job opportunities for developers skilled in React.

What is the retention rate for React and what does it signify?

The retention rate for React is at 83 percent, indicating that a large majority of developers who have used React continue to prefer it. This high retention rate is a positive sign for the future of React and its continued relevance in web development.

What is the current status of other JavaScript frameworks like Angular and Svelte?

Angular's retention rate is not as high as React's, suggesting it might not be the best choice for beginners. On the other hand, Svelte is becoming increasingly popular and is worth considering for learning and development.

What are the differences between server-side rendering (SSR) and client-side rendering (CSR)?

SSR renders the HTML page on the server and sends it to the browser, resulting in faster initial page loads and better SEO. CSR, on the other hand, sends an empty HTML file and bundled JavaScript to the browser, which then renders the page, potentially leading to slower load times and search engine indexing issues.

What factors should influence the choice between using plain React and a React framework?

The choice should be based on the project requirements. For small applications or portfolios, there might not be a significant difference. However, for larger applications with complex routing or those that require SEO, a framework like Next.js is recommended.

What is the advice for developers when it comes to choosing technologies in their projects?

Developers should be adaptable and ready to learn new technologies. They should create small applications using various technologies to understand their strengths and weaknesses and choose the best option based on the project's needs.

How does the React community view the future of React and its frameworks?

The React community sees a continued growth and evolution, with frameworks like Next.js gaining more popularity. The focus is on understanding the benefits of different technologies and choosing the right tool for the job.

What is the recommended approach for learning React and its frameworks?

The recommended approach is to start with plain React, create small applications, and then explore frameworks. This helps developers understand the reasons behind using certain tools and methodologies, and allows them to make informed decisions for their projects.

Outlines

00:00

🚀 Introduction to React's Future and Frameworks

This paragraph discusses the significant changes in the React ecosystem and the confusion it has caused among developers. It highlights the shift in the official documentation's recommendation towards using a framework instead of plain React for new applications. The speaker expresses surprise at this change and acknowledges the popularity of server-side rendering with Next.js. The paragraph emphasizes the need for clarity, especially for beginners, and suggests that developers should experience both plain React and frameworks to make informed decisions. The speaker advocates for an updated installation guide that caters to beginners and provides options for creating client-only React apps.

05:00

📈 React's Popularity and Job Opportunities

This section delves into the popularity of React, as evidenced by its high usage and retention rates among JavaScript developers. It suggests that React continues to offer abundant job opportunities and that the decline in retention rate is normal and not a cause for concern. The paragraph also compares React with other frameworks like Angular and Svelte, noting the decline in interest for Angular and the growing popularity of Svelte. It discusses the rendering frameworks, with Next.js being the most popular, and the impact of the new stable version of the App directory on its adoption. The section also covers build tools, highlighting the shift from webpack to Vite and the advantages of using Vite for larger applications.

10:03

🌟 Adapting to Trends and Choosing the Right Tools

The final paragraph addresses the constant change in trends, technologies, libraries, and frameworks, emphasizing the developer's responsibility to adapt and learn continuously. It advises using both plain React and React frameworks, depending on the project's requirements. The speaker provides examples of when to use each approach and encourages developers to be prepared to handle various technologies, such as Next.js or Remix, for different projects. The paragraph concludes with a call to action for developers to stay organized, keep learning, and explore different options without getting caught in the 'what to do' trap, and reminds developers that the choice of language or framework ultimately depends on their specific needs.

Keywords

💡React

React is an open-source JavaScript library created by Facebook, used for building user interfaces, particularly for single-page applications. It is known for its component-based architecture and efficient rendering of changes. In the video, React is the central topic, with discussions around its future, different ways of implementation, and its popularity among developers.

💡Create-react-app

Create-react-app is a widely used tool for bootstrapping new React projects. It simplifies the initial setup process by handling the configuration of build tools like Webpack and Babel. The video mentions that some developers found it slow and outdated, leading to discussions about alternative tools like Vite.

💡Server-side rendering (SSR)

Server-side rendering is a technique where the server generates the HTML of a web page before sending it to the client, resulting in faster load times and better search engine optimization. The video discusses the React team's support for SSR and how it is becoming more popular, especially with the rise of frameworks like Next.js.

💡Client-side rendering (CSR)

Client-side rendering is a method where the browser downloads HTML, CSS, and JavaScript files, and then the JavaScript dynamically generates the content that is displayed on the page. The video talks about the trade-offs between CSR and SSR, and when it might be preferable to use one over the other.

💡Frameworks

In the context of the video, frameworks refer to structured libraries built on top of React, like Next.js, that provide additional features and simplify the development process. The discussion includes the recommendation from the React team to use a framework instead of plain React for new projects.

💡Vite

Vite is a build tool developed by the creator of Vue.js, designed for faster and more efficient development workflows. It is mentioned in the video as a potential alternative to Create-react-app and is favored for its speed and modern development experience.

💡Next.js

Next.js is a popular React framework that simplifies server-side rendering and provides features like automatic code splitting and optimized data fetching. The video highlights Next.js's growing popularity and the release of its stable version of the App directory, which further eases the development process.

💡JavaScript survey

The JavaScript survey is an annual questionnaire aimed at understanding the trends and preferences within the JavaScript ecosystem. The video refers to this survey to discuss the usage and retention rates of React and other libraries, indicating their popularity and the job opportunities they offer.

💡Webpack

Webpack is a static module bundler for modern JavaScript applications. It packages JavaScript files and their dependencies for use in a browser. The video mentions that while many apps still use Webpack, there is a noticeable shift towards Vite, indicating a preference for faster and more efficient build tools.

💡SWC

SWC, or Speedy WebAssembly Compiler, is a fast and lightweight alternative to JavaScript compilers like Babel. It is mentioned in the video as the tool Next.js uses, highlighting a trend towards solutions that can improve development speed and efficiency.

💡Search engine optimization (SEO)

Search engine optimization is the practice of improving a website's visibility and ranking in search engine results. The video discusses the impact of SSR and CSR on SEO, emphasizing that SSR can lead to better indexed pages by search engines due to pre-rendered content.

💡Progressive web apps (PWAs)

Progressive web apps are web applications that are regular websites or web applications but can appear to work like traditional applications. They are designed to provide a seamless and engaging user experience. The video touches on the trend of web development shifting towards creating PWAs and how React and its frameworks play a role in this evolution.

Highlights

Major changes in the React world and their impact on developers.

New React documentation released in March causing excitement and confusion.

Create-react-app criticized for being slow and outdated.

Official documentation now recommends using a framework instead of pure React library.

Server-side rendering gaining popularity and support from the React team.

Recommendation for beginners to first use plain React before moving to frameworks.

React remains the most popular library according to the latest JavaScript survey.

High retention rate for React at 83 percent, indicating strong ongoing support.

Svelte's increasing popularity as an exception among older frameworks.

Next.js as the most popular rendering framework, with a stable version of the App directory.

Vite's significant rise in popularity, challenging the use of webpack.

The importance of not getting stuck on any single technology or framework.

Adaptability as a key obligation for developers in the ever-changing tech landscape.

Recommendation to use both plain React and React frameworks based on project needs.

The ease of learning a React framework for those already familiar with React.

Emphasis on continuous learning and exploration in the field of web development.

The absence of a perfect language or framework, highlighting the need for informed choice based on specific needs.

Transcripts

Hi friends, let’s talk about what’s happening in React and the future of React applications.

This video is really important that because there are some major changes in the React

world, and I see many confused people asking questions like How to create React apps?

Should we use plain React or a framework?

Is React dying?

Should I use Server-side or client-side rendering?

And many other questions.

Let’s start with the installation.

As you know, the React team released the new documentation last March.

And we were all so excited because we knew the beta documentation was great.

And we were expecting some updates on how to create new react applications.

Because some people were complaining about Create-react-app that it’s too slow, it’s outdated.

There should be something new.

And we thought they would update the Create-react app or recommend using Vite instead.

But after the new documentation was released, something surprising happened.

Because on the installation page, they now recommend using a framework instead of the

pure react library.

I should admit that I was surprised too.

Of course, I knew that server-side rendering was getting popular and React team was supporting

Next.js.

But anyway, in those days, the only thing people were talking about was Vite versus

Create-react-app.

And now, in the official documentation, they recommend using a framework.

Just in this last paragraph, it says how to use it without a framework.

And even here, they don’t show how to do it as they do here.

Well, for developers who already know React, it makes sense.

Because now we know the future vision of the React team.

Obviously, it's the Server side rendering.

And we can understand their concerns explained here.

But when it comes to beginners and developers who are creating some React apps but aren't

quite into frameworks, this page might be a little bit confusing.

I know that because I’m getting many questions, and I see many posts on social media, and

people seem to be lost.

They are like, “Wait?

I’m trying to learn something already difficult to me, and now I have to learn a harder thing?”

Of course, it’s not true because you are writing exactly the same code.

In any case, you are using React ant its features.

Moreover, if you use a framework, most of the features are out of the box.

But I don’t blame them because they don’t know that yet.

It’s not exactly the same thing I know, but it's like recommending typescript to a

javascript learner.

And explain to them why they should use it and what are the possible difficulties they

might face.

And you can convince them, and , they can learn typescript.

But for me, the best way to understand why one option is superior to the other is to

use both of them and observe their strengths and weaknesses.

Then it’s easier to make a choice and compare options.

And the same thing for here.

In my opinion, they should first use plain React, make some small applications, and

try a framework and be able to say: “Okay, I’m using React Router Dom, but Next.js

does this using only the app directory.”

Or, “Okey, I’ve learned how to split the code to reduce the bundle size, but doing

this for each page is annoying.

Maybe I should use a framework.”

And same thing for other features like data fetching or search engine optimization

So they should understand why they are using what they use.

Basically, I would humbly recommend that the React team update the installation page and

make it more beginner friendly and add here a guide on how to create client-only React apps.

I know they have a learning page, and it's great.

It's interactive and easy to follow, but at the end of the day, people want to install

it on their computers and create some small applications.

I think the best way is adding here a different installation command and give some options

that people can choose.

It can be a framework option with the recommended label but also a plain React app using Vite.

So users can choose whatever they want.

But which one should we choose?

A framework or plain React.

Before that, I want to answer this terrible question.

Absolutely not.

Not even close.

Actually, it is still the most popular library.

So let’s check the latest Javascript survey.

And in this page, we should check two sections.

The usage rate and the retention rate.

The usage page shows the percentage of javascript developers who used these libraries and frameworks

in those time periods.

And as you can see, it’s still on top, and it means there are many apps built with React.

This is why React has more job opportunities than others.

And if you check the retention, which is the percentage of developers who used these libraries

and still want to use them.

And it’s 83 percent, which is pretty high.

Of course, it’s declining, but it’s totally normal.

If you don’t count these new libraries because there are not enough applications built with

them, you’ll see that all frameworks are declining.

But the important point is the difference between years.

One percent, 4 percent, 1 percent.

It’s quite good.

It shows that beginners can start learning React today.

Because people are still doing projects, there will be tons of new tutorials and courses

on the internet.

But if you check Angular here.

It doesn’t look good, and starting to learn Angular might not be the best idea.

If you are an Angular developer, you can still find a job.

But if you are a beginner, you probably should learn something else.

By the way, I said all old frameworks are declining, but there is an exception here.

People really love Svelte, and it’s getting more and more popular.

I personally want to learn also.

And I wonder what you think.

Just let me know your opinion about Svelte in the comments.

And let’s check the rendering frameworks.

As you can see, Next.js is the most popular.

And after the new React documentation probably, it’ll blow up this year.

And in the retention again 1 percent difference.

It’s quite good.

But Next.js

has just released the stable version of the App directory.

And it makes coding much easier and more fun.

So I expect this number will increase by the end of the year.

Let’s finally check the build tools.

Of course, most of the apps are still using webpack but look at this jump here it’s

almost 20 percent, and people really love Vite.

And in the retention section, it’s on the top, and we could say that using webpack is

not a good idea anymore.

This is what Create-react-app was using.

For small applications, it’s okay, but when you don’t configure the webpack for large

applications, the development process might be really difficult.

And if I remember correctly, Next.js is using SWC.

As you can see, nothing is dying.

Actually, I hate this word.

I know influencers and bloggers like giving sharp titles to get attention like it's dead, don’t use

it, stop using it.

But it’s just not for me.

So let’s talk about what to choose.

If you are a beginner, I’ve already told you my opinion, but If you know React and

you are confused about what to choose.

Firstly, I want to say there is nothing to worry about.

React and React frameworks are not different things.

At the end of the day, you are still writing React events, React hooks, and all the React features.

The main difference is you won’t be using React Router Dom anymore, instead, you’ll

use the app directory and create folders to define routes.

And the other difference is rendering pages and components.

Normally React renders them on the client side.

It means when you visit your website.

The server receives the request and sends an empty HTML file and a bunch of bundled

JavaScript.

And your browsers process those bundles, and renders the final HTML

file.

So the initial page load speed of the application can be slow because of this process.

Of course, we are talking about a large project that has a really big bundle size.

It doesn’t mean every app is slow.

And since the page is built on the user's browser, search engines cannot index websites

properly.

But on the server-side rendering, when you visit the website, the server receives the

request and renders the HTML page, and sends that to your browser.

So if you have an old computer or phone, it’s really good because your browser doesn't have

to render everything from scratch, so it shows the initial page faster.

But since everything happens on the server side, you won’t be able to interact with

the user.

If you want to create an event, you have to create a client-side component.

So if you have a highly interactive website, it might be really annoying.

Basically, choosing SSR or CSR depends on your project.

It’s funny because ten years ago, when people were using server-side websites and client-side

rendering started to become really popular, the developer platforms and blogs had full

of discussions.

After the new frameworks, people started creating web applications instead of regular websites,

and user interaction was the new trend.

These apps and progressive web apps were believed to be the future of web development.

And after years, here we are.

Trends are changing, technologies, libraries, and frameworks are changing, but one thing

remains the same.

The obligation of adaptation.

This is the worst part of being a developer.

We have to learn every day.

We can’t be stuck on any technology or any idea, and we have to learn as much as we can.

So when it comes to using plain React and its frameworks, my recommendation is to use

both.

If you have a small single-page application, a website with a couple of pages, or a portfolio

page, there will be no big difference between them.

For example, I created this website using React and Next.js and as you can see,

there is almost no difference.

So you can use React with Vite.

Or, if you have an admin dashboard that doesn’t require SEO and has many interactive components,

again, you can use Vite.

But if you are creating a large application with many data fetching, many different pages

like an e-commerce application, or if SEO is important for your website like a blog

application, I highly recommend you to use a framework.

And again, don’t worry if you already know React; it’ll probably take one week to learn

a React framework.

It’s not like moving from Java spring boot to Express js or something.

So keep creating small apps using all of these technologies.

When you get any project, you should be ready to deal with it using Next or Remix, or regular React.

And don’t fall into the “What to do trap.”

Just be organized, be a learner, and be an explorer.

And don’t forget there is no perfect language or framework.

It is up to you to choose the best according to your needs.

Okay, guys. that’s all for today.

Let me know your opinion in the comments, I really wonder what you’re thinking about

the future of React.

And I’d appreciate it if you could like this video.

It’s really important to me.

Don’t forget to follow Lama Dev’s social media accounts.

I hope I’ll see you in the next video.

Goodbye.