Next.js

Updated 3 weeks ago

Introduction

Data fetching

Hybrid CSR, SSR, SSG and ISG

  • 📺 CSR, SSR, and SSG on NextJS • 25 minute video by Blue Collar Coder showing how to build an example Pokemon directory with each approach.
  • 📺 Cache for Commerce Performance and Optimization for High Volume Sales • 24 minute video by Lauro Arujo explaining how to use the stale-while-revalidate caching pattern and customize the CDN and data fetching caching rukes for each page type based on how often its content is likely to change.
  • 📺 Responsive Rendering with Next.js • 7 minute video by Armando Gonzalez demonstrating how to swap between the mobile, desktop and SEO-only version of a component by combining SSG, SSR, useragent detection and dynamic imports.

Image optimization

  • 📺 Getting Lean with the Next.js Image Component • 8 minute video by Sam Selikoff showing the dramatic reduction in image file size achieved simply by rendering his site's unoptimized images with next/image instead of a vanilla <img>.
  • 📺 Next.js 10's New Image Component • 15 minute video by Leigh Halliday showing how to automatically optimize a website's images using next/image and how it compares to other cloud-based solutions.

Search Engine Optimization