Frontend development has become very easy over the years. We have so many tools and frameworks that make coding simple and organized. We have Vuejs, Angular, jquery, React, etc. So many choices exist that are different in their approach.
You can break down every application into different components. Every component has its own logic and CSS. For example, you might have a Navbar. You can create one component and use it through your application. Breaking down everything into smaller pieces is excellent when making rich UI web apps.
That's not all! You also get a virtual DOM for fast rendering, easy testing capabilities with Jest, and easy scaling capabilities. You can also use React native to make Android and IOS apps easily.
There is also great community support, and countless companies use it in their tech stack.
All this sounds so great, doesn't it? I would say almost everything is perfect. React uses something called Client-Side Rendering(CSR). Let's look at more of this in detail in the next section.
As the name suggests, the server renders the HTML and serves it to the browser. You don't have to wait for so long on the initial load. Every page is a separate call to the server.
Since the whole page comes from the server, search engine crawlers can crawl everything. Every page can have separate meta tags and keywords related to it.
Both approaches have their pros and cons, as we saw above. If you use CSR, you won't be able to do SEO. When you share your content, you'll get the same meta tags as your main page. It'll be almost impossible to rank your pages on google even with the help of a sitemap.
If you use SSR, you'll probably waste a lot of money on server costs, and your user will have a bad experience.
SEO and good UX are a must in this day and age. SEO gets users to your website. A good UX will keep users coming back to your website. You shouldn't have to sacrifice one for the other. Luckily, there is one savior out there.
If you know, React, you kind of know NextJS. This is because Next is a React framework.
You have components just like in React. CSS has a different naming convention, but that's the biggest change. The reason Next is so good is that it gives you options. If you want a page to have good SEO, you can use ServerSideProps. If you want to use CSR, you can use UseEffect to call your APIs, like React.
Adding typescript to your Next project also is very simple. You even have a built-in router and don't have to use React router. The option to choose between CSR, SSR, and SSG is what makes Next the best. You even get a free trial on
Now that you're convinced that you should Next.js, you might wonder how to change your existing website to Next. Next.js is designed for gradual adoption. Migrating from React to Next is pretty straightforward and can be done slowly by gradually adding more pages.
You can configure your server so that everything under a specific subpath points to the Next.js app. If your site is abc.com, you can configure abc.com/about to serve a Next.js app. This has been explained really well in the
You might want to migrate from Gatsby for the benefits mentioned above, such as different data fetching strategies for different pages. You can use this
While you're migrating, things will probably go wrong. CSS might get messed up on mobile devices. Some routes might not work. You might get 404 errors on essential pages. This is why you should take constant feedback from your users while you are migrating. You can do this with Discord,
If you want to get more users to your website organically, you cannot use React alone. SSR approaches sacrifice the users' experience. Instead, you must use Next.js to get the benefits of React with options for SSR, SSG, and CSR. Moving to Next.js is simple and can be done incrementally.