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

Demo

Resources

https://github.com/khriztianmoreno/podcast-nextjs

:)

Build a Server-rendered ReactJS Application with Next.js

By Khriztian Moreno

Made with Slides.com

Build a Server-rendered ReactJS Application with Next.js

In this talk we we’ll see just how quickly next.js makes the process of building server-rendered ReactJS applications. Along the way we’ll learn about many of the amazing features Next.js provides for us out of the box, such as route prefetching and code-splitting, thus allowing us to spend more time developing and virtually no time setting up our environment.

  • 1,244

More from Khriztian Moreno