Next.js Profile picture
Jul 20 6 tweets 2 min read
1/ Update on the new Next.js router, with support for nested layouts and React Server Components.

This is the biggest update to Next.js since it was released and incorporates many features from React 18.

We made a quick demo to show some of the features.
2/ This new router stands on the shoulders of React 18:

◆ Pages and Layouts are Server Components by default, sending less code to the client
◆ Interfaces are non-blocking and can be interrupted if higher priority work happens like transitions
3/ Layouts can be nested and shared across routes. On navigation, layouts do not re-render, meaning they preserve state and remain interactive.

This enables developers to more easily build complex application layouts and more ergonomically handle success/error/loading states.
4/ Optimistic loading states using server routing.

When loading UI is provided, navigation is instant and can be shown immediately while a request is made to the server. Otherwise, transitions will suspend with `startTransition`.

Pages remain interactive during transitions.
5/ On navigation, the “payload” for Server Components is stored in the client-side cache.

◆ Soft pushes don’t refetch from the server, making navigation instant
◆ Hard pushes invalidate the “slice” of data from the server, allowing you to get fresh data
6/ We're actively working on implementing the new router.

For more information, check out the original RFC.

nextjs.org/blog/layouts-r…

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Next.js

Next.js Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(