An easy and simple routing system in Next.js tutorial for beginners. How to implement static and dynamic routing in Next.js applications.
Hello everyone! Around one month ago I wanted to start building SSR and SEO Friendly Websites using React and started looking for a nice tutorial for Next.js — One of the best available tools — of this purpose. But I couldn’t find one. So I decided to create one of my own, which turned into this article.
I don’t want to dive deep into the basic comparisons of SSR and CSR but in summary, we’re covering some different and concepts of SSR web applications.
SSR *— server-side rendering — and *CSR *— client-side rendering — are both types of rendering your pages for your clients and customers. In CSR, the server sends a *blank *HTML file to the client and the responsibility of filling it with JS files is on the client’s browser’s shoulders. When you create a React application with CRA, or your boilerplate and deploy it on the server, you create a CSR web application! So, if you open your page source in the browser, you find your div with root id *EMPTY!
Empty page source in CSR web applications
But in SSR web applications, you will render your HTML file on your server, then send it to the client browser. This approach has two benefits:
1. Faster page loading and better experience for clients (The horrible blank loading page!). It’s faster because your servers are a lot more powerful than most of your clients!
2. It’s SEO friendly and google crawlers have everything in Page Source.
You can read about CSR and SSR in the great article of Alex Grigoryan here in The Benefits of Server Side Rendering Over Client Side Rendering!
Honestly, you can create your SSR React Web Application without using any framework or tools. But it’s so hard and complex and you have to spend a lot of time to fix its bugs! There are some tools that can help you to overcome mentioned challenges like Razzle, After JS, Next JS, and Gatsby. But the most powerful and featured framework is Next.js!
Here are some of Next.js’s benefits:
1. Zero Config: Like CRA, you can use Next easily without diving into webpack and babel configurations.
2. Built-in CSS libraries: So you want to use CSS-in-JS or SCSS? Don’t worry! Next provides them for you.
3. Powerful in pre-rendering.
4. Easy and simple configuration
5. Hot reloading: Develop, save, and see your changes instantly!
So, why recreate the wheel? Let’s start using Next.js!
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
React JS Tutorial will provide you with a detailed and comprehensive knowledge about React. In this React JS Tutorial for Beginners you will learn React concepts from scratch and also how to create your first project in React.
Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...
In this article, you will learn what are hooks in React JS? and when to use react hooks? Also, we will see the react hooks example.