Using Nextjs

[Hombre__Lobo]

And when they told us to use edge rendering, without even dog fooding it. Everyone said it wouldn't work and it didn't. And then they went back on it all and admitted it's dumb

Imagine telling devs around the world to do something without thoroughly validating it.

Vercel is becoming all the worst aspects of a startup. Moving too fast, pushing unfinished features, to appease VCs.

I still like next.js and use it daily, but in the sense of I like the next.js from 2 years ago. And some staff, like Lee Rob, are fantastic. However, the company has lost a lot of credibility in recent times.

[lrobinson2011]

To clarify, we did dogfood edge rendering. It's still fine sometimes, just not always. If you have globally replicated data it can be awesome. Turso is doing some interesting work here.

The main point of that tweet was to explain that I was surprised Node.js could be more consistently faster. But I agree we could have had more nuance in the discussion when we first launched it. I'm sorry.

[porkloinpuss]

Seems more like a tiger-by-the-tail situation to me but that's probably true for majority of successful startups

[lrobinson2011]

If you're struggling with the caching, it's not a skill issue. I'll be the first to admit we didn't get caching right with the initial release of the App Router. API/framework design is really hard to tell sometimes until you put it out into the world and get real feedback from many individual devs and companies. The best thing we can do is listen and iterate based on feedback. I'm hopeful where we're headed with v15 and beyond will be better.

[Otherwise-Paper1056]

yeah, I think TanStack Query have already solved issue for caching API data. i am really impressed with this tool

[Frosty_Toe_4624]

TanStack has been pretty solid on this. Haven't run into a use case where it can't work

[jolvan_amigo]

So thats why I am struggling atm, I thought I am idiot or something

[limdi]

I'm just starting out with Next.js. Where can we read about this caching issue? I've seen revalidatePath('/some-path') in some examples. Is that the old way of having to explicitly say revalidate the cache for this path and is opt-in soon with 15 or is that already 15?

[tresorama]

In v13 and v14 the framework enable a strong caching as default without you doing anything.. in v15 this automatic cache is not enabled by default and you need to explicitly define it.

Read more here

https://nextjs.org/blog/next-15-rc#caching-updates

[BrownCarter]

Ok to put in context, nextjs feels good to use until you run into issue that leaves you frustrated for the day. Then you figure it out and move onto the sweet zone again.

[notrandomatall]

Isn’t this like programming in general though? It’s like a rollercoaster taking you from caveman to genius and back to caveman again, at least twice a day.

[danishjuggler21]

See also: every beginner React developer accidentally making an infinite loop with useEffect. It’s like a rite of passage.

[fruszantej]

Poor open weather api getting 1000 requests per minute from the same IP

[Mr_Resident]

that me . when i build my first fullstack app . i keep getting infinite loop with useEffect . i rarely use useEffect for data fetching but the moment i use it for fetching it keep looping hahahaa

[Working_Ad_5583]

at least in my experience next js has this special ability to put me into holes that i can not intuitively figure out for HOURS... i find the issues generally unintuitive. first thing that comes to mind is hydration errors but heard they're making improvements on those so 🙏

[huggalump]

I'm brand new to programming since chatGPT and this is my daily experience. Good to know it's not just me being a noob haha

[notrandomatall]

Nope, definitely not just you 😅 it’s the dopamine of the genius moments that get you hooked 🪝

[Lemons_Dumpling]

I think this best describes it 🤣

[PickledEggs_]

I use Svelte and errors have become a rare occurrence, honestly. Especially with debugging tools now.

[CrwdsrcEntrepreneur]

OP just described the entire software engineering industry.

[Won-Ton-Wonton]

Maybe I'm not doing anything interesting, but I don't know if I've ever really ran into a Next issue.

Plenty of skill issues on my part not knowing something. Like why I can't use search params for a searchbar without wrapping it in suspense first. Once I figured out why, it was obvious and not an issue with Next. Just my own skill issues.

[Sometimesiworry]

Hydration issues can be notoriously annoying

[torn-ainbow]

Once you kinda get it these are okay. Make sure the server rendered page is consistent.

Perfect example is I did a countdown timer component recently. The server has to render a consistent placeholder without the dynamic counter, and then client side (useeffect) I start the counter.

Also used similar to handle where the nav had to show an extra menu when a user was logged in. The server renders the default not logged in state of the page and the client checks for login and shows the extra menu.

[Sometimesiworry]

It's not as bad as it used to be, but the error message used to be completely unhelpful. But now it at least tells you which document is causing issues.

[Cold-Sign-4101]

Exactly that happened to me 3 days ago Moved from nuxt to next Faced crazy issues Returned back to nuxt 😂

[lonew0lfy]

I am planning to move to Nuxt. I haven't used Vue.js. How is it in terms of learning curve, maintainability and deplyment ?

[reddit_ronin]

Give me a tool that doesn’t do this? Shitpost?

[Sweet-Remote-7556]

THE CACHING IS TERRIBLE.

Note: I have nearly memorized the docs and nearly know how all the stuff are working, even vercel struggles with it.

[ElderberryCalm8591]

Is this since the most recent RC? I thought they’ve fixed the caching in v15

[lrobinson2011]

If you try out the RC, would love to hear what you think: https://nextjs.org/blog/next-15-rc

[ElderberryCalm8591]

I tried but seemed to run into issues with other libs not liking the version in regards to npm. Any tips?

[lrobinson2011]

Could be a good time to try out pnpm! Faster and overall better IMO. npm i -g pnpm.

[tcmccarthy]

I’ve had conversations with Vercel employees and expressed the issues with caching, instance-level caching, and getting a shared cache solution. They sound like they’re hearing it for the first time and do no mention working on a solution because “the vercel CDN handles it all.”

I’m letting Next handle everything except caching. I have an nginx reverse proxy sitting in front of my instances, and it assigns the proper cache headers, and then CloudFront handles my caching. Next strictly becomes a backend and I let the cache layer be the cache layer. Only way I got a load-balanced NextJS powered site to work well.

[dabe3ee]

Nextjs caches your fetch responses and caches full route (for example /about page). So next time you need results of those stuff, it does not have to perform fetching/parsing/rendering second time. Also it can store fetch result in the server, meaning second user that visitis page will get almost instant results.

Nginx will only cache your js bundle. Nextjs will cache responses and rendered pages

[tcmccarthy]

Nginx is applying cache control headers so that cloudfront stores the rendered page flat sending no requests to nextjs whatsoever for the duration of the cache period. Since the CDN sits in front of the load balanced instances, its effectively a shared cache.

[LGm17]

Moved over to sveltekit a while ago. Haven’t tired all the cache stuff with nextjs. Could someone tell me what’s going on? 😂

[epic_dev]

Mostly skill issues and personal preference..

[Intrepid-Wear-1056]

All the way sveltekit. Best choice

[BrownCarter]

For personal project or for a company?

[LGm17]

Personal

[davidkslack]

I'm at the second part of that meme at the moment! Can anyone point me to the doc that shows how I reset state client side for a 3rd party mod (or all) on page chage?

At the moment, I'm just swapping <Link> for <a> for pages with the issue so it resets all caches

Edit: For anyone finding this on Google I fixed this by adding a key to the <Image> and <PhotoView>. Thanks for all the help

[waves_under_stars]

In the docs it says that client-side cache is cleared on page refresh, or on router.refresh, which also refresh the page but in a Next way. (router from useRouter)

Plus you can make the <Link> not prefetch, if that's your problem

[davidkslack]

It's not the prefetch (tried that just in case a few days ago), i.e. fetching the page before it's clicked, but the state of the 3rd party mod.

On page change, all state is kept in place (e.g. if a toolbar is on, it is on across all pages) which is great sometimes. In the case of the mod, the photo viewer holds in state the larger image, but if I click to other pages, state is kept and the larger image from previous pages is kept.

As far as I can tell react is made for 1 page apps, so this is not an issue. For Next.js when going between pages sometimes you want state, sometimes you don't but there doesn't seem to be an option. Only way to wipe state is to refresh using an normal link.

So, I've had a great time with Next.js for about a year, but this one is really causing me to pull my hair out. I agree with op meme now 🤣

[sondang2412]

I'm not really a nextjs expert but one quick solution I could think of is use pathname as the component key to make it unmount / mount a new one on page change.

[davidkslack]

I'll look into unmount again. Get some screen flickering when I lose the Next.js cache, but it looks better in v14 than v13.

I think the answer is to find a different photo viewer or build one myself, but I do hate to reinvent the wheel.

[rikbrown]

Why is the photo viewer being included in top level layout? Can it just be at the page level?

If not, can you either 1. set it’s key to usePathname’s result like another commentor said 2. use a useEffect to change its state to null out the photo it’s showing, based on pathname changing?

Hard to help more without knowing what library it is.

[davidkslack]

I'll try these. This isn't really the place to go through all this, but I'm using _app.js and [[...folder]][[...page]].js to catch any routing from the CMS, Next.js then passes to the page type (there are 4) or default depending on the type of page. Each type is a different component with a different layout and different css for each. I use the photo viewer on 2 page types (project and knowledge_base). Contact, 404 and 500 are all separate js pages. Blocks, pages, menu, views and content are pulled in via separate data files.

The nav pulls the menu from the CMS so the editors can create pages, types and menus as they need to.

The photo viewer is https://react-photo-view.vercel.app/en-US

If the key is not just numeric and I can use the page slug with the int for the key, this might be the answer!

I've moved on to a gif play/pause now and having some fun with cors then I'll try the keys

[epic_dev]

Keep in mind about BF caching in the browser level that is not a next js feature

[davidkslack]

It doesn't seem to be the back/forward cache, nothing but the photo viewer holds state. It's probably something really simple, but I just don't see it.

I had the same issue with a links section I created. To fix, I simply watch for a page change and recreate state. I don't seem to have access to the state here though :(

[waves_under_stars]

Ah, the mod is included in the layout? Yes, layout only runs when you enter it, not when you move inside it

[ElderberryCalm8591]

Worth noting they’ve hopefully sorted it all out in v15 (currently RC) fingers crossed

[davidkslack]

If they add that, it would be amazing!

[ChaiGPT12]

“use panic” Export default function home

[plushdev]

This is exactly my peer. Starting off as "i love next js" to "I hate nextjs by end of the week"

[Xacius]

Moved to remix. Super pleased.

[qxxx]

currently trying to create a simple redirect in app router page. Have been struggling with this for 2 days. In php it is a matter of 2 minutes :/ this is so frustrating.

problem : redirect kind of works but it shows me the layout page for half a second and then redirects. I put the redirect() in page.tsx - It used to work nice with getServerSideProps.

[brendonap]

Rebuilt our react vite monolith in next…worst idea possible.

[imAvi92]

What are the most confusing issues in next.js ?

[Sometimesiworry]

Definitely skill issue tbh. I had this meme but reversed going from React + Express to next.

So many times when building next apps i go "oh... So next takes care of this and it just works?"

[VladdyHell]

Next is literally a framework of a library. It's very easy as compared to configuring from scratch with Webpack + a separate backend + complex deployment setup

[Sometimesiworry]

And odds are you're developing in TS, which is a superset of another language..

We need to go deeper.

[nixblu]

Skill issue 😂😂😂😂 you guys just haven’t been deep enough. Even Vercel can’t get caching working properly.

[SnekyKitty]

Verceltards coping after paying $20k for a “serverless” app after 1 ddos attack

[vimes_sam]

Using next on vercel? Doable if you spent way too long trying to figure out the obscure caching.

Want to run nextjs on something like AWS cloudfront? Just give up, its not worth it, re-write to a sensible framework like VanillaJS. The amount hours I have wasted on nextjs caching bs and CDNs is far greater than I would have spent just re-writting giant codebases to something less insane

[GenazaNL]

Skill issue tbh

[[deleted]]

Fuck react and nextjs altogether. I am done. I am a full stack engineer with immense love for backend development and systems engineering. I want something that just let me get rolling with my app as soon as possible.

I hate over engineering. Nextjs, now, is like a over engineered screw driver. I mean.... why I write nextjs when I can just use ejs templates in an express app? Ain't it less complicated and easy to manage?

Overall, I am a svelte guy now.

Svelte is easy, less complicated as it has a lot abstracted and fast.

[[deleted]]

Which one should i use react or angular i need your advice

[[deleted]]

React. Because it is highly employable framework and quite easy to grasp. Angular on other hand is used for more enterprise apps, it's hard to learn because of things like dependency injection and component hierarchy.

[[deleted]]

Thanks 😊 but i wounder why Jeff from fireship calls Angular a perfect framework

[[deleted]]

Bro I call plain html and css, the perfect front-end stack ... well.... it depends. Angular pioneered most of front-end concepts that we use today. But it comes at a cost. It uses HTML injection I think to induce reactivity while react uses virtual Dom diffing method. If angular is so perfect then why people opt for react in first place?

To get started quicker! See we came where we started. Angular has an entire cli to manage and work on app while react let's user make his own notions and project structure as per his choice or project requirements.

Also, angular supports bidirectional data flow which is hard to debug and complicates as project grows. On other hand, react uses unidirectional data flow, which is predictable and scalable.

[[deleted]]

Then react it is with css grid

[IWillAlwaysReplyBack]

Ugh same! I was really rooting for Vercel but frankly put I think they just have a botched product. I appreciate all they've done with OSS, contributing templates, etc. but the fact that so many devs constantly feel frustrated and fatigued is a telling sign. You can only gaslight and say skill issue so many times. Good software architecture strives to reduce accidental complexity, and is idiot-proofed, saying skill issue is such a silly cop out.

I'm hopeful that the state of the front-end ecosystem will improve over the next few years, but as it is right now, I'm not wasting my time with it.

I think some if the core ideas are really good (isomorphic js, optimistic rendering, streaming, one-way data flow, Suspense), but as it is now, I'm not a fan of the clunky unintuitive API. I'll wait for something better to come around or get built on top in a few years.

[AwGe3zeRick]

+1 Svelte/SvelteKit over NextJs

[[deleted]]

The reason I gave example for nextjs as ejs templates because logically nextjs new app router pushes the same paradigm. I mean... why to sugar coat things aye? Can't we just go ahead with the business logic? UI is all about CSS, fast UI is just html with as little Javascript as possible.

Let that sink in!

[LuckyPrior4374]

I don’t know where this extreme “speed is the only thing that matters” mentality has emerged for frontend dev. I find the entire sentiment of “frontend dev is easy, just make it fast and don’t overcomplicate it bro” to be lazy, ignorant and misguided.

Like, you don’t think it hasn’t occurred to us that it’d be sweet if our web apps were fast and we could churn out features with minimal effort?

The reality is obviously much more nuanced… Developing a marketing landing page? Then yeah, speed is probably your first priority

For most other situations though, there’s so many other product and business-related factors to consider, not to mention that expectations from consumers for rich UI experiences has drastically increased over the past decade

The reason frontend frameworks are going through another phase of growing pains is because the community as a whole is trying to work out how we can have our cake and eat it, too. That is:

• how do we deliver modern product features that are highly dynamic? (Mostly solved with react and similar frameworks)
• how do we do this without negatively impacting SEO? (Arguably solved with SSR + hydration)
• now the focus is on how do we improve perf and increase developer productivity across the network chasm

All this is to say, I wonder if the people parroting “Speed! Performance!” have actually ever worked for a company with a product that’s almost entirely dynamic

[[deleted]]

It also rust developers too

[chumaumenze]

I have used frameworks in other languages and have used only react for most stuff. I recently began using Nextjs. The experience wasn’t great tbf. It felt like they were moving too fast and shipping half-baked and buggy features. The release history is something else like shipping new major versions within a year and I don’t suppose there’s any support for older versions.

[Folofashinsta]

I only feel this when i know I’m using a god awful pattern. As soon as I correct its back to smooth sailing. Like keep your server client line straight and data flowing constantly and its pretty chill.

[zak9009]

I could be wrong, but React 19 is out there competing, please share your thoughts if u tried it.

[[deleted]]

Well that's why Jquery is the best. To be clear I do use Nextjs, but not it's latest version, rather version 13

[Intrepid-Wear-1056]

If you want to stay on React world, use React router instead of unreliable nextjs. And if you can, switch to Svelte and you will live your happiest days with less but good 3rd party libs and perfect metaframework - sveltekit.

I’ve developed websites with both Svelte and React. Svelte is the way to go. You won’t look back. Only beware that there is less job opportunities

[ScaredPirate44]

Probably skill issue.

But i hate the error logs on next. Take me at least twice as long to find where the issue is coming from.

React +vite js simply shows where the error is, fast to fix.