Server Components

Server and Client Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering!

  • Available in Next.js 13
  • Native to React
  • Call data directly from the component
title
title

CSS Subgrid

Level 2 of the CSS Grid Layout specification includes a subgrid value for grid-template-columns and grid-template-rows.

  • Use a single grid component for all elements
  • Have child elements inherit the grid
title
title

@scope

Allows authors to scope style rules to a given scoping root, and style elements according to the proximity of that scoping root.

  • Use generic class names
  • Write styles in the component
  • No need for CSS Modules
  • Just use CSS
  • Planned for Chrome 118 (116 now)
title
title

CSS container queries

Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.

  • Use a single grid component for all elements
  • Have child elements inherit the grid
title
title

View Transitions API

The View Transition API makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+.

  • Transitions between views
  • Perfect for page transitions
  • Works well with SPA's
  • Cross Document demo'd here
  • Cross Document requires a meta tag
title
title