Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Next.js preserves client state on the page during navigation when cacheComponents is enabled

asidorenko_'s profile picture

Alex Sidorenko

35,234 subscribers

160,637 görüntüleme • 7 ay önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

"Navigation feels slow in Next.js" Try cacheComponents 👇
0:25

"Navigation feels slow in Next.js" Try cacheComponents 👇

Alex Sidorenko

269,520 görüntüleme • 7 ay önce

cacheComponents in Next.js (canary)
0:42

cacheComponents in Next.js (canary)

Alex Sidorenko

38,423 görüntüleme • 8 ay önce

How to use Next.js metadata if the page is a client component
0:33

How to use Next.js metadata if the page is a client component

Alex Sidorenko

91,579 görüntüleme • 1 yıl önce

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.
1:25

Next.js 15: <Form> • Prefetching • Client-side navigation • Progressive enhancement It is useful for forms that navigate to a new page, such as a search form that leads to a results page.

Delba

67,908 görüntüleme • 1 yıl önce

"ai doesn't know Next 16 and cacheComponents" Try Next.js mcp
0:41

"ai doesn't know Next 16 and cacheComponents" Try Next.js mcp

Alex Sidorenko

54,638 görüntüleme • 7 ay önce

In Next.js (with cacheComponents), awaiting runtime data (like "params") defines the static/dynamic boundary of your page Move awaits closer to where they're needed
0:22

In Next.js (with cacheComponents), awaiting runtime data (like "params") defines the static/dynamic boundary of your page Move awaits closer to where they're needed

Alex Sidorenko

20,778 görüntüleme • 6 ay önce

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.
0:38

A navigation to a dynamic server-rendered page is blocked until the server responds. In Next.js, the first step to improving the experience is to add a `loading.js` file. This unblocks navigation and gives the user feedback while the content streams in.

Delba

50,434 görüntüleme • 1 yıl önce

When to use Server vs Client components in Next.js 13
0:50

When to use Server vs Client components in Next.js 13

Alex Sidorenko

148,146 görüntüleme • 2 yıl önce

"Can I protect pages in Next.js by checking the session in the layout.tsx?" Layouts don't re-render during navigation. Add a check to page.tsx
0:29

"Can I protect pages in Next.js by checking the session in the layout.tsx?" Layouts don't re-render during navigation. Add a check to page.tsx

Alex Sidorenko

55,826 görüntüleme • 10 ay önce

Let's build an email client with Next.js and Postgres ✉️ ✅ Navigate between routes in a column layout while maintaining scroll position (layouts support) ✅ Submit forms without JavaScript enabled (progressive enhancement) ✅ Navigate between routes extremely fast (prefetching and caching) ✅ Retain your UI position on reload (URL state)
12:21

Let's build an email client with Next.js and Postgres ✉️ ✅ Navigate between routes in a column layout while maintaining scroll position (layouts support) ✅ Submit forms without JavaScript enabled (progressive enhancement) ✅ Navigate between routes extremely fast (prefetching and caching) ✅ Retain your UI position on reload (URL state)

Lee Robinson

197,036 görüntüleme • 2 yıl önce

On iOS 26 Beta 5, the navigation bar on Apple Music only expands when scrolled to the very top or the very end of the home page.
0:32

On iOS 26 Beta 5, the navigation bar on Apple Music only expands when scrolled to the very top or the very end of the home page.

Alvin

35,208 görüntüleme • 10 ay önce

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!
0:40

This is a fully dynamic, server-rendered Next.js app router + headless Shopify storefront. Zero client / CDN page caches, fully personalized, feels as though it was local-first. Try it for yourself!

Guillermo Rauch

66,013 görüntüleme • 1 yıl önce

Streaming data from server to client with "use" in Next.js
0:53

Streaming data from server to client with "use" in Next.js

Alex Sidorenko

36,533 görüntüleme • 1 yıl önce

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database. • Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database. • Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state. • State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results. • Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar. • Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change. • State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel. • Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages. This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset. Demo → Code →
0:22

How should you search, filter, and paginate data with Next.js? This demo has 50,000 books in a Postgres database. • Page Load: When the page loads, we see the React Suspense fallback. This loading skeleton is displayed until the first page of books is retrieved from the database. • Searching: The search input has a 200ms debounce. After 200ms of inactivity, the form submits, updating the URL state with `?q={search}`. The Server Component reads `searchParams` and queries the database. On form submission, a React transition starts, allowing us to read the pending status with `useFormStatus` to display an inline loading state. • State Preservation: Navigating to an individual book page retains the search input state. Reloading the page or sharing the link preserves the search results. • Client-side Filtering: Filtering authors in the left sidebar is done client-side. Authors are fetched by a Server Component and passed as props to the sidebar. Changing the input value updates React state and re-renders the sidebar. • Optimistic Updates: The sidebar’s selected authors are optimistically updated with `useOptimistic`. Checkbox selections update instantly without waiting for the URL to change. • State Preservation: Navigating to an individual book page retains the sidebar filter input and selected author state across navigations, giving it an app-like feel. • Pagination: Navigating between pages updates the URL state, triggering the Server Component to query the database for the specific page of books. We also fetch the total book count to show the total number of pages. This demo isn't perfect yet (still working on it) but it's been a fun playground for some of these patterns. You can imagine a similar experience for thousands of movies, cars, products, or any other very large dataset. Demo → Code →

Lee Robinson

236,573 görüntüleme • 1 yıl önce

enter/exit page animations in Next.js
0:29

enter/exit page animations in Next.js

Alex Sidorenko

61,100 görüntüleme • 1 yıl önce

Wanna see something wild? This is a search-as-you-type that uses navigate() on every keypress. Keeps all important state in the URL. Page reload and browser navigation always works. thanks to TanStack Router 🤘
0:41

Wanna see something wild? This is a search-as-you-type that uses navigate() on every keypress. Keeps all important state in the URL. Page reload and browser navigation always works. thanks to TanStack Router 🤘

Swizec Teller

102,498 görüntüleme • 2 yıl önce

Next.js security tip: Use "server only" for the code that should never be exposed to the client.
0:29

Next.js security tip: Use "server only" for the code that should never be exposed to the client.

Alex Sidorenko

109,311 görüntüleme • 1 yıl önce

i'm not using the next.js app router navigation for contentport anymore, the results are kinda amazing ◆ pages load instantly now ◆ whole app feels way faster ◆ barely any loading states, even on refresh the speed difference is actually wild
0:22

i'm not using the next.js app router navigation for contentport anymore, the results are kinda amazing ◆ pages load instantly now ◆ whole app feels way faster ◆ barely any loading states, even on refresh the speed difference is actually wild

Josh tried coding

274,695 görüntüleme • 1 yıl önce

BOOM. Ohio State preserves the shutout with an exclamation point.
0:50

BOOM. Ohio State preserves the shutout with an exclamation point.

CBS Sports College Football 🏈

231,142 görüntüleme • 7 ay önce

Here is the recording ( page load ) NextJs on left ( 1.38 s = 1380ms ) Tanstack Start on the right ( 209ms ... ) ~7x - Playwright is now less flaky, 100% faster - Rendering and navigation is at least 3x faster across all dynamic and non-dynamic pages - file structure is more sane and customizable - just works client side and server side...... - Fast, easy to understand...
0:43

Here is the recording ( page load ) NextJs on left ( 1.38 s = 1380ms ) Tanstack Start on the right ( 209ms ... ) ~7x - Playwright is now less flaky, 100% faster - Rendering and navigation is at least 3x faster across all dynamic and non-dynamic pages - file structure is more sane and customizable - just works client side and server side...... - Fast, easy to understand...

Meabed

43,693 görüntüleme • 4 ay önce