To have successful software, you need to have a great foundation. It needs to be scalable, easy to upgrade and easy to maintain.
The best approach are zero-config solutions such as Create React App, Next.js or Gatsby.js. Each of them has a different use case, but they share the same idea: combine the latest web technologies under one package. Which is just perfect!
You get (for free):
new features, bug fixes and security updates with a simple - update of ONE package
all cured by a huge community and technology leaders
The main risk of having dozens of dependencies is that eventually, you’ll inevitably need to upgrade. There are many updates for each library, and you can't just update them all. You also need to ensure that this update doesn't harm anything. This can sometimes make updates really difficult, and therefore can result in a project becoming more and more outdated. This could even happen during development—which basically means that a project which hasn’t been finished yet can already be outdated. And outdatedness brings with it a lot of security problems, performance issues or a worse developer experience.
So why bother with this headache? Just rely on the tools mentioned above and focus on your app.
Created and maintained by Facebook
High-quality contributors (for example, Tobias Koppers a.k.a. sokra - creator of webpack, Kent C. Dodds and of course amazing React Core team)
Well-known by almost every React developer, which leads to easier onboarding
Has outstanding documentation
Provides maximum freedom
Tools are preconfigured to work in a specific way, which can only be changed by “ejecting” (something we strongly recommend you do not do; instead, go with react-app-rewired or create-strv-app or any other fork of the main repository)
Requires extra work to achieve the same capabilities as Gatsby or Next.js
Created by Vercel
Provides outstanding server-side capabilities
Has static export
Can combine server-side rendering with static export
With server comes huge responsibility: security
Uses framework-specific abstractions such as
getInitialProps, so when doing a refactor to another framework, it requires extra effort
One of the best static-site generators
Has tons of plugins
GraphQL API for pulling data
A built-in full toolkit of web developers, including image optimization
Without incremental builds (e.g. just some pages were changed, but build command has to rebuild everything), it can be a bit slow. Gatsby Cloud is the nice solution for the problem.
Because of a lot of internal logic, there is a much harder learning curve
To avoid unnecessary headaches and refactoring during development, It’s very important to choose wisely. As a developer, you must know your app’s exact purpose. Is it a simple landing page displaying a basic introduction of a product or company? Or are you building an e-commerce solution?
At first sight, it may seem like it doesn’t matter because we develop the app in React and it will therefore be a Single Page Application. But in fact, it matters a lot. Based on the established purpose of the app, we can decide on the ideal project starter. Some are good for static export, some for server-side rendering, some just for client rendering.
There are a few basic rules that help you decide.
Your app requires user authentication
You don’t care about SEO
You are planning to implement your own routing
A typical example: Tinder PWA
Project starter: Create React App
You care about loading performance
You care about SEO
Static (hardcoded) content
Content doesn’t change that often
A lot of dynamic content will be possible with incremental builds support
Gatsby-plugin-netlify-cache to speed up build time by 10x
A typical example: www.lubosmid.com
Project starter: Gatsby, Next.js, Create React App turned into react-static or react-snap
You care about SEO
A lot of dynamic content
You need maximum scalability with your infrastructure.
Easier A/B testing
A typical example: www.littlespoon.com
Project starter: Next.js, Create-React-App turned into Razzle
Both Gatsby and Next.js provide a lot of utilities out of the box. Built-in code-splitting, simple client-side routing, outstanding development experience (Hot Module Replacement) and numerous plugins and tutorials. So, why should you bother with Create React App, which is missing a lot of things that must be added if you’re aiming for an experience similar to what you get with Gatsby and Next.js?
The answer is simple: Create React App provides you with full control over your web app. Meaning that you can adjust it based on your needs while not being limited by predefined solutions.
Additionally, it’s quite easy to refactor it to serve another purpose. But as mentioned above, no need to worry about refactoring if you make wise choices from the very beginning.
Rendering on the web is a difficult topic. It wasn’t that long ago that rendering was the responsibility of backend engineers. Today, it’s the job of a fullstack developer.
Luckily, there are many great resources available. Big kudos to Jason Miller and Addy Osmani for putting together an article on Google Developers: https://developers.google.com/web/updates/2019/02/rendering-on-the-web
Last note: Sometimes it’s really hard to make the right choice, even for skilled developers. Don’t be shy and ask senior devs for their opinions. They can help and guide you — not just in picking the correct project starter, but in anything you need. Find yourself a mentor. And, later on, strive to become a mentor yourself. Because teaching is the best way of learning.
Besides a good project starter, you also need to have code quality tools, a testing library and much more. Why not automate the job with curated Github templates?
more on strv.io