Practical Single Page Applications with Server Side Rendering using Next.js

https://github.com/mattruby/OSN-2019-NextJS

Why are we here?

SPA, SSR, Next.js...

Who cares?

I want a fast site

I want a discoverable site

(SEO)

I want a productive development experience

Multi vs Single Page Applications

Multi Page Application

/index.jsp

/product.jsp?id=1234

Multi Page Application

Full page reloads
Puts stress on the web server
Caching output HTML can be a challenge

Pros

Ease of development
Excellent discoverability (SEO)
Simple analytics
High speed page render

Cons

Single Page Application

/index.html

/product?id=1234

Single Page Application (SPA)

Discoverability (SEO) is generally poor
Initial resource load may be heavy
3rd party integrations
UX perception (is the page loading?)
Memory leaks can add up!

Pros

One initial load for most resources
Scalability
UX perception
Less bandwidth usage

Cons

Next.js Application (SPA + SSR)

SPA and SSR all rolled into one platform

React code is running on both server and client side

Next.js attempts to replicate the development experience of simple MPAs

Getting started

yarn add next react react-dom

{
  ...
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
  ...
}

yarn dev

Create your pages

/root
    /pages
        helloWorld.jsx
        (Put your "page" files here)

export default () => <h1>Hello Next.js</h1>;

helloWorld.jsx

Key points

Routing

Data loading

User experience

https://github.com/mattruby/OSN-2019-NextJS

Routing 101

<Link>

Demo Links

Loading Data 101

getInitialProps

Sample endpoint

http://localhost:5005/products


const Product = ({ product }) => l
  <div>
  	<h1>{product.name}</h1>
  </div>
):

export async function getServerSideProps(context) {
  const res = await fetch('http://localhost:5005/products/1') ;
  const product = await res.json();
  return { product };
}

export default Product;