Server Side Rendering in React using Next.js

Server side rendering need lots of configuration to get up and running if you choose to use boilerplate which is filled with package that you may not need, well next.js is developed to solve this problem and it makes server-side rendering in React a breeze

What you will learn in this article

• Get up and running with Next.js
• Add Client-side transitions between routes
• How to do handle Ajax in Next.JS
• create reusable component for rendering Layouts

To get started with you need two things Nodejs and yarn installed

you can do that by typing npm install -g yarn

Get up and running with Next.js

Step #1
create an empty package.json file by typing

yarn init -y

and then installing three packages next, react, react-dom

yarn add next react react-dom

Step #2
Add scripts in package.json file

“scripts”:{
“dev”:”next”,
“start”: “next start”,
“build”: “next build”,
}

Step#3

we would need two folder pages and static

- Each file in pages folder represent two thing name of file act as route and file code represent React component code

• Static folder where we will keep static files like images etc

let start by creating first index route and component

1. create filename index.js in pages folder this file will act as a entry point for our project

and run script yarn run dev which starts up the server and you will see Hello World text on screen

and if you see page source you will see hello world div tag which proves that it is indeed server rendered

ok let do something a bit more interesting by creating Client-side routing

create one file in pages folder name about.js, we would need Link component for routing which we can import from “next/link”

we let do same with index component and add a link to About component

if you are seeing delay in transitioning between component you remove that delay by simple adding prefetch attribute to Link component like so

<Link prefetch href='/'><a>Home</a></Link>

Transition between routes

How to Fetch data in Next.JS

we would need an isomorphic-fetch package

yarn add isomorphic-fetch

we gonna fetch stars of a reactjs package and display it on screen Fetching of data in next.js is done in getInitialProps function

when ajax request is completed response is passed as props to a component like you can see above image

Output of Home Component Displaying Star of ReactJS Package

#4 — Create reusable component for rendering Layouts

I am creating components folder here we keep all reusable component and component that not specific to a particular route and keep in mind Ajax request in these component will not work

let create first Layout Reusable component it has two purpose one is to render component which is passed to Layout as children and rendering common content that shared among components like title and meta info

above image has two interesting snippet of code one import Head from “next/head” whatever code you put in HEAD component will get add in head tag but be careful HEAD is specific to that component it will different for different component that why we creating Layout reusable component so that we wont need to create head tag for every single component

let use Layout Component in About page and Index page

Click on Image to Zoom in Image

as you can see above image Home and Index component it is rendered by Layout component and title is passed as props and whatever element is there between Layout tag will get render as children

you can get the code for this article here and In Second part of these article we gonna learn about Dynamic Imports, custom webpack configuration, using css in next.js and many more cool stuff

If you enjoyed this article please click on like button