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.
Out of all of these, one has become the most popular — Reactjs. React was created in 2013 by a Facebook engineer. Since then, it has slowly picked up more users every year. One of the main reasons for its popularity is the ease of use. If you know basic vanilla javascript, HTML, and CSS, you won't have any problem with React.
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.
Client-Side Rendering
In CSR, the initial request loads the page, CSS, and javascript(no HTML). The initial page load is very slow but renders faster later. The Javascript then creates the HTML for users to view the page. This happens after the browser executes React. When you go to a different page, the javascript requests more information and creates new HTML. This HTML is injected into the same initial HTML file in the root div.
Pros of CSR
- Great for making Web applications. The learning curve at the start is great for new developers.
- After the initial load, page rendering is very fast.
- Great user experience.
- Great support from libraries. (NPM packages)
Cons of CSR
- Very slow initial load
- Bad SEO
Server-Side Rendering
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.
Pros of SSR
- Faster initial load
- Very good for static sites
- The initial page is faster. The user won't wonder if something has gone wrong.
Cons of SSR
- Many server requests. This also leads to more server costs.
- CSR has a slow first initial load, but subsequent ones are speedy. In SSR, the subsequent loads are the same. Because you have to make new calls for every page.
- Full page reloads
- Bad user experience in terms of interactions.
So What Should You Do?
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.
Next.js
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
Moving from React to Next.js
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,
Final Thoughts
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.