NextJS, Typescript, and Apollo: A Killer Combo for your React App
6 min read
February 9, 2023
Making the right technology choices is crucial when starting a new software project. Developers must choose the right tech stack that will serve as the foundation for the codebase and guide all future work. With so many available options, choosing the right tech stack can be challenging.
In this article, we will look at some of the most popular choices for a front-end tech stack alongside some modern alternatives that could provide additional benefits and a better development experience for your project.
NextJS vs Straight-Up React
React has become a popular choice for both small and large applications, with major companies such as Dropbox, Airbnb, and Instagram adopting it. Its key benefits, such as fast development, virtual DOM, flexible and reusable components, and thriving community support, make it a top pick. However, it is not without its limitations.
NextJS, built by the Vercel team, is a framework built on top of React that aims to provide a streamlined and efficient development experience.
The key advantage of using NextJS is its built-in approach to server-side rendering (SSR). This helps improve search engine optimization (SEO) compared to single-page applications (SPAs) built with React. With SSR, HTML pages are fully generated and returned to the client on each request, ensuring that relevant content is provided and allowing for better SEO.
Other benefits of NextJS include:
Improved performance with pre-optimized features
Lazy loading and automatic code splitting for faster loading times
A built-in routing solution with a /pages directory
A large community of users and comprehensive documentation
While NextJS offers many benefits, it is essential to consider some potential drawbacks, including:
A learning curve for those unfamiliar with the framework
An opinionated approach with pre-optimized features
A different approach to routing compared to traditional React apps
Ultimately, the choice between React and NextJS depends on the goals of the application. While React is a popular choice for front-end development, NextJS may offer enhancements that could benefit the application.
TypeScript offers additional benefits including:
Strict typing: This helps prevent bugs as data moves throughout the app by ensuring that once something is defined, it doesn't change.
Type annotations: Allows developers to explicitly define what types should be used.
Type inferencing: Automatically done by TypeScript where possible.
Error catching: Allows developers to catch errors early with the compiler before code is pushed to a repository.
Built-in documentation: Provides a level of built-in documentation to help developers easily understand what a piece of code is intended to do.
While TypeScript has many pros, it also has some drawbacks:
Optional typing: Since typing is optional and not all types can be inferred, it is not true static typing.
An extra step of compiling: TypeScript requires an extra step of compiling.
Overall, TypeScript can bring many beneficial features to the development experience and codebase. However, the decision to use it should be carefully considered based on the application requirements and the experience levels of the team to avoid slowing down the development cycle. It's best to make these considerations at the beginning of a new project, as switching to TypeScript in an existing codebase carries its own set of decisions and refactoring to clear tech debt and future-proof the codebase.
Apollo GraphQL vs REST APIs
When it comes to data and API design, the most commonly used standard is REST APIs. In a REST API, the data is stored on the server and fetched by the client through HTTP requests to pre-defined endpoints, which then return structured responses. These endpoints support CRUD operations (create, read, update, delete) for the client to manage the data.
However, as applications become more complex, new challenges have emerged that need to be addressed by new technologies. These challenges include:
The growing use of mobile devices, which requires more efficient data loading
Faster feature development
Supporting a wider range of clients
One technology trying to tackle these challenges is GraphQL, which is a language for querying databases from client-side applications that are based on the client's specific needs, rather than a fixed data structure like in REST APIs.
Apollo, a GraphQL implementation, aims to simplify the development process by helping developers manage data more easily with a suite of tools such as Apollo Client. Apollo Client is a state management library that allows us to manage both local and remote data with GraphQL.
Apollo Client Pros:
Apollo Client offers several advantages for developers, including:
Built-in support for caching
Automatic loading and error states
A declarative approach to data fetching
The ability to extend the client for custom requirements
With Apollo Client, developers can manage both local and remote data using GraphQL. The built-in local state management eliminates the need for front-end centralized state management tools like Redux, saving time and reducing code.
Apollo Client also features a custom React hook called useQuery that includes built-in loading and error states, allowing developers to focus on writing queries to fetch the data they need, without having to write additional logic for loading and error states.
In addition, Apollo is extensible, so teams can build their own custom extensions on top of the Apollo Client if needed.
Apollo Client Cons:
While Apollo Client provides many benefits, it's not without its drawbacks. These include:
Performance issues if too many fields are requested at once, which may require rate-limiting mechanisms
GraphQL may be overkill for smaller servers and applications
The lack of HTTP caching can result in content being stored on the server rather than on the client
A steep learning curve for those familiar with traditional REST APIs
When deciding to use Apollo and GraphQL in a project, teams must carefully consider the differences between GraphQL and REST APIs, and the learning curve that may come with it. However, with time and familiarity, GraphQL can provide substantial benefits, especially for applications built on a microservices architecture or relying on mobile usage.
There is no one-size-fits-all tech stack for modern web and mobile applications. It's up to the development team to assess the needs of the project and choose the best technology fit. While popular technology choices are available, exploring modern alternatives can offer optimization, efficiency, and a better development experience.
If you're looking for a reliable and experienced team to help you implement your next software project, look no further than Perpetual. Our development team can help you build your application from start to finish. Contact us today and let's start building your next project together!