Rishi BakshiforRishi Bakshi Blogrishibakshi.hashnode.dev·Oct 10, 2024Mastering Loading States in Next.js: Effective Use of Suspense and loading.tsxWhen dealing with server components and fetching data in Next.js, a common mistake is neglecting to handle the loading state effectively. Imagine you're loading product data in a server component, and while the API request is being processed, the pag...Discuss·12 likes·40 readsYou Don't Know Next.jsNext.js
Jamie Barlowjamiebarlow-blog.vercel.app·Sep 28, 2024Route-level Suspense with React RouterRoute vs Component-level Suspense - what does our app need? In my previous post, I addressed managing loading states at the component level using React Suspense. But it’s important to note that there are potentially other ways to implement our error ...Discusssuspense
고라니드로koranidro.hashnode.dev·Sep 3, 2024[React] 변화의 물결, 동시성 렌더링이 포스트는 React 버전 18.3.1을 기준으로 합니다. 동시성 렌더링은 18 버전부터 정식 도입된 새로운 메커니즘입니다. 이는 아직 불완전하지만, 많은 가능성을 보여주었습니다. Suspense, useDeferredValue 등이 그 결과물이지요. 하지만 그와 동시에 이전에 없던 많은 문제를 불러왔습니다. 이번 포스트에서는 이것이 어떻게 동작하고, 또 어느 부분이 문제가 되는지 알아보도록 하겠습니다. 어떻게 동작하는가 동시성 적용에 가장...Discuss·31 readsconcurrent-rendering
고라니드로koranidro.hashnode.dev·Aug 20, 2024[React] 당신은 상태를 필요로 하지 않을 것입니다. #3 - 비동기(with. Suspense) 편이 포스트는 React 버전 18.3.1을 기준으로 합니다. 파생 상태의 유형이 Promise인 경우엔 어떻게 해야 할까요? 안타깝게도 클라이언트 측에서는 비동기 컴포넌트가 지원되지 않습니다. 따라서 useState와 useEffect를 함께 사용하여 이를 해결해 왔습니다. 하지만 Suspense의 등장으로 이를 해결할 수 있게 되었습니다. <Suspense fallback={<div>로드 중...</div>}> <Fulfilled p...Discuss·39 reads[React] 당신은 상태를 필요로 하지 않을 것입니다.React
Nazeeh Vahoranazeeh.hashnode.dev·Dec 4, 2023Exploring the Power of React Server Components and React SuspenseReact and Next.js have launched many updates this year, and among them, React Server Components and React Suspense have sparked significant discussion in the developer community. If you're not yet familiar, React Server Components allow for more effi...Discuss·1 likeNext.js
Shruti Shreyasicontagious.hashnode.dev·Oct 23, 2023Optimising React Component Rendering Performance: A Comprehensive GuideIn the fast-paced world of web development, performance is key. Users expect responsive, smooth, and efficient web applications. In the realm of React, a popular JavaScript library for building user interfaces, optimizing component rendering performa...Discuss·10 likesReact-suspense
Charles Ilocharlesik.hashnode.dev·Oct 10, 2023Embracing Asynchronicity with React SuspenseIn the world of web development, delivering a seamless user experience is paramount. As developers, we strive to create applications that not only function flawlessly but also feel smooth and responsive to the user. One of the challenges we often fac...Discuss·42 readsReact
Mohamed Zhiouamohamedzhioua.hashnode.dev·Sep 19, 2023What is Streaming in React and Next Js? SSR, Performance, Hydration, Suspense | In-Depth AnalysisWhat is Server-Side Rendering? Server-Side Rendering (SSR) is a crucial technique in web development that enhances user experiences by optimizing how web pages are loaded and displayed. At its core, SSR ensures that web pages are efficiently rendered...Discuss·168 readsNextJSNext.js
Rachel Tomiracheltomi.hashnode.dev·Jul 26, 2023Boost Your App Performance with React Lazy and SuspenseReact, as a component-based library, has many advantages, like reusability and maintainability, but also has potential disadvantages, such as unnecessary loading of unused components and large bundle size. When building React applications, especially...Discuss·131 readsReactReact.lazy
José Hortajoshhortt.hashnode.dev·Apr 26, 2023How Next.js 13's CSS modules & Loading State Feature Can Improve User ExperienceIn this series, we’re continuing through the basics of learning the new features of the static site generator, Next.js 13. Introduction In the previous tutorials, we learned how we can construct pages and layouts in the new Next.js 13 app directory, ...Discuss·10 likes·220 readsCSS Modules
![[React] 변화의 물결, 동시성 렌더링](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/UYsBCu9RP3Y/upload/7d355029200c26312ade4b31e5522c85.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[React] 당신은 상태를 필요로 하지 않을 것입니다. #3 - 비동기(with. Suspense) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/UYsBCu9RP3Y/upload/3f9c08b8e581915a7f5a491b6b2ff46c.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
