Build a Server-rendered ReactJS Application with Next.js

khriztianmoreno.com

@khriztianmoreno

Cristian Moreno

I'm a community leader and altruistic speaker.

FullStack Javascript Developer

khriztianmoreno.com

The
Story

?

Search Engine Optimization

All content is generated in JavaScript, so it's invisible to the search engines *

Performance

Download

skeleton HTML

Download

Javascript

Evaluate

Javascript

Fetch data

from API

User sees content

Can destroy the usability on the weaker clients (mobiles, tablets, etc.)

A lot of stuff to do before even showing the content:

Server
Side
Render

Download

FULL HTML

Download

Javascript

Evaluate

Javascript

Fetch data

from API ?

User sees content

Performance

• Render the HTML of a JavaScript app on the Server.
• Return the full HTML on a new page request.
• JavaScript loads and bootstraps the application (without destroying and rebuilding the initial HTML)

Advantages

• Important for initial page load performance
• Important for Search Engine Indexing and Optimization (SEO)
• Important for mobile users with low bandwidth

a minimalistic framework for universal server-rendered React applications

Setup

package.json

Our
First
Page

Styling

Components

Simple Fetching data

getInitialProps

receives a context object with the following properties:

• pathname - path section of URL
• query - query string section of URL parsed as an object
• asPath - the actual url path
• req - HTTP request object (server only)
• res - HTTP response object (server only)
• jsonPageRes - Fetch Response object (client only)
• err - Error object if any error is encountered during the rendering

getInitialProps

next/link

next/router

Create
Dynamic
Pages

/post?title=Hello%20Next.js

Clean URLs with Route Masking

Server Side Support for Clean URLs

package.json