Hello, unstable_cache and revalidateTag works really well with locally built and start project put on prod on vercel I can;t figure out how to revalidate the cache other than by pressing "cache purge" in vercel settings, did anyone experienced the same?
@codemedicКүн бұрын
Pls make a more descriptive step-by-step tutorial 🙏🙏
@jordanyefet2679Күн бұрын
Thanks for the video! I have one thing to mention about nextjs - using it doesn't mean you have to call to the DB from the server components/actions. I'm building an application that use nextjs as the client and nodejs as the backend, and I do it for lots of "DevOps" reasons, such as scaling, security and much more. So please stop misleading developers when you guys (nextjs influencers) say "you can get to the DB right from the server action", because what you're creating is a monolith.
@komilolimov2257Күн бұрын
Sorry, i'm just wondering where i can find your source code of your project "nextjs partial rendering"
@learn_with_gurpreetКүн бұрын
Definitely worth to watch video :)
@glennrayaКүн бұрын
What's with the PHP Lambo?
@vladimir_dev2 күн бұрын
Oh you know what I'd love to see in @next/third-parties/google ? PWA
@shivashukla78943 күн бұрын
why I am unable to see chache HIT or skip. I have added this in next config logging: { fetches: { fullUrl: true, } }
@mrjester3 күн бұрын
f
@tommycallsuback3 күн бұрын
can we do "stale while revalidate" without using react query? (With Next 14, RSC). I want my routes dynamic but when user goes to route, he initially should see stale cache of his previous visit to the route during the same session. Suspense loading should be only shown in the first visit to route.
@zwill88826 күн бұрын
Y'all are an incredibly impressive team and Lee is doing a great job explaining all of it.
@anupamsagar79256 күн бұрын
how to make route.js in new app roouter i am not using pages router
@devJefferson6 күн бұрын
Bro failed the 5 minutes 😄, But still the best video 👍
@PUTTEKOOL8 күн бұрын
I suppose the first Date.now() value comes from the server, gnarly inception 😄
@relaxchannelforyour8 күн бұрын
Вообще не помогло
@ShaneCrenshaw8 күн бұрын
How can I do this with Vertex AI instead of Google AI?
@en_kratia8 күн бұрын
Use cookies() === bye bye SSG?
@abdulhadijafari77189 күн бұрын
Route Handlers in app router are confusing for me, I am not quite understanding what is it for. can you make videos on that
@henriquematias19869 күн бұрын
Regarding "Calling Route Handlers from Server Components" I think the idea here is that calling the function directly will mean that you end up with 1 function on the server component to call the data directly ( bypass API route ) and another one on React-Query ( or SWR ) to call the API and basically end up doing two different "getData" functions, one for server and one for client, which can up mismatched / confusing / harder to maintain ?
@paulhetherington385410 күн бұрын
Ex -- Oriental women only -- personal choice! port -- personnel - received daily orders - for that activity! Jap 7th fleet! I.e. US NAVY <<< Jap mask! Will be punished!
Dumb Question: With all these server actions, route handlers, etc. I'm confused with just one question: Can we use "useEffect" hook on client side to fetch data from an api like we used to do for SPAs in React?
@_rhythmsaha8 күн бұрын
First, it's important to understand Vercel's main business model. They have made Next.js free and open-source, not generating direct revenue from the library itself. Instead, their primary revenue stream comes from their hosting and serverless offerings. The recent updates to Next.js, emphasizing server components and fetching data directly from the server, are designed to encourage developers to utilize Vercel's hosting and serverless platform. By promoting this approach, Vercel aims to increase adoption of their paid services and generate more revenue from developers leveraging their CPU runtime and infrastructure. While the App Router in Next.js is a compelling feature, the default behavior of rendering components on the server raises concerns, particularly for small-scale applications. Server-side rendering can lead to inefficient use of CPU resources, as even simple components are rendered on the server, potentially resulting in increased costs and performance issues, especially for those on low-budget or free hosting plans. Personally, I prefer to separate concerns and utilize dedicated backend frameworks like Django or Express for API development, as they are more scalable and better suited for this purpose. Attempting to fetch data directly from the server using Next.js can introduce unnecessary complexity and latency, as the request must first reach the Vercel server, which then proxies or duplicates the request to the actual backend API before returning the response. This additional hop can lead to decreased performance. For applications with an existing backend API hosted elsewhere, I recommend leveraging client-side data fetching, as it streamlines the process and avoids the overhead of server-side data fetching through Vercel's infrastructure. However, it's crucial to ensure that the backend API is properly secured, regardless of the data fetching approach used.
@saumya840711 күн бұрын
The vercel V0 is incredible and it will save a lot of time on developing large and complex applications.
@TheAyushSomani12 күн бұрын
Since when Channing Tatum become a developer? btw loved the presentation, James.
@INTRPOLPolice12 күн бұрын
Awesome ❤🎉
@Racine1413 күн бұрын
Can you talk about hydration? Up to now, I am very confused about this error.
@nikb371316 күн бұрын
I spent 5 days and still couldn't figure out how to build a UI of catalog page for example. I have catalog data that I want to request directly from my db which make my page a server component. I also want to have filters on top of that page which are client component bc they need to use react hooks. So far I figured out how to do it by making all my page a client component and requesting my data via proxy router that requests data from my db. Is it correct approach or is there still a way to combine those two logics in one server component without using proxy router? In old pages routing I would do it with getServerSideProps, get my db data directly and then use filters in the jsx with all useStates I need and data as a props. But now it's all so confusing...
@timooothy123417 күн бұрын
Is it out to be used??
@Fargoth9517 күн бұрын
I still get a 404 not found in the website preview whenever I try to deploy. It's just an index.html and a folder of images. Anyone know what I'm doing wrong? I also added trying a vercel.json that another youtuber recommended but it didnt work.
@ajsimwork888717 күн бұрын
I don't understand where getData() is coming from for the first example, nor do I understand why localhost:3000/api brought up the data JSON data for him. There are many things that simply aren't explained here. My Next.js seemingly doesn't "work" like the one shown in the tutorial. Not helpful...
@GeniusHawlah17 күн бұрын
What about GET in a Client Component, can one still use server actions or route handler is recommended for GET? I tried using actions to fetch in a Client Component and it worked perfectly, but checking through my network tab, I realized it's sending a post request. I curiously checked the docs and using server actions to fetch was not talked about. Can you clarify that please? Thanks for great contents all the time!
18 күн бұрын
how does partial prerendering play with SEO? are the dynamic parts seen by the search engine crawlers?
@CodingBill19 күн бұрын
Great video, could you talk about layout components as well ? As far as i know the fetching and caching behavior is a bit different.
@dzienisz19 күн бұрын
She is the best!
@MichaelRoussel20 күн бұрын
6:11 I'm pretty sure he said "I just want some pussy"
@pamphilemkp20 күн бұрын
great one, I picked big commerce with nextjs 14 over the remaining vercel platforms, because for some reasons it has almost everything built allowing us (developers) to create faster e-commerce projects for example there are many options for checking out after adding to cart, the client can pick a payment method such us cash on delivery, online payment and so one, I tried Shopify before but I think as for many developers Big Commerce is the best option. big up to Big Commerce.
@hollycow817120 күн бұрын
hi how can i use Country Restriction in Next.js? Does Vercel provide any inbuilt solution?
@vatansrivastava727921 күн бұрын
Need a tutorial on this
@farzadali743421 күн бұрын
Excellent delivery!
@leeanucha21 күн бұрын
The fact that google calls it core web vitals is hilarious. it's a joke
@brennang0222 күн бұрын
When your seeing the cache hit at 06:30 is that in a development mode. All i seem to get is Cache missed reason: (auto cache) and i cannot work out why.
@seuntaiwo873523 күн бұрын
I don't seem to get the first point. can anyone explain?
@SashankAryal23 күн бұрын
So I can use sever actions for data fetching? The docs are not clear on that.
@syedazeemjaved23 күн бұрын
Great job in the first part of the video to highlight that caching does not work (as usual) when we are on a dev server, I remember that this got me scratching heads for quite sometime when I started with the App Router.
@Skillthrive25 күн бұрын
Revalidating data in try/catch still gets me. 🥴
@Steve-nd2wj25 күн бұрын
Can anyone know why he doesn't use `useEffect()` when he fetches from an API? I thought it's common practice to use it so you don't get unexpected behavior?
@JShunk26 күн бұрын
If I have a website that can pull and push data from a MongoDB server and another separate website that just pulls the data from the server how do I get the second website to update during production and know that new data has been added? It works great on a development server cause there is not caching but my only option right now is to rebuild and push the production app everytime the database is modified to get the most up to date information because without it I can see it just hits nextjs-cache that never updates. It is so frustruitng cause there is not way to even add a way to refresh the cache every hour or something.
@JShunk26 күн бұрын
Here is what the API looks like atm: export const GET = async (req: Request, res: NextResponse) => { try { await connectDB(); const post = await prisma.post.findMany(); return NextResponse.json({message: "Data fetched successfully", post}, {status: 200}) } catch (err) { return NextResponse.json({message: "Error fetching data", err}, {status: 500}) } finally{ await disconnectDB(); } };
@BrandonClapp28 күн бұрын
Have to use a webhook to invalidate the cache so that my database query executes and returns new data when an external source updates my data? Wow how did something so simple get so complex? Defaulting to static pre-rendering even though my server component had a db query in it was really surprising. At least with getServerSideProps and getStaticProps you knew how your page was going to be built, I would like more control over how pages get rendered and have it decoupled from the caching mechanism. Forcing this caching in app router adds so much more complexity and makes simple things like issuing a db query way more complicated than they need to be. Caching needs to be an opt-in feature instead of something that requires using an unstable API to bypass.
Пікірлер
Can you share this code?
ofc he's a cs player
Hello, unstable_cache and revalidateTag works really well with locally built and start project put on prod on vercel I can;t figure out how to revalidate the cache other than by pressing "cache purge" in vercel settings, did anyone experienced the same?
Pls make a more descriptive step-by-step tutorial 🙏🙏
Thanks for the video! I have one thing to mention about nextjs - using it doesn't mean you have to call to the DB from the server components/actions. I'm building an application that use nextjs as the client and nodejs as the backend, and I do it for lots of "DevOps" reasons, such as scaling, security and much more. So please stop misleading developers when you guys (nextjs influencers) say "you can get to the DB right from the server action", because what you're creating is a monolith.
Sorry, i'm just wondering where i can find your source code of your project "nextjs partial rendering"
Definitely worth to watch video :)
What's with the PHP Lambo?
Oh you know what I'd love to see in @next/third-parties/google ? PWA
why I am unable to see chache HIT or skip. I have added this in next config logging: { fetches: { fullUrl: true, } }
f
can we do "stale while revalidate" without using react query? (With Next 14, RSC). I want my routes dynamic but when user goes to route, he initially should see stale cache of his previous visit to the route during the same session. Suspense loading should be only shown in the first visit to route.
Y'all are an incredibly impressive team and Lee is doing a great job explaining all of it.
how to make route.js in new app roouter i am not using pages router
Bro failed the 5 minutes 😄, But still the best video 👍
I suppose the first Date.now() value comes from the server, gnarly inception 😄
Вообще не помогло
How can I do this with Vertex AI instead of Google AI?
Use cookies() === bye bye SSG?
Route Handlers in app router are confusing for me, I am not quite understanding what is it for. can you make videos on that
Regarding "Calling Route Handlers from Server Components" I think the idea here is that calling the function directly will mean that you end up with 1 function on the server component to call the data directly ( bypass API route ) and another one on React-Query ( or SWR ) to call the API and basically end up doing two different "getData" functions, one for server and one for client, which can up mismatched / confusing / harder to maintain ?
Ex -- Oriental women only -- personal choice! port -- personnel - received daily orders - for that activity! Jap 7th fleet! I.e. US NAVY <<< Jap mask! Will be punished!
/krch frk sfr'' || td' 4'fxz'' < v2''vk4'' , 8'' Rr'' < cntr LN'' + abv below/ /dfz skub below cntr~tmp chutz frs rkn abv : + mtsub + harr below/ /mch rv(2''tvkf'') mtsub + harr(RBZ') by: frk sfr || td~tmp dstalz/ /tran wn eml~tmp brkdn build frkz~cntnt <body tmp arch> authority/ /LN'' abv~cmz u personnel ++ abv~tmp buildz mtsub || RBZ' + frk dar vw/
Dumb Question: With all these server actions, route handlers, etc. I'm confused with just one question: Can we use "useEffect" hook on client side to fetch data from an api like we used to do for SPAs in React?
First, it's important to understand Vercel's main business model. They have made Next.js free and open-source, not generating direct revenue from the library itself. Instead, their primary revenue stream comes from their hosting and serverless offerings. The recent updates to Next.js, emphasizing server components and fetching data directly from the server, are designed to encourage developers to utilize Vercel's hosting and serverless platform. By promoting this approach, Vercel aims to increase adoption of their paid services and generate more revenue from developers leveraging their CPU runtime and infrastructure. While the App Router in Next.js is a compelling feature, the default behavior of rendering components on the server raises concerns, particularly for small-scale applications. Server-side rendering can lead to inefficient use of CPU resources, as even simple components are rendered on the server, potentially resulting in increased costs and performance issues, especially for those on low-budget or free hosting plans. Personally, I prefer to separate concerns and utilize dedicated backend frameworks like Django or Express for API development, as they are more scalable and better suited for this purpose. Attempting to fetch data directly from the server using Next.js can introduce unnecessary complexity and latency, as the request must first reach the Vercel server, which then proxies or duplicates the request to the actual backend API before returning the response. This additional hop can lead to decreased performance. For applications with an existing backend API hosted elsewhere, I recommend leveraging client-side data fetching, as it streamlines the process and avoids the overhead of server-side data fetching through Vercel's infrastructure. However, it's crucial to ensure that the backend API is properly secured, regardless of the data fetching approach used.
The vercel V0 is incredible and it will save a lot of time on developing large and complex applications.
Since when Channing Tatum become a developer? btw loved the presentation, James.
Awesome ❤🎉
Can you talk about hydration? Up to now, I am very confused about this error.
I spent 5 days and still couldn't figure out how to build a UI of catalog page for example. I have catalog data that I want to request directly from my db which make my page a server component. I also want to have filters on top of that page which are client component bc they need to use react hooks. So far I figured out how to do it by making all my page a client component and requesting my data via proxy router that requests data from my db. Is it correct approach or is there still a way to combine those two logics in one server component without using proxy router? In old pages routing I would do it with getServerSideProps, get my db data directly and then use filters in the jsx with all useStates I need and data as a props. But now it's all so confusing...
Is it out to be used??
I still get a 404 not found in the website preview whenever I try to deploy. It's just an index.html and a folder of images. Anyone know what I'm doing wrong? I also added trying a vercel.json that another youtuber recommended but it didnt work.
I don't understand where getData() is coming from for the first example, nor do I understand why localhost:3000/api brought up the data JSON data for him. There are many things that simply aren't explained here. My Next.js seemingly doesn't "work" like the one shown in the tutorial. Not helpful...
What about GET in a Client Component, can one still use server actions or route handler is recommended for GET? I tried using actions to fetch in a Client Component and it worked perfectly, but checking through my network tab, I realized it's sending a post request. I curiously checked the docs and using server actions to fetch was not talked about. Can you clarify that please? Thanks for great contents all the time!
how does partial prerendering play with SEO? are the dynamic parts seen by the search engine crawlers?
Great video, could you talk about layout components as well ? As far as i know the fetching and caching behavior is a bit different.
She is the best!
6:11 I'm pretty sure he said "I just want some pussy"
great one, I picked big commerce with nextjs 14 over the remaining vercel platforms, because for some reasons it has almost everything built allowing us (developers) to create faster e-commerce projects for example there are many options for checking out after adding to cart, the client can pick a payment method such us cash on delivery, online payment and so one, I tried Shopify before but I think as for many developers Big Commerce is the best option. big up to Big Commerce.
hi how can i use Country Restriction in Next.js? Does Vercel provide any inbuilt solution?
Need a tutorial on this
Excellent delivery!
The fact that google calls it core web vitals is hilarious. it's a joke
When your seeing the cache hit at 06:30 is that in a development mode. All i seem to get is Cache missed reason: (auto cache) and i cannot work out why.
I don't seem to get the first point. can anyone explain?
So I can use sever actions for data fetching? The docs are not clear on that.
Great job in the first part of the video to highlight that caching does not work (as usual) when we are on a dev server, I remember that this got me scratching heads for quite sometime when I started with the App Router.
Revalidating data in try/catch still gets me. 🥴
Can anyone know why he doesn't use `useEffect()` when he fetches from an API? I thought it's common practice to use it so you don't get unexpected behavior?
If I have a website that can pull and push data from a MongoDB server and another separate website that just pulls the data from the server how do I get the second website to update during production and know that new data has been added? It works great on a development server cause there is not caching but my only option right now is to rebuild and push the production app everytime the database is modified to get the most up to date information because without it I can see it just hits nextjs-cache that never updates. It is so frustruitng cause there is not way to even add a way to refresh the cache every hour or something.
Here is what the API looks like atm: export const GET = async (req: Request, res: NextResponse) => { try { await connectDB(); const post = await prisma.post.findMany(); return NextResponse.json({message: "Data fetched successfully", post}, {status: 200}) } catch (err) { return NextResponse.json({message: "Error fetching data", err}, {status: 500}) } finally{ await disconnectDB(); } };
Have to use a webhook to invalidate the cache so that my database query executes and returns new data when an external source updates my data? Wow how did something so simple get so complex? Defaulting to static pre-rendering even though my server component had a db query in it was really surprising. At least with getServerSideProps and getStaticProps you knew how your page was going to be built, I would like more control over how pages get rendered and have it decoupled from the caching mechanism. Forcing this caching in app router adds so much more complexity and makes simple things like issuing a db query way more complicated than they need to be. Caching needs to be an opt-in feature instead of something that requires using an unstable API to bypass.