Y7YA
Y7YA
PostsComments
TTCTheo's Typesafe Cult
Created by Y7YA on 10/5/2024 in #questions
Reducing edge invocations vercel/nextjs
It seems that when a route is running on the edge runtime, every visit to it is an edge invocation. Is this true? Got a very high traffic site which is going into huge overages due to a product page which is getting millions of visits a day. I've cached functions inside the page but I assume since the page itself isn't being cached it's counting towards edge invocations. I can't simply make it a static page since there are niche features which makes the page rely on multiple cookies (1 example is each customer has personalised product prices based on a unique customer cookie). Any solutions for reducing the invocations related to this page whilst keeping the cookie dependencies?
1 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 8/11/2024 in #questions
Server actions in server components
I have been under the assumption that calling a function marked with use server on the server is just treated as a regular server function. But I then stumbled upon a random vid where the guy mentions that calling a server action from the server means the server will be fetching from what's effectively an API route the same way client components do. Couldn't find explicit evidence for this claim though. If that's true then it's quite ridiculous that use server is not just ignored by server components, unless there's some use case for this? Hoping someone can refute this claim so I can keep using the same function for actions and server functions in peace.
6 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 8/10/2024 in #questions
NextJS prefetch bad for bandwidth?
From what I understand nextjs links prefetch pages as soon as the link is visible on the viewport. Isn't this terrible for large apps, for example my job is building headless ecommerce sites and the products page could have almost a hundred links if you include the navigation bar, footer & products. Wouldn't this be prefetching a hundred pages & very bad for bandwidth? In ecommerce the majority of consumers are mobile visitors which means they could be on limited mobile data. I've tried to search for anything on bandwidth + prefetching on the docs but couldn't find anything. I've found some articles on how NextJS supposedly accounts for low bandwidth users but got no deeper detail how or when it does this.
19 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 6/8/2024 in #questions
React Native Security Question (.env)
Building an app using Expo + Supabase. During the set up I created some envs. Everything works, but what happens to the environment variables? Can an attacker access them from the mobile app? In web dev it's simple, secret variables stay on the server. I don't understand what mobile does to address this issue, to me it just looks like the .env is bundled in the app, and the app is on the user's device therefore susceptible to attack? Any help appreciated.
9 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 4/24/2024 in #questions
NextJS detect if page is fetching new data, if so, display loading
So suppose I have this page.tsx 
interface DataPropsExampleTypeForReference {
  category: string;
  products: Product[];
  pageInfo: PageInfo;
  //... plus many other fields used by all components for various reasons
}

export default function Page() {
  const data = await getAsyncData();

  return (
    <div>
      <Breadcrumbs data={data} />
      <Products data={data} />
      <Pagination data={data} />
    </div>
  )
}
interface DataPropsExampleTypeForReference {
  category: string;
  products: Product[];
  pageInfo: PageInfo;
  //... plus many other fields used by all components for various reasons
}

export default function Page() {
  const data = await getAsyncData();

  return (
    <div>
      <Breadcrumbs data={data} />
      <Products data={data} />
      <Pagination data={data} />
    </div>
  )
}
Whenever the data is revalidated, as expected all the components update accordingly with the fresh data. I don't want to just simply replace the entire component with a Suspense fallback whilst the data is loading, I want to instead have a greyed out overlay ontop of Products which signifies to the user that the data is loading. What's the best way of achieving this? I hacked together a custom client based solution but surely there's a better pattern that exists for this?
21 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 4/7/2024 in #questions
Help responding to coworkers on my technical decisions (NextJS)
I feel like I'm at a point where I'm writing great quality software by blind-following best practices, but I've got little low level understanding that when I'm confronted about my technical decisions I'm not able to give convincing explanations. It's especially problematic since the average dev doesn't really care about the state of the tech meta, so being unable to explain these decisions to coworkers leads to lost potential productivity. I really dread work when I'm being forced to follow poor, outdated, & straight up bad practices - but at the same time I'm at fault for not having the knowledge to move my team forwards. How do I get to a stage where I can convincingly push my decisions towards coworkers? I'm less senior than my coworkers, but I'm passionate about what I do, actively seek the latest trends, & develop stuff in my spare time - whilst they treat their job purely as a job (which is completely fine!), so naturally I have a bit more knowledge about good patterns (but less so to why they're good patterns as you can find out more below).
19 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 3/26/2024 in #questions
Debugging vercel cron?
Trying to debug cron jobs but I have no indication to what's going on. I click run but I just get no logs whatsoever & unable to test my functionality. Any ideas how I can test this?
4 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 3/21/2024 in #questions
Puppeteer App Router NextJS?
Is it possible to setup puppeteer within NextJS? Could someone help me with outlining how this could be done? End goal is to have an api that runs some puppeteer tasks when called.
2 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 3/12/2024 in #questions
NextJS Server Cache?
Noticed some odd behaviour in my NextJS app where I have a simple table which uses data fetched via server action. I updated the data in my database, but the table still had the old data. I cleared storage, but the table still had the old data. Then I redeployed NextJS, and the new data was now visible. What's could the cause be & how can I fix it?
8 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 1/28/2024 in #questions
Top loader bar | App Router
Is there any good solution for a top loader progress bar for when navigating between pages using NextJS router? All these NProgress solutions are not good enough as they create a fake loading bar even when the page is already cached and immediately loaded by NextJS. This makes the entire app feel slow even though the pages are loading instantly. My plan was to create a custom solution but for that I need some means of knowing when the page has already been cached by NextJS, and if so, skip the loading bar. But I couldn't find anything on NextJS docs that help with achieving this. I feel like this is an essential feature for good UX. The current options I have are not very good: - Make the app feel slow due to fake loader bars on instantly loading pages - Add a disruptive loading.tsx in place of the loading content which is bad UX for data I expect to load quickly. - Not add any form of feedback and leave the user guessing whether features are working or not.
59 replies
TTCTheo's Typesafe Cult
Created by Y7YA on 1/15/2024 in #questions
Check if page has been cached
Trying to make a custom progress bar as there's no good solution for the app router, I've tried pretty much every relevant package. It's easy until I get to the part where I want to disable the progress bar on pages that have already been cached and load instantly. So I want to somehow get something along the lines of 
if(!pageIsCached) {
   loadProgress()
}
if(!pageIsCached) {
   loadProgress()
}
This is crucial for UX because if the user sees a loading bar on a site that's loading instantly it creates the illusion of the site being slow.
2 replies