기존에 무엇이 문제였나?흔히들 React같은 SPA에 대한 문제를 언급할때 단골처럼 나오는 몇가지 문제가 존재합니다.초기 렌더링이 오래걸린다 / 초기 렌더링시에 빈화면이 보인다 / SEO 친화적이지 않다 ... 등등그러면 우선 왜? 저런 문제가 발생하는지를 알면 좋을거같습니다.왜 SPA는 빈화면이 노출되는가리액트같은 SPA의 동작방식은 간단히 말하면서버에 요청 -> 서버에서 진입점등이 포함된 아주 간단한 html 응답클라이언트에서 html 파싱 -> 태그등을 만나면 js 번들 요청html 파싱 완료 DOM 구축 -> 화면 표시 -> 근데 표시할게 없음 (보통만 존재하므로,,)js 번들 도착 -> js를 이용하여 진입점으로부터 렌더링 -> 화면 표시 완료이제부터는 서버에게 별도 요청없이 js를 이용하여 ..
[참고: Server Actions - react.dev] Server Actions – ReactThe library for web and native user interfacesreact.dev[참고: Server Actions - next docs] Data Fetching: Server Actions and Mutations | Next.jsLearn how to handle form submissions and data mutations with Next.js.nextjs.org리액트 18에서 시험적으로 도입된 기능중에 지시문이 존재합니다Directives provide instructions to bundlers compatible with React Server Components. 지시문은..
[참고: Streaming] Routing: Loading UI and Streaming | Next.jsBuilt on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.nextjs.org Streaming allows you to break down the page's HTML into smaller chunks and progressively send those chunks from the server to the client. 일반적으로 서버 렌더링은 아래와 같은 과정으로 진행됩니다. 주어진 페이..
[참고: Server Components - next.js docs][참고: Server Components - react docs] React Server Components – ReactThe library for web and native user interfacesreact.dev Rendering: Server Components | Next.jsLearn how you can use React Server Components to render parts of your application on the server.nextjs.orgReact v18에서 도입되고, NextJs v13에서 기본 컴포넌트로 사용된 서버 컴포넌트에 대해서 알아보려합니다.Server Components are a new..
