2022

@AtilaFassina

@AtilaFassina

INTRO

ROUND

@AtilaFassina

2022 - Speaker

Optimistic UX

atila.io/smashingmag

Expert Panelist

Reviewer

Author

Smashing

DX Engineer

atila.io

@AtilaFassina

SERVER

LESS

@AtilaFassina

SERVER

πŸ‡©πŸ‡ͺΒ  Server

πŸ”—Β  Edge

...

πŸ‡©πŸ‡ͺ

πŸ‡ΊπŸ‡Έ

πŸ‡―πŸ‡΅

How to:

β†ͺAvoid downtime?

β†ͺ Distribute cache?

β†ͺ Update cache?

β†ͺ Cut costs... ? 😬

πŸ”—

πŸ”—

πŸ”—

@AtilaFassina

LESS

πŸ‡©πŸ‡ͺ

πŸ‡ΊπŸ‡Έ

πŸ‡―πŸ‡΅

How to:

β†ͺ no downtime.

β†ͺ cache distribution.

β†ͺ instant propagation.

β†ͺ predictable costs.

@AtilaFassina

LESS

πŸ‡©πŸ‡ͺ

πŸ‡ΊπŸ‡Έ

πŸ‡―πŸ‡΅

Server Location ❔

How to:

β†ͺ Persist more.

β†ͺ Minimize rountrips.

@AtilaFassina

DEVELOPER

EXPERIENCE

@AtilaFassina

β†ͺ Continuous Integration

β†ͺ Continuous Deploy

β†ͺ Preview Environments

β†ͺ Integrated on GitHub

@AtilaFassina

β†ͺ Vercel

β†ͺ Netlify

β†ͺ AWS Amplify

β†ͺ Railway

β†ͺ Fly.io

PLATFORMS

β†ͺ

@AtilaFassina

PROJECT

SETUP

@AtilaFassina

β†ͺ Volta.sh

β†ͺ VS Code

β†ͺ xataio/cli (optional).

System Recommendations

β†ͺ Xata VS Code Extension

β†ͺ Tailwind VS Code Extension

: manages Node.js versions and toolchain.

@AtilaFassina

Setup

git clone \
  git@github.com:atilafassina/smashing-next.git \
  directory-name
cd smashing-masterclass && npm i && npm run dev

@AtilaFassina

Setup

mkdir new-directory
npx degit atilafassina/smashing-next
git init && npm i

@AtilaFassina

RENDERING

STRATEGIES

@AtilaFassina

/pages

Server-Side Pre-Rendering

export const getStaticProps = async () => {
  // fetch data
  
  return {
    props: {
      // view props
    }
  }
}

β†ͺ Data is added to client-side bundle.

@AtilaFassina

/pages

Incremental Static Regeneration

export const getStaticProps = async () => {
  // fetch data
  
  return {
    props: {
      // view props
    },
    revalidate: 60
  }
}

β†ͺ Data is added to client-side bundle.

β†ͺ Server re-renders page every 60 seconds.

@AtilaFassina

/pages

Server-Side Rendering

export const getServerSideProps = async () => {
  // fetch data
  
  return {
    props: {
      // view props
    }
  }
}

β†ͺ API Route provided for client-side navigation.

β†ͺ Re-renders on every hard-navigation request.

@AtilaFassina

/pages

Server-Side Rendering

export const getServerSideProps = async () => {
  
  return {
    redirect: {
      destination: '/',
      permanent: false,
    }
  }
}

β†ͺ Can also return redirects.

β†ͺ `permanent: true` is 301 redirect

@AtilaFassina

/pages

Server-Side Rendering

export const getServerSideProps = async () => {
  
  return {
    notFound: true
  }
}

β†ͺ Or not found.

@AtilaFassina

/pages

Static Site Generation

export const getStaticPaths = async () => {
  // fetch data
  
  return {
    paths: ['slug1', 'slug2'],
    fallback: false
  }
}

β†ͺ Combined with getStaticProps.

β†ͺ fallback: false, true, or β€œblocking”.

@AtilaFassina

/pages

SSG: Fallback Strategies

πŸ‘ true: has 3 different behaviours.

πŸ‘Ž false: any paths not returned will go to the 404 page.

πŸ›‘ β€œblocking”: render pages not in returned paths via SSR.

1. Serves a loading state while renders page.

2. Serves from cache pages already rendered.

3. Serves bots and crawlers on-demand (SSR).

@AtilaFassina

/pages

Priority Rendering

export const getStaticPaths = async () => {
  // fetch data
  
  return {
    paths: ['/pricing', '/feature-page'],
    fallback: true // or 'blocking'
  }
}

β†ͺ Pre-Render most important on build time.

β†ͺ Rest is rendered and cached on-demand.

@AtilaFassina

STYLING

OPTIONS

@AtilaFassina

β†ͺ Styled JSX

β†ͺ CSS Modules

β†ͺ SASS (.scss)

β†ͺ Tailwind CSS

Supported Strategies

β†ͺ

β†ͺ

@AtilaFassina

β†ͺ Consistency.

β†ͺ Utility-First Perfomance.

β†ͺ Easy to Copy.

Why Tailwind?

@AtilaFassina

How Tailwind?

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

postcss.config.js

@AtilaFassina

How Tailwind?

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './layouts/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {},
  plugins: [],
}

tailwind.config.js

@AtilaFassina

PROJECT

OVERVIEW

@AtilaFassina

REACT

QUERY

@AtilaFassina

⏰ 10 minutes

Day 1

By Atila

Day 1

  • 364