Tweet
Tweet

Slide 1

Slide 1 text

HI, I'M KNUT (AKA DATAKNUT) React Meetup, Oslo, 26.02.2018

Slide 2

Slide 2 text

const me = { name: "Knut", nickname: "dataknut", twitter: "@kmelve", email: "[email protected]" } React Meetup, Oslo, 26.02.2018

Slide 3

Slide 3 text

ADVENTURES IN HEADLESS WITH NEXT.JS AND SANITY React Meetup, Oslo, 26.02.2018

Slide 4

Slide 4 text

WHAT IS NEXT.JS? React Meetup, Oslo, 26.02.2018

Slide 5

Slide 5 text

WHAT IS NEXT.JS? > Next.js is “a minimalistic framework for server- rendered React applications” > It takes away (most of) the pain with server rendering and routing for websites built in React github.com/zeit/next.js/ React Meetup, Oslo, 26.02.2018

Slide 6

Slide 6 text

WHAT IS SANITY? React Meetup, Oslo, 26.02.2018

Slide 7

Slide 7 text

WHAT IS SANITY? Sanity pretends to be a Headless Content Management System, but it's really a Data Management System on crack cocain (i.e. you have to try it to understand its appeal). sanity.io / docs.sanity.io React Meetup, Oslo, 26.02.2018

Slide 8

Slide 8 text

SOME LESSONS React Meetup, Oslo, 26.02.2018

Slide 9

Slide 9 text

LESSION 1 NEXT.JS RENDERS THE FIRST REQUEST ON THE SERVER, AND THEN JUMPS INTO SPA MODE React Meetup, Oslo, 26.02.2018

Slide 10

Slide 10 text

NEXT.JS RENDERS THE FIRST REQUEST ON THE SERVER, AND THEN JUMPS INTO SPA MODE > Check your API’s CORS-settings! > You probably need to remember to restart your server when your doing changes to the routing > You need to keep an eye on prefetching in order to prevent the site for pulling too much data React Meetup, Oslo, 26.02.2018

Slide 11

Slide 11 text

LESSION 2 YOU CAN HAVE HIEARCHY EVEN THOUGH SANITY IS PRETTY “FLAT” React Meetup, Oslo, 26.02.2018

Slide 12

Slide 12 text

YOU CAN HAZ HIEARCHY! > If it makes sense, you can use the _type as a top-level slug. const url = `/${_type}/${slug.current}` It's pretty clever. React Meetup, Oslo, 26.02.2018

Slide 13

Slide 13 text

LESSION 3 BEWARE OF PREFETCHING! ! React Meetup, Oslo, 26.02.2018

Slide 14

Slide 14 text

LESSION 4 GET ONLY WHAT YOU NEED ! React Meetup, Oslo, 26.02.2018

Slide 15

Slide 15 text

LESSION 5 WORK CLOSELY WITH WEB EDITORS React Meetup, Oslo, 26.02.2018

Slide 16

Slide 16 text

LESSION 6 YEAH SURE, IT'S HEADLESS AND “INTERFACE AGNOSTIC” :party_parrot: …but you probably want to tie some of the types to it's view context React Meetup, Oslo, 26.02.2018