React bandlers
Aspects to consider
Setup process, configuration
Build performance
Bundle size, optimisation
Testing
E2E
Options
Next
While it's possible to use Next.js for client-side rendered (CSR) single-page applications (SPAs), it's not necessarily the best choice.
Next.js is primarily designed as a server-side rendered (SSR) framework, meaning it's optimized for generating HTML on the server and sending it to the client. While it does support CSR through its client-side routing system, it adds additional complexity and may not provide as good of a user experience as a dedicated client-side framework.
For example, Next.js requires that all pages be pre-rendered on the server, which can increase build times and limit the number of dynamic pages that can be generated. Additionally, the client-side routing system can result in slower page transitions and decreased performance compared to a dedicated client-side framework.
If you're building a SPA, a dedicated client-side framework like React with tools like Vite, Create React App, or Gatsby might be a better choice. These tools are optimized for client-side rendering and provide faster performance and better user experience for single-page applications.
Create React App
CRA provides a simple and straightforward setup for building React applications. It comes with a pre-configured development environment, build scripts, and a default project structure that can be useful if you're just getting started with React.
CRA is a widely used and well-established tool in the React ecosystem. It has a large and active community, which means that you can find plenty of resources, tutorials, and support online.
CRA has a stable and predictable release cycle, with new versions being released at regular intervals. This can be beneficial if you prefer a more conservative approach to upgrading your project dependencies.
CRA has good support for accessibility out of the box, with accessibility checks included in the development server and build process.
CRA is developed and maintained by the React team at Facebook, which means it's likely to be well-maintained and updated with new features and bug fixes.
Vite
Faster development experience: Vite provides a faster development experience than CRA because it uses a modern development server with fast hot module reloading and blazing-fast build times.
Smaller bundle sizes: Vite generates smaller and more optimized bundles compared to CRA. It achieves this by using native ES modules in modern browsers and dynamic imports, resulting in faster load times for your app.
Configurability: Vite is highly configurable, and you can customize it to suit your needs. It has a plugin system that allows you to extend its functionality and integrate with other tools.
Easier to set up: Vite has a simpler setup process compared to CRA, which can be beneficial if you're just getting started with React or prefer a lightweight approach.
https://vitejs.dev/guide/why.html
https://medium.com/codex/you-should-choose-vite-over-cra-for-react-apps-heres-why-47e2e7381d13
https://hackernoon.com/why-vite-is-better-than-create-react-app-cra
https://semaphoreci.com/blog/vite
Another great benefit might be using Vitest, which is designed to be easily setup and integrated with Vite and has similar advantages in terms of setup and performance
Vitest is a relatively new JavaScript testing framework, and it has some differences and potential advantages over Jest:
Simplicity: Vitest is designed to be lightweight and easy to use, with a minimal setup process and a simple API. It doesn't require any configuration files or complicated setup, and it can work with any testing library or assertion library of your choice.
Performance: Vitest is optimized for performance, with features such as parallel test execution, caching, and incremental testing. This can significantly reduce the time it takes to run your tests, especially for larger projects.
TypeScript support: Vitest has built-in support for TypeScript, a popular programming language that adds static typing to JavaScript. This can make your tests more robust and prevent common errors and mistakes.
Integration with other tools: Vitest integrates well with other development tools and frameworks, such as VSCode and Node.js. This can make it easier to incorporate Vitest into your existing workflow and toolchain.
That being said, Jest also has its own advantages, including:
Built-in features: Jest has a lot of built-in features and tools, such as code coverage analysis, snapshot testing, and mocking. This can save you time and effort compared to setting up these features manually with other frameworks.
Community: Jest has a large and active community, with plenty of resources, plugins, and integrations available. This can make it easier to find solutions to common testing problems or get help when you need it.
Compatibility: Jest is widely used and adopted in the industry, which means it's more likely to be compatible with other tools and libraries you might be using in your project.
https://vitest.dev/guide/why.html
https://vitest.dev/guide/comparisons.html#jest
Decision
React Framework - Vite
CRA provides a more opinionated and restrictive development experience compared to Vite, Vite provides a faster development experience, generates smaller and more optimised bundles and has a simpler setup process. CRA is bloated with a lot of preconfigured features we might not use which makes setting up new applications in Vite easier, ejecting CRA might make it difficult to update to a new version. A lot of similar advantages comes from using Vitest.
Last updated
Was this helpful?