What's NextJS?
NextJS is as in their own words,
a react framework built for production. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
- Disclaimer: I don't discuss how to implement the features in NextJS here but rather how they work so you get a basic understanding of them.
Is it not just react and is it useful in any case?
NextJS is of course a framework built on top of react but with react applications such as create react applications, the javascript code normally would block the rendering of pages until javascript is enabled (in the case where it's disabled, it can be a bad reference). NextJS on the other hand offers neat features on top of react one of which is a neat trick that allows you to first return the html for the page that the user is looking for before the page is hydrated with the javascript content, making it very useful to at least display the bare minimum text to the user even with javascript disabled.
What's Client Side Routing and Rendering?
Client side routing and rendering is used mostly with most Single Page Applications(SPA) to render the different pages or routes of a web application without necessarily refreshing the browser url or the webpage. React applications do this by neatly pushing the new page or content being visited by the user to the browser history and responding to this change by displaying new or different content. React will typically be rendered on the client when using client side rendering, meaning all the javascript that is resulting from your react components in your SPA will be downloaded to the user's device and then run on the browser to generate the corresponding html representation of your page.
How does NextJS work with Client Side Rendering and Routing?
In NextJS, there is a neat feature that would basically allow you to export all static pages (pages that don't fetch data from the server on initial request but from the client side or browser after page has loaded) to html. These pages can then be easily rendered when the user visits their route or navigates to their url without refreshing the whole webpage. So in simple terms, in normal create react applications, you will probably be rendering different components based on the route visited whereas in NextJS, you will mostly be rendering pages based on the route visited (the pages can also contain components and any other thing a typical react component can do). So when the user visits your static pages, they will get a faster response back with the pre-generated html from the time you built the application (by running next build) for hosting and then the page will be hydrated with the reactive parts.
What's Server side rendering then?
In PHP applications for instance, pages are normally requested from the server on each request and the generated html response is returned to the user. Well that's somewhat a similar concept that NextJS uses in server side rendering. However, since NextJS is a react framework, it handles this quite differently than a normal PHP application would. It allows you to build pages on the server during request time, write your logic on the server side and then return a response to the user with the html all without refreshing the page. In essence, it's like rendering your normal react component or NextJS pages but with the extra benefit of running code on the server at request time instead of on the client or browser, so on the server, you can access core node features and modules to run some logic server side.
What's Incremental Static Generation then?
For each page (or react component), when using static site generation (with client side rendering), NextJS gives us a neat feature or exposes a function getStaticProps that allows you to return props for your page. This props can then be used to display dynamic content to the user. The concept of Incremental static site generation allows you to use static site generation whilst refreshing your page after certain intervals. Static site generation in NextJS is good and all but can be quite frustrating as each time you make changes to your code or pages, you will have to rebuild the static pages and repopulate your hosted site with them. With incremental static site generation, you can still generate static pages at build time but then add a revalidate property to the return statement of your getStaticProps function that will basically regenerate your page after a said number of seconds. So you can enjoy the benefit of fast static pages whilst also avoiding the frustration of generating new builds by telling your next app to rebuild the page after a certain number of seconds. In a working scenario, say you set the timer to 10 seconds. If a user visits your page now and is shown the initial static html, the next time they visit the same page, the site would check if it's been 10 seconds already and if yes, it would rebuild the static page on the server and render the newly built code, cache it and return it to the user or any other person requesting that same resource within the next 10 seconds interval.
Extra Benefit of NextJS (SEO)
With Next.JS rendering in general, whether incremental generation, server side or client side rendering, SEO becomes much easier for search engines as html is returned for each page unlike normal react applications which returns javascript. Even though Search engines are trying to do a better job at crawling Javascript based applications, NextJS makes this all the more easier by just returning your SEO in the initial request html.
I recommend checking out or purchasing the Next.JS and React complete guide by Maximillian Schwarzmüller if you want a deep dive into Next.JS and his React complete guide if you want a deep dive into react and or redux. They are quite incredible courses. PS: I don't work for him but I just appreciate his incredible courses. You can also check out his online school Academind,where you can purchase a course or become a pro member for very incredible couple of courses including the Understanding of typescript😋 and React Native course. I am looking forward to becoming a Pro member soon to get the unlimited access to his courses offered there.
🤩 Our Amazing Sponsors 👇DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.View Website
Comments (0)