So, if you think about it, Next.js is kinda like ordering at Starbucks. Think of the web client as a thirsty customer who walks into a Starbucks, and the barista as the server. Now, this barista already has a certain idea about what the customer may want ahead of time, after all, people generally want coffee and other caffeinated drinks when they walk into a coffee shop.
The customer may choose the pre-made double shot expresso in a can, which is an easy sale as all the barista has to do is grab it from the fridge, ring up the sale, and wish the customer a happy day. In this instance, the client has requested Static Site Generation (SSG) from the server, which is by far the fastest choice. The server has to perform little to no processing to complete the request, as it’s only returning pre-built content.
But then what happens when the customer wants a triple shot coconut milk iced coffee with an extra 3 pumps of caramel sauce, double whipped cream, and chocolate drizzle on top – AND 3 kinds of nuts and sprinkles? Well, the barista has to roll up their sleeves and get to work son, so they can bring this crazy concoction to life. This is the exact same thing when the client requests that a page is custom built at time of request, as pre-built just won’t do. The server has a job ahead of it, with Server-Side Rendering (SSR) having to sift through the static content, fetch the data required, and then expend processing resources before shooting it over to the client-side for display.
There’s a third scenario, and one we don’t really recommend you do next time you go order your morning coffee. The customer wants to Irish up their coffee a little, and orders a tall black to go – sneaking in a cheeky nip of whiskey from their hip flask on the way out. Both the barista and the customer do a little of the work to get the end result, the same way as sometimes there will be a process known as Client-Side Rendering (CSR) performed on the client side itself independent of the server. Though there are unique instances where CSR can be an advantage, generally both SSG and SSR are much faster and more efficient in the same way that it’s perfectly acceptable to have an Irish coffee during the holiday season, but indulging everyday makes you look like a bit of an alcoholic. Remember – drink responsibly.
What Is It:
Where React renders all content in the client-side browser, Next.js adds in flexibility by enabling applications to render on the server using its resources. This process works around some of the common issues associated with React rendering on the client side which we’ll explore a little later on in this video.
What It’s Used For:
Remember the Starbucks analogy?
The way Next.js handles SSG pages is still reactive, even if the content is statically generated. The client-side application has full interactivity with the content despite it effectively being a copy and paste job. Cast your mind back to that can of double shot expresso.
Where pages depend on specific input data and pre-built just won’t do, Next.js has the capacity to generate all page combinations for all the given inputs and variables through SSR. Again, this is like that monstrous custom iced coffee order.
The page content may need to be constantly updated if it has time sensitive features like real time stock pricing and charts, or something simpler like a chat bar, the CSR is the way to go – just so long as the majority of the page isn’t being rendered on the client-side. Next.js takes care of everything whether it be server or client based. It’s the nuance of difference between dosing your coffees with whiskey during Christmas, and having a problem.
Automatic Static Optimization:
Next.js has a feature called automatic static optimization, which is a flowery way of saying the framework allows for hybridized pages that may statically load sections from the server, have others that are rendered server side, and yet others that are rendered client side – smart selection based on content.
It may sound rudimentary, but the ability Next.js has to adjust the size of websites and apps to the size of the screen of the device is something fundamental that drastically improves the end user experience and cannot be understated.
Because some websites are statically generated by Next.js, there is no real connection to the dependencies and user data stored on the server so any sensitive information remains secure and protected.
Faster Dev Cycle:
Model View Presenter (MVP) can be created at break neck speeds in Next.js thanks to a host of premade components that allow you to not only build quickly, but also get feedback on the product so that the review process is nice and fast – not wasting any more time or money than it should.
Next.js based sites and apps are able to be accessed on any device – Windows, MacOS, Android, iOS, Linux, take your pick.
Short Loading Times:
The performance Next.js brings to apps via SSG is lightning fast as they’re copied over, but also when the pages themselves are rendered server side.
Next.js is a framework that is gaining popularity, and being open source, the number of contributors is growing as well. There’s plenty of articles, literature and support available so no matter the issue, there’s likely someone who has thought of a solution.
The application logic of Next.js based pages and applications is automatically compiled and bundled, a bias towards fast production to free up resources for other avenues.
Downside Of Flexibility:
So, while all this Next.js flexibility sounds awesome from the perspective of the onlooker, the downside is that there isn’t much in the way of built-in front pages – meaning the front-end layer has to be created from scratch and from the ground up.
It Does What It Does:
Unfortunately, you can’t modify how Next.js routes through nodes as it’s limited by a file-based router, so if dynamic routes are something your project needs, you’ll need to use Node.js server.
Lacks A Manager:
Next.js has no state manager, so if you need a way to access and modify the application state then you’ll need a plug-in like Redux or Mobx to handle that side of things.
Which Companies Are Using It?
As it turns out there are a heap of websites that use Next.js like media rating site imdb, design site GoDaddy, and bizarrely a whole host of cryptocurrency sites like Binance, LebonCoin and CoinMarketCap that require a unique blend of SSG for the base site, SSR for user info and wallets, and CSG for constantly updating the asset pricing.
Where To Learn Next.js
Seeing how Next.js is gaining in popularity, and being touted as the next big thing in web development, 2021 is looking like a pretty good year to upskill – so here are our top picks for courses to help you get started.
This is a course heavy in server-side rendering, complete with exercises to make Next.js projects from scratch.
Udemy has a great course that really focuses on building from scratch, and has the advantage of being presented by Brad Traversy – considered one of the best instructors in web development.
Even though this is a React resource, there is a very detailed module dedicated solely to work in Next.js – it’s like killing two birds with one stone.
This is a very hands-on, project-based course that really dials in to how Next.js works within React, but also how Node.js plays a role in determining the state of an application.
Are you a total novice? Why not take the intensity down a peg and learn how to use React to solve the first page download issue associated with single page apps by using Next.js to perform rendering on the server side?
We hope this article helped you learn more about NEXT.js! If you enjoyed this article you may also enjoy P5js and 5 Things You Need to Know About It or 5 Reasons Why D3js is the Best Framework for Data Visualization.