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-namecd smashing-masterclass && npm i && npm run dev@AtilaFassina
Setup
mkdir new-directorynpx degit atilafassina/smashing-nextgit 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
