Intro to React
- ReactJS is usually used to create single-page applications (SPAs). A common feature of SPAs is that they load content dynamically without having to reload the page. This makes them fast and responsive. Another advantage of using ReactJS is that it can be used with other libraries or frameworks such as AngularJS to create even more powerful web applications.
Intro to NextJs
- Now let's take a look at NextJs. NextJs is an open-source framework based on ReactJS that allows you to create server-rendered or statically exported react apps easily. It was created by Zeit, who also created Now - a cloud platform for serverless deployments (more on that later).
- NextJS is a React framework that runs on Node. It includes all the necessary infrastructure to build server-side rendered apps with React. With NextJS, you can write both browser-based and server-based apps with the same codebase.
- NextJs includes features such as automatic code, splitting, server-side rendering (SSR), and pre-fetching by default. This results in a smaller bundle size and faster page load times, which are important for search engine optimization (SEO) and user experience. ReactJs is a library for building user interfaces and does not include these built-in features.
How ReactJs & NextJs are different from each other
- It’s possible to add SSR to a React app using third-party libraries such as react-router and Redux. However, this requires more configuration and can be tricky to set up. NextJs makes SSR easier right out of the box.
- Another difference is that NextJs pages are statically generated by default, meaning that the HTML is generated at build time instead of on each request like with traditional dynamic websites. This makes NextJs apps more scalable since they can be cached easily. It also means that pages load faster since there’s no need to make a roundtrip to the server on each request. Again, it’s possible to achieve this with React apps but it requires additional setup.
Pros & Cons of ReactJs
- There are some drawbacks to using React, however. One is that it can be difficult to integrate React with other technologies, such as web services or back-end databases. Another downside is that React's programming model is sometimes hard to understand, especially for beginners.
- If you're considering using React for your next project, weigh the pros and cons carefully to decide if it's the right fit for you.
Pros & Cons of NextJs
- Quicker development time
- Automatic code splitting
- Easy manifest updates
- Server side rendering
- Static site generation
- Simple deployment to any static web host
- Limited customization options
- Can be slower than ReactJs without proper optimization
- One of the biggest challenges with ReactJS is finding good documentation. The official documentation for ReactJS is often confusing and difficult to understand. This can make it hard to get started with ReactJS, and it can also make it difficult to troubleshoot problems that arise later on. There are some other great resources out there (such as react-doc), but they can be difficult to find if you don't know where to look.
- Props versus state - One challenge you may face when using ReactJs is deciding whether to use props or state. Both have their own benefits and drawbacks, so it can be tricky to decide which one to use in your project. For example, props are immutable ( meaning they cannot be changed), but state can be mutable ( meaning it can be changed). You'll need to weigh the pros and cons of each option carefully before making a decision.
- Routing - Another challenge with ReactJs is routing. While there are many options available for handling routing ( such as react-router ), choosing the right one can be difficult. There are also a lot of things to keep track of when setting up routing, such as dynamic routes and server-side rendering. This can make routing challenging, and it's one of the biggest differences between React and Next.
- React Router is a popular library for client-side routing in React applications. It lets you define dynamic routes and provides a number of features out of the box, such as server-side rendering and code splitting. While it's possible to use React Router with Next, it's not the recommended approach.
- Instead, the recommended way to do routing in a Next application is to use next/router. This is a small library that provides binding between Next and React Router. By using this library, you can take advantage of all the features that React Router offers, without having to set up anything yourself.
- The biggest challenge with using either framework is keeping track of all the moving parts. Both frameworks have a lot of concepts that can be difficult to keep straight, especially when you're just getting started. In addition, there are many different libraries and tools available for each framework, which can make things even more confusing.
- If you're just starting out with React or Next, my best advice would be to pick one framework and stick with it until you're comfortable with all the concepts. Once you've mastered one framework, then you can start exploring the other. Trying to learn both React and Next at the same time will only confusing and you'll be less productive overall.
My reasons for wanting to leave React behind are:
- React's "magic" API can be confusing at times, making debugging more difficult than it needs to be. For example, why does React think a component should re-render when its props or state haven't changed? Why does it even have a shouldComponentUpdate() method if React ignores it half the time? There are ways around these problems (e.g. using immutable data structures), but they add unnecessary complexity to an otherwise simple project.
- Speaking of complexity, React Router v4 introduced a new API that is significantly more complex than previous versions. It's so complex that there are still few good tutorials on how to use it effectively (most people just use react-router@3). Complexity like this makes me less productive as a developer