Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

Alex Sidorenko

35,130 subscribers

109,311 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

10 Yorum

Andric profil fotoğrafı

Andric1 yıl önce

Never understood why server only is a package and not a directive.

Matija Marohnić 🦋 profil fotoğrafı

Matija Marohnić 🦋1 yıl önce

This is really good, it's surprising that among all of talk about security concerns about RSCs and Server Actions in Next.js I've never heard about this.

Alex Sidorenko profil fotoğrafı

Alex Sidorenko1 yıl önce

Here is a great in-depth article about security in Next.js

Vance Lucas profil fotoğrafı

Vance Lucas1 yıl önce

The fact that it is even possible to accidentally ship sensitive server code to the client is a huge red flag. 🚩🚩🚩

Windfan profil fotoğrafı

Windfan1 yıl önce

it's very easy to get confused by "use server" and `import "server-only"`. Now I have 3 different function files to help me, post.server.ts(using server-only), post.action.ts(using "use server") and post.ts(the functions that can be called by server or client components)

Phong profil fotoğrafı

Phong1 yıl önce

in a few years I swear we are going to go full circle again back to client server separation as the latest fad

Terry Carson profil fotoğrafı

Terry Carson1 yıl önce

Nice one...thanks

Prasenjit profil fotoğrafı

Prasenjit1 yıl önce

That's a crucial tip! Keeping sensitive code on the server side is essential for protecting your application. It helps ensure that no confidential data is exposed to users. Thanks for sharing this important reminder!

Artur profil fotoğrafı

Artur1 yıl önce

We need "use security" directive ASAP😁

fulco profil fotoğrafı

fulco1 yıl önce

Wish this was a directory like with sveltekit

Benzer Videolar

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

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

Alex Sidorenko

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

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

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

Alex Sidorenko

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

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

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

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 görüntüleme • 2 yıl önce

In the latest `swr@beta`, you can seamlessly move data fetching between client-side and server-side, or both, in an RSC framework like Next.js: 🔸Client only: useSWR(key, fetcher) 🔹Mixed: useSWR(key, fetcher) + RSC-provided data 🔸Server only: useSWR(key) + RSC-provided data

In the latest `swr@beta`, you can seamlessly move data fetching between client-side and server-side, or both, in an RSC framework like Next.js: 🔸Client only: useSWR(key, fetcher) 🔹Mixed: useSWR(key, fetcher) + RSC-provided data 🔸Server only: useSWR(key) + RSC-provided data

Shu

267,424 görüntüleme • 2 yıl önce

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

Delba

157,319 görüntüleme • 2 yıl önce

Demo of forms with React 19 and Next.js. If you've wondered... "Why does the form clear out my input values?" "How do I pass data from my server action → client?" "How do I handle client / server validation?" "How do I display inline errors next to inputs?" This should help!

Demo of forms with React 19 and Next.js. If you've wondered... "Why does the form clear out my input values?" "How do I pass data from my server action → client?" "How do I handle client / server validation?" "How do I display inline errors next to inputs?" This should help!

Lee Robinson

42,736 görüntüleme • 1 yıl önce

If you want to be able to call server functions from the client, RPC is often the move. The Bun + Better Call combo gets you a fullstack solution in very little code. Server, Client, bundling and HMR 👌 had to record a little video showing the setup

If you want to be able to call server functions from the client, RPC is often the move. The Bun + Better Call combo gets you a fullstack solution in very little code. Server, Client, bundling and HMR 👌 had to record a little video showing the setup

Wes Bos

103,513 görüntüleme • 7 ay önce

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 görüntüleme • 2 yıl önce

The dems argue that illegals should be counted in the census for obvious reasons. I believe that illegals were never supposed to be counted as it skews the numbers and is inaccurate. Anyone else think that only citizens should be counted?

The dems argue that illegals should be counted in the census for obvious reasons. I believe that illegals were never supposed to be counted as it skews the numbers and is inaccurate. Anyone else think that only citizens should be counted?

SonnyBoy🇺🇸

42,874 görüntüleme • 11 ay önce

Can ChatGPT run Doom? Yes. ChatGPT Apps are very powerful. I cloned our Next.js ChatGPT template, registered a 𝚙𝚕𝚊𝚢_𝚍𝚘𝚘𝚖 MCP tool and deployed to Vercel. Once the tool is called, ChatGPT embeds the full Next.js application. Server and client rendering just works, and it's 100% interactive. h/t Allen Zhou for the starter kit:

Can ChatGPT run Doom? Yes. ChatGPT Apps are very powerful. I cloned our Next.js ChatGPT template, registered a 𝚙𝚕𝚊𝚢_𝚍𝚘𝚘𝚖 MCP tool and deployed to Vercel. Once the tool is called, ChatGPT embeds the full Next.js application. Server and client rendering just works, and it's 100% interactive. h/t Allen Zhou for the starter kit:

Guillermo Rauch

392,926 görüntüleme • 7 ay önce

Cyber security expert Chris Littlewood has exposed the danger of any digital ID system. The centralised risk is dire and will allow a country to be brought to its knees and held to ransom by cyber attack. It takes only one breach for all a person’s data to be exposed. It must never be allowed.

Cyber security expert Chris Littlewood has exposed the danger of any digital ID system. The centralised risk is dire and will allow a country to be brought to its knees and held to ransom by cyber attack. It takes only one breach for all a person’s data to be exposed. It must never be allowed.

Kat A 🌸

28,604 görüntüleme • 8 ay önce

Never thought to use Cbd patches on my Achilles, thanks Dean Windass for the tip. Cbd can be used for many different ailments & in different forms, from oil patches and capsules. Take a look at & if you want to order use code Tiss40 for 40 percent off. #ad

Never thought to use Cbd patches on my Achilles, thanks Dean Windass for the tip. Cbd can be used for many different ailments & in different forms, from oil patches and capsules. Take a look at & if you want to order use code Tiss40 for 40 percent off. #ad

Matt Le Tissier ✝️

65,998 görüntüleme • 10 ay önce

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

Lee Robinson

177,009 görüntüleme • 1 yıl önce

The only way to ensure the crisis in Israel and Gaza never happens again is to begin setting the conditions for durable peace and security. Watch as Secretary Antony Blinken explains the key elements the U.S. believes should be included:

The only way to ensure the crisis in Israel and Gaza never happens again is to begin setting the conditions for durable peace and security. Watch as Secretary Antony Blinken explains the key elements the U.S. believes should be included:

The White House 46 Archived

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

Russian terrorists. The destruction of the Kakhovka hydroelectric power plant dam only confirms for the whole world that they must be expelled from every corner of Ukrainian land. Not a single meter should be left to them, because they use every meter for terror. It’s only Ukraine's victory that will return security. And this victory will come. The terrorists will not be able to stop Ukraine with water, missiles or anything else. All services are working. I have convened the National Security and Defense Council. Please spread official and verified information only.

Russian terrorists. The destruction of the Kakhovka hydroelectric power plant dam only confirms for the whole world that they must be expelled from every corner of Ukrainian land. Not a single meter should be left to them, because they use every meter for terror. It’s only Ukraine's victory that will return security. And this victory will come. The terrorists will not be able to stop Ukraine with water, missiles or anything else. All services are working. I have convened the National Security and Defense Council. Please spread official and verified information only.

Volodymyr Zelenskyy / Володимир Зеленський

8,827,042 görüntüleme • 3 yıl önce

Nearly 2 years into the Trump administration's second term, Bovino reveals that the ICE tip line “has never worked,” then clarifies that it’s not being utilized to the extent it should be. Not surprising.

Nearly 2 years into the Trump administration's second term, Bovino reveals that the ICE tip line “has never worked,” then clarifies that it’s not being utilized to the extent it should be. Not surprising.

Tom Hennessy

60,655 görüntüleme • 1 ay önce

I see both sides of the argument, that tipping is optional and that if you don’t have enough to tip you shouldn’t eat out. But, should the establishment be able to ban you from service for failing to tip?

I see both sides of the argument, that tipping is optional and that if you don’t have enough to tip you shouldn’t eat out. But, should the establishment be able to ban you from service for failing to tip?

SonnyBoy🇺🇸

633,107 görüntüleme • 5 ay önce

Pro tip for Cursor Use .cursorrules in your project to get the most optimised code generations with Cursor There's a lot here

Pro tip for Cursor Use .cursorrules in your project to get the most optimised code generations with Cursor There's a lot here

Melvin Vivas

101,039 görüntüleme • 1 yıl önce