Next - React with SSR (Server-side rendering)

[mostakimvip06]

Pages and routing
When we wrote SPA (single page application) applications in pure React , we needed an external library to change the view. One of the most popular is react-router , which provides us with its API in the form of components such as BrowserRouter , Routes , Route or Link - using them we can build our routing. Below is an example:

React router
Building routing based on React router.

In next.js there is no need to use external packages - because it has a built-in routing system, which is created based on the file system, more precisely the structure inside the /pages folder. Below is an example structure:

Next - routing structure
Building routing based on Next.

Now all we need to do is go to the path /file_name e.g. /about to display the page. That's it, we don't need to use ten other components to make the view change fully work.

In the picture above you can see two unclear things. The first one is a file called [slug].js . It is a page with a dynamic path that must be generated correctly, but more on that later in the post. The second one is the api folder , where we define routes to which we can make http requests.

Pre render
Next.js has two built-in forms of page prerendering. The first is static generation and the second is server-side rendering . Each of these forms has its own functions for retrieving data, these are: getStaticProps , getStaticPaths and getServerSideProps . The first two are executed when building the application (static generation), and the last one is executed on each request, i.e. each time we enter a page of our application (server-side rendering -> ssr).

GetStaticProps
It allows us to perform various actions during the build, e.g. an http query, and then return the retrieved data in a props object , which will be passed to the page . Another useful thing that can be returned is revalidate, this allows us to update slovenia telemarketing data the generated page without having to rebuild the application . Revalidate takes the number of seconds in which the page should be rebuilt, in addition to what each query will cause the rebuild. GetStaticProps can also return: a notFound object and a redirect .

GetStaticPaths
When a page uses dynamic routing getStaticPaths, it allows to generate specific paths during build. For example, let's take a case where we have some headless cms with our blog posts and we want to generate paths for them, under which specific posts will be available. In getStaticPaths we should get them and map them below is an example implementation:

Next - GetStaticPaths

We can combine this with getStaticProps to retrieve a given entry:

Next - GetStaticProps

Thanks to the implementation of both functions, we have correctly generated paths and for each, in this case, entry, data downloaded from the CMS, which we can display in the way we need.

GetServerSideProps
It works very similarly to getStaticProps - except that it is executed every time we enter the page.

API
In the pages/api folder we define routes to which we can perform http queries. They work practically the same as those we know from node.js. Let's create a file in the api/ folder :

Next - API

Now, when we execute a GET query to the /api/posts path , the code from the if block on line 4 will be executed, we can query the database for all posts or static data there.

Other
Photos
We have an Image component available that optimizes image loading for us. What's behind it?

loading photos only when they are within the viewport,
loading correct photo sizes depending on the device,
setting the priority of loaded photos,
optional blur when photo has not yet loaded.
Webpack
If we want to overwrite, modify or do anything else with the webpack configuration, we just overwrite it in the next.config file . That's it, we don't have to eject the project like we did in pure React.

AMP
We can easily create an AMP version of the page. Just add:

Next - AMP

Amp: true means that the page will only have an AMP version, and hybrid means that it will also have a regular version.

Summary
Next.js is a framework that greatly simplifies the creation of web portals and professional online stores Wrocław thanks to the built-in SSR. It also gives the ability to create AMP versions, which is important for e-commerce agencies Wrocław that want to provide the best possible experience to mobile users.