TTFB 최적화 가이드

How to make your web page faster before it even loads | Product Blog • Sentry

Understand what happens before your web page loads to optimize your web page for better performance. Learn more about how to make your web page faster here.

심윤섭: TTFB를 어떻게 측정하는지, 그리고 어떤 방식으로 TTFB 속도를 빠르게 하는지 설명하는 글입니다. web.dev팀에서 제공하는 성능 최적화 배우기로 대부분 상황에서의 성능 이슈를 해결할 수 있습니다. 하지만 TTFB를 최적화하는 방법은 상황에 따라 갈릴 수 있는데, 이 글을 통해 대부분의 경우를 해결할 수 있을겁니다. 물론 waterfall이 발생하는 지점이나 캐시할 지점 찾는 것은 본인이 해야겠지만요.

SSR 렌더링 벤치마크

An SSR Performance Showdown

💡 Note: In the first iteration of this benchmark, we made a few mistakes, summarized in this tweet by Theo Browne . We'd like to first apologize for these errors, and to sincerely thank Rich Harris, Ryan Carniato, Dan Abramov, Balázs Németh and Domi...

심윤섭: 복잡한 계산이 들어있는 렌더링을 얼마나 빠르게 반환할 수 있냐를 측정한 재밌는 벤치마크입니다. React가 좋지 않는 성능을 가지고 있는 것은 많은 글에서 파악할 수 있지만 Vue가 좋은 성능을 가졌다는것은 의외네요. 하지만 생태계의 성숙도와 벤치마크는 상황에 따라 크게 갈리므로 선택은 본인에게 있습니다 :)

김대관: SSR의 성능이 뛰어나지 않다고 해서 React를 버리고 Vue가 더 좋다고 Vue가 바로 대체되지는 않을 것 입니다. 성능적으로 참고한다면 좋은 내용이 될 거라고 생각합니다.

Compound 패턴 잘 만들기

Multipart Namespace Components: Addressing RSC and Dot Notation Issues | isBatak

A statically generated blog example using Next.js and Markdown.

심윤섭: Compound 패턴 컴포넌트를 만들 경우 여러 패턴을 통해 export하게 되는데, export/import 방식을 제대로 하지 않으면 여러가지 문제에 부딫힐 수 있다는 글입니다. Tree shaking은 프론트엔드에서 중요한 기술이므로 무엇인지 확실하게 인지하고 잘 사용하시길 바랍니다(Tree shaking이 뭔데).

`blocking="render"`가 하는 일

blocking=render: Why would you do that?! – Harry Roberts – Web Performance Consultant

Why on earth would you make something render-blocking?!

심윤섭: 아직 모던 브라우저 전체에 적용되지 않았지만 곧 적용될 blocking="render"가 무엇인지 알아보고 언제 브라우저가 하는 일을 차단하는지와 함께 알아보는 글입니다. 아직 모던 브라우저에 모두 구현되지 않았지만, parsing 차단과 rendering 차단을 알아보는 간단한 글입니다. <script>의 작동방식도 같이 보시는 것을 추천드립니다.

JS 컴파일 도구를 만들면서 JS 엔진 알아보기

Compilation of JavaScript to Wasm, Part 2: Ahead-of-Time vs. JIT

JS 컴파일 도구를 만드는 과정을 설명한 글이지만 AOT와 JIT의 차이점과 JS의 특성 중 하나인 인라인 캐시를 엿볼 수 있으므로 관심있는 사람은 보셨으면 좋겠네요. JS 엔진의 JS 실행 방식에 대한 설명은 JSConf의 영상을 먼저 보시면 쉽게 다가갈 수 있습니다.

(런타임)CSS-in-JS는 왜 느린가요?

Why is CSS-in-JS slow? | Playful Programming

If you've worked with frameworks like React, Angular, or Vue in the past you'll likely have used (or heard of) a CSS-in-JS solution like Styled Com...

이 글은 벤치마크보다는 왜 CSS-in-JS가 느린지 구조를 통해 설명하는 글입니다. 이전에 소개했던 벤치마크(SSR에서 Styled Components는 진짜 느리다.)도 다시 보시면 좋습니다.

RSC와 에러핸들링

Error handling and retry with React Server Components

React Server Components can throw errors. Here's how to handle and recover from them

react-error-boundary에서 FallbackComponent에 주어지는 props를 활용해서 React Server Components에서 발생한 에러를 다시 시도하는 방식을 소개합니다. RSC에 관련된 예제가 아니더라도 <ErrorBoundary>를 잘 활용하는 방법을 소개하니 한 번 가볍게 보시길 추천합니다.