正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

703,357 subscribers

66,022 次观看 • 2 年前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 条评论

Peter White 的头像

Peter White2 年前

@nextjs @Shopify Super fast - though optimistic UI for quantity increase in cart would be nice 👀

Guillermo Rauch 的头像

Guillermo Rauch2 年前

@nextjs @Shopify yessss. want. cc @leeerob

Jorge Vizcayno 的头像

Jorge Vizcayno2 年前

@nextjs @Shopify I'm sure if you convert the into a real Vercel Swag store instead of Acme products, you'd get both more insights on how to keep improving and some revenue from ver el powerusers

Baytaş 的头像

Baytaş2 年前

@nextjs @Shopify wen page transitions tho

Sukh Dugal 的头像

Sukh Dugal2 年前

@nextjs @Shopify If a demo store feels so slow and clunky, I can't imagine what a real store's UX feels like. Can someone without bias chime in — is running two web servers across locations to render a page not a bad idea?

Jacob 的头像

Jacob2 年前

@nextjs @Shopify Darn

Richard Poelderl 的头像

Richard Poelderl2 年前

@nextjs @Shopify It’s fast. But not local first fast.

Guillermo Rauch 的头像

Guillermo Rauch2 年前

@nextjs @Shopify how come? If it's the add to cart operation, that's on the todo. will get done

khavas 的头像

khavas2 年前

@nextjs @Shopify That's pretty cool!

相关视频

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

I've finally published a new version of next-international, my fully typesafe i18n library for Next.js This release adds initial support for the App Router, with both Client and Server Components:

Tom Lienard

42,459 次观看 • 3 年前

It happened! I’ve open sourced my exif-based photo blog as a (near) zero-config Vercel template. It uses all the things: ◆ Next.js App Router with Server Actions ◆ Next.js Image ◆ Next Auth ◆ Vercel Postgres ◆ Vercel Blob ◆ Vercel OG Template →

It happened! I’ve open sourced my exif-based photo blog as a (near) zero-config Vercel template. It uses all the things: ◆ Next.js App Router with Server Actions ◆ Next.js Image ◆ Next Auth ◆ Vercel Postgres ◆ Vercel Blob ◆ Vercel OG Template →

Sam Becker

125,819 次观看 • 2 年前

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.

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 次观看 • 1 年前

This is a fully functioning Laravel application and playground rendered on a static Cloudflare page. The entire app is sandboxed to your client, all files are editable, and you can even run artisan commands.

This is a fully functioning Laravel application and playground rendered on a static Cloudflare page. The entire app is sandboxed to your client, all files are editable, and you can even run artisan commands.

Andrew Schmelyun

12,275 次观看 • 5 个月前

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

In LiveView, we keep the state in one place - the server - and it simplifies a lot. But sometimes the state on the client is preferred, or even necessary, and we can't use LiveView for that part. Unless we have a LiveView that runs on the client 👀 Using Popcorn, we managed to run LiveView fully in the browser – here's a POC 🎉 The approach is to have a fully client-side LiveView rendered by a server-side one, and they can communicate with each other. Try it out:

Elixir by Software Mansion

13,537 次观看 • 7 个月前

Support Local Business 📌 Only R100? Let’s see what I can get at SKUBU 😅 SKUBU is the world’s first fully automated refill store and it offer high demand staple foods at unmatched prices Try it for yourself. 😁

Support Local Business 📌 Only R100? Let’s see what I can get at SKUBU 😅 SKUBU is the world’s first fully automated refill store and it offer high demand staple foods at unmatched prices Try it for yourself. 😁

Black-Jesus💧🇿🇦

54,233 次观看 • 5 个月前

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.

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 次观看 • 1 年前

!Boring If this was going to be a camera app people would love, it had to do 4 things… 1. Feel satisfying in your hands (like a real camera) This is our first fully-3D interface with dynamic lighting that responds to movement, satisfying sounds, & custom haptics. Feels damn good.

!Boring If this was going to be a camera app people would love, it had to do 4 things… 1. Feel satisfying in your hands (like a real camera) This is our first fully-3D interface with dynamic lighting that responds to movement, satisfying sounds, & custom haptics. Feels damn good.

Andy Allen

34,943 次观看 • 1 年前

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

it's finally time... this is css clicker, a fully-featured incremental game where your goal is to design your own personal website and get as many views on it as possible the fun part? it's a pure-css game, meaning it has zero javascript or server-side code. have fun!

Rebane

128,732 次观看 • 1 年前

Here we go~ my first fully fledged nom animation~ This took 3 days to fully construct since I'm still learning~, and it was a Christmas gift for the lovely dynnie.bsky.social~ Model by @/soxf0x Hope you all enjoy as much as he did!~

Here we go~ my first fully fledged nom animation~ This took 3 days to fully construct since I'm still learning~, and it was a Christmas gift for the lovely dynnie.bsky.social~ Model by @/soxf0x Hope you all enjoy as much as he did!~

The Teumessian Fox

18,883 次观看 • 1 年前

Claude code is fucking insane i know literally nothing about coding, zero, and I just built a fully functioning web app for scraping peoples data from third world countries and will be selling it for 2X This is insane

Claude code is fucking insane i know literally nothing about coding, zero, and I just built a fully functioning web app for scraping peoples data from third world countries and will be selling it for 2X This is insane

Jakey

22,507 次观看 • 5 个月前

Dylan is spreading the agenda, so here it is. I fully believe Kolossos is Jamaican, and this was the first time I did that voice. Expect more down the line as it spreads further.

Dylan is spreading the agenda, so here it is. I fully believe Kolossos is Jamaican, and this was the first time I did that voice. Expect more down the line as it spreads further.

-TheOnlyVolume-

31,240 次观看 • 1 个月前

ARE YOU READY SUNNY HUNNY? Another fully SOLD OUT night tonight Brace yourself. This show is a belter! Close the doors. Shut the world outside. And remember how it feels to belong.

ARE YOU READY SUNNY HUNNY? Another fully SOLD OUT night tonight Brace yourself. This show is a belter! Close the doors. Shut the world outside. And remember how it feels to belong.

Katie Hopkins

63,671 次观看 • 1 个月前

We are excited to introduce the Text to Sound Effects API. To showcase it - we've built the first Video to Sounds Effects app. This app is available for free online and fully open-source.

We are excited to introduce the Text to Sound Effects API. To showcase it - we've built the first Video to Sounds Effects app. This app is available for free online and fully open-source.

ElevenLabs

120,703 次观看 • 2 年前

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

React tip: "use client" misconceptions (2/5) 🚫 "You cannot nest Server Components inside Client Components because "use client" turns everything into Client Components." ✅ We can pass the rendered result of Server Components to Client Components as props. Simple example: (Server Component) (Client Component) (Server Component) is designed for the client. It needs to instantly open and close when clicked. is designed for the server. It uses packages that don't work in the browser and needs to fetch data close to where it's stored without exposing credentials. So, how can we nest a component that uses server APIs inside a component that uses client APIs... without using `import`? React props to the rescue! --- (0:00) 1-4: Reminder: Importing code forms a module dependency graph. Adding dependencies to a server or client bundle. (0:23) 5-6: Reminder: Using components eventually forms a rendered component tree. (0:37) 9: Oh no! We get an error when trying to `import` a client API (useState) into a server module. (0:44) 10: We know the trick by now: Add "use client" to mark `2.js` as a client entry point. This moves the module to the client bundle and allows us to use client APIs like `useState.` (0:51) 11: But we get a new error! "use client" moved all imported dependencies into the client bundle, including our ORM package, which doesn't work in the browser. (0:59) 13: Let's refactor without changing our rendered component hierarchy. First, we move the `Cart` import to the parent file that imports `Modal`. This moves `Cart` outside the "use client" boundary and consequently the client bundle. (1:11) 15: Then, we pass down the rendered result of `Cart` as a prop to `Modal`. This allows `Cart` to be entirely rendered on the server as a Server Component before being passed down. `Modal` has no knowledge of what the `cart` prop is. Its only responsibility is placing whatever it receives into the `{cart}` slot. (1:15) 16: Finally, it's common to use the special `children` prop for a component's primary content. The key insight is that we were able to use props to retain our desired component hierarchy even though we changed our module dependency graph.

Delba

43,989 次观看 • 2 年前

I just bought more $XRP for the first time in 2 years. The last time I bought XRP it was at $0.50 and scooping it up at $1.09 feels like a very similar opportunity. Let me explain fully what my plan is 👇

I just bought more $XRP for the first time in 2 years. The last time I bought XRP it was at $0.50 and scooping it up at $1.09 feels like a very similar opportunity. Let me explain fully what my plan is 👇

Zach Humphries

42,569 次观看 • 1 个月前

This AI tool will FULLY automate your dropshipping store! Here’s how it works: - Enter any product link - Wait 30 seconds for a custom product page - Import to your Shopify store with 1 click RT and comment “AI” and I’ll auto-dm you a full tutorial.

This AI tool will FULLY automate your dropshipping store! Here’s how it works: - Enter any product link - Wait 30 seconds for a custom product page - Import to your Shopify store with 1 click RT and comment “AI” and I’ll auto-dm you a full tutorial.

Eclipse

69,095 次观看 • 2 年前

I tried replicating fully agentic coding on my laptop and I'm impressed! My setup - Qwen 27bn (4bit quant) - Pi coding agent - CCO sandboxing for yolo mode My Mac M3 has 36GB ram. It's surreal to see a local model read prompt, follow it flawlessly and then build a fully self-contained html/css page with zero errors. I got about ~20 tokens/second, and on this prompt quality similar to Haiku! But... this is running locally :)

I tried replicating fully agentic coding on my laptop and I'm impressed! My setup - Qwen 27bn (4bit quant) - Pi coding agent - CCO sandboxing for yolo mode My Mac M3 has 36GB ram. It's surreal to see a local model read prompt, follow it flawlessly and then build a fully self-contained html/css page with zero errors. I got about ~20 tokens/second, and on this prompt quality similar to Haiku! But... this is running locally :)

Paras Chopra

106,032 次观看 • 3 个月前

The Rise of Skywalker has my favorite #StarWars trailer. It made me tear up when I first saw it, and it is fully embedded as one piece, of many pieces, that collectively captured my love for this movie.

The Rise of Skywalker has my favorite #StarWars trailer. It made me tear up when I first saw it, and it is fully embedded as one piece, of many pieces, that collectively captured my love for this movie.

John Hoey

117,187 次观看 • 2 年前

Well, I *was* having fun with my first 2011 🤣 Tonight after a couple mags it failed to go fully into battery, so I pushed it forward and fired the chambered round (perhaps that was an error, though it was a pretty gentle push I didn't need to force it or anything). Now it's totally locked up, not sure what to do but maybe one of you knows. It only has about 300 rounds through it, and cleaned and oiled it after the first 100. I know it has a bit of a break-in period, though this was my first issue with it. But it's a pretty big issue! I could try and really force it open but I dont want to break it.

Well, I was having fun with my first 2011 🤣 Tonight after a couple mags it failed to go fully into battery, so I pushed it forward and fired the chambered round (perhaps that was an error, though it was a pretty gentle push I didn't need to force it or anything). Now it's totally locked up, not sure what to do but maybe one of you knows. It only has about 300 rounds through it, and cleaned and oiled it after the first 100. I know it has a bit of a break-in period, though this was my first issue with it. But it's a pretty big issue! I could try and really force it open but I dont want to break it.

Kostas Moros

60,014 次观看 • 4 个月前