ข้ามไปยังเนื้อหา

State of React 2024

Back-End & Infrastructure

Bundling & serving your app

Meta-Frameworks Ratios Over Time

The only framework showing strong usage growth is Astro, going from 18% to 26%. Also worth noting that TanStack Start made a very strong debut at 81% interest and 90% retention!

Astro
Create React App
Gatsby
Next.js
Remix
Redwood
TanStack Start
Docusaurus

Mode:

View:

0%
20%
40%
60%
80%
100%
2023
2024
0%
20%
40%
60%
80%
100%

Other Meta-Frameworks

Waku is notable in that it's one of the few frameworks that were started after the advent of React Server Components, with the intent of taking full advantage of them from the start.

0%
20%
40%
60%
80%
100%
1

2

3

4

คำตอบอื่นๆ

คำตอบที่ตรงกับ “คำตอบอื่นๆ” 155
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
173
2%

Build Tools

Vite has now overtaken Webpack, which is quite remarkable given how long Webpack has been around.

0%
20%
40%
60%
80%
100%
1

5,418
2

5,330
3

3,133
4

2,556
5

1,982
6

1,895
7

1,782
8

1,401
9

789
10

426
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
6,186
79%
Which build tools and bundlers have you used?

Hosting Services

Vercel leads the rankings, which is understandable given its heavy investment in the React ecosystem.

0%
20%
40%
60%
80%
100%
1

Vercel

3,648
2

AWS

2,991
3

GitHub Pages

2,377
4

Netlify

2,314
5

Heroku

1,464
6

Cloudflare

1,392
7

Azure

1,173
8

Digital Ocean

1,023
9

Google Cloud

857
10

Render

526
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
5,996
76%
Which of these services have you used to host your React apps?
We asked members of the React community to share their “pick of the year”

My 2024 Pick: Pigment CSS

The Material UI team is building a next-gen CSS-in-JS library that pulls the styled API into the React Server Components era. There’s no shortage of CSS-in-JS tools out there, but this one checks all of the boxes for me.
We asked members of the React community to share their “pick of the year”

Josh W. Comeau

Software engineer and educator. Creator of The Joy of React

Other Services

Firebase is still a popular data storage platform, while Sentry remains most people's go-to for error tracking.

0%
20%
40%
60%
80%
100%
1

Firebase

2,505
2

Sentry

2,266
3

2,102
4

Redis

1,660
5

Supabase

1,589
6

PlanetScale

523
7

Upstash

341
8

9

Neon

10

Datadog

0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
5,556
71%
What other services have you used with your React apps?

Back-end Languages

As expected, TypeScript and JavaScript power most React app's back-ends, showing that developers put a premium on keeping their entire codebase in the same language.

0%
20%
40%
60%
80%
100%
1

4,609
2

3,826
3

1,610
4

1,378
5

1,254
6

1,103
7

1,097
8

516
9

432
10

378
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
6,126
78%
Which language(s) are your back-end apps written in?

Back-End Pain Points

Oftentimes, the most common pain points will be generic issues such as “excessive complexity” or ”tough learning curve” – but not this time. End-to-end typesafety (sharing types between server and client; and making sure any data transferred comforms to them) is clearly this year's top issue when it comes to back-end infrastructure, and it explains why we're now seeing tools such as TanStack Start and tRPC appear to solve it.

0%
20%
40%
60%
80%
100%
1

End-to-end type safety

2

Deployment

3

Next.js issues

4

Excessive complexity

5

Frontend and backend integration

6

คำตอบอื่นๆ

คำตอบที่ตรงกับ “คำตอบอื่นๆ” 228
0%
20%
40%
60%
80%
100%
% ของผู้ตอบคำถาม
203
3%
What pain points have you encountered related to back-end and infrastructure?
แบบอิสระ

แหล่งข้อมูลที่แนะนำ

Intermediate Next.js
Scott Moss
Superfilter AI

Intermediate Next.js

Level up your Next.js skills to build production-ready applications. Dive into advanced concepts like server actions, route slots, and data fetching strategies.
Expand Your Abilities to the Server and Master the Fullstack
Jem Young
Netflix

Expand Your Abilities to the Server and Master the Fullstack

Set up servers, create APIs, and deploy your code to the world by learning the full stack.
ขอบคุณพันธมิตรของเราที่สนับสนุนเรา! เรียนรู้เพิ่มเติม