- Server-Side Rendering Server-Side Rendering
- Static Generation Static Generation
- Client-Side Rendering Client-Side Rendering
- SWR: React Hooks for Remote Data Fetching SWR: React Hooks for Remote Data Fetching
- Incorporate Variety of libraries Incorporate Variety of libraries
- Vercel Hosting Vercel Hosting
Next.js is a framework that helps you React apps easily with SSR and static generation, etc. It also supports a lot of other techniques for developing a frontend website. It provides a structure for how you build your app based on best practice. The concept is simple, easy to implement.
Server-Side Rendering
Next.js provide a lot of options to build our website. By default, pages are build with server-side rendering, using method Pre-render: Next.js generates HTML for each page in advance, instead of having it all done by client-side JS. Pre-rendering can result in better performance and SEO.
Static Generation
Next.js also provides support for creating a static web page with static generation: the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
It works well with some types of pages: Marketing pages, Blog posts, E-commerce product listings, Help, and documentation ... these page doesn't change very frequently so its help a lot for SEO, and boots app performance.
Client-Side Rendering
Next.js also support Client-Side Rendering, for pages that SEO doesn't really matter like Dashboard, Admin Pages... etc. And Next.js lets us decide what method to use for rendering which is very flexible.
SWR: React Hooks for Remote Data Fetching
SWR is a React Hooks library for remote data fetching. The name “SWR” is derived from stale-while-revalidate, an HTTP cache invalidation strategy. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

SWR comes with a lot of beneficial features to help Next App fetching data from the server. It’s very lightweight, and easy to implement in development. It has smart revalidate method on focus page... also support the loading data with chunks ...etc.
Incorporate Variety of libraries
An example of combining Next.js and Redux is officially provided. By taking advantage of this example, you can incorporate a variety of libraries into your code.
It's available at https://github.com/vercel/next.js/tree/ canary/examples .
In the Node.js ecosystem, the Node.js ecosystem allows you to combine many small libraries into a large one. They prefer to build a mechanism. An engineer himself is responsible for choosing the right library, but if necessary, we believe that we can introduce better libraries.
Vercel Hosting
Also, one of the biggest features of Next.js is that Vercel is able to provide cloud hosting, CDN, DNS, etc. This is the point at which we provide infrastructure other than a data store. Next.js is designed to take full advantage of this infrastructure.
We believe the ability to build microservices that scale without Kubernetes (k8s) is an ecosystem that gives app engineers a huge boost.