https://github.com/leerob/nextjs-metamorphosis
React Summit 2023
https://github.com/leerob/nextjs-metamorphosis
Last synced: 5 months ago
JSON representation
React Summit 2023
- Host: GitHub
- URL: https://github.com/leerob/nextjs-metamorphosis
- Owner: leerob
- Archived: true
- Created: 2023-06-04T09:39:34.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-31T03:02:02.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T01:58:29.139Z (8 months ago)
- Language: TypeScript
- Size: 33.2 KB
- Stars: 20
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js Metamorphosis (React Summit 2023)
[🎥 **Watch Talk**](https://www.youtube.com/watch?v=5HaX0Q_Do1I)
This was the source for my talk about React Summit 2023. In the talk, I show how to incrementally adopt to new App Router, and some of the benefits of using the new router versus the previous Pages Router approach.
This includes:
- Simplified data fetching
1. `getInitialProps` (Pages Router)
1. `getStaticProps` / `getServerSideProps` (Pages Router)
1. `async` / `await` (App Router)
- Colocating data fetching with components (React Server Components)
- Defining layouts through the file system (`layout.tsx`)
- Granular control over data freshness (`revalidate` for components)
- Out-of-order streaming of data (Suspense for SSR)
- Simplified form submissions (Server Actions)
## `NEXT_DATA` vs RSC Payload
The data fetching methods in the Pages Router, like `getServerSideProps`, forward `props` to the default exported React component. This `NEXT_DATA` payload also includes rendering instructions.
Inside the App Router, there is no longer `NEXT_DATA`. Instead, the React Server Components payload includes the already rendered result, meaning no additional rendering work needs to be done on the client. This also means that the rendering instructions remain on the server, and just need to be "slotted" into the right place.
You'll also notice that in the App Router, the baseline client-side JavaScript of Next.js + React is smaller than the Pages Router.