서버 액션을 활용한 점진적 향상

점진적 향상은 작동하는 HTML 기본 동작에서 시작해 그 위에 JavaScript 기능을 덧붙이는 웹 개발 전략입니다. 핵심 기능은 JavaScript를 비활성화했거나 연결 속도가 느리거나 보조 기술을 사용하는 사용자를 포함한 모든 사용자에게 작동하며, JavaScript를 활성화한 사용자는 향상된 경험을 얻습니다.

action={serverAction}이 설정된 양식은 JavaScript가 없어도 전체 페이지 HTML POST로 작동합니다. 브라우저가 양식을 제출하면 서버가 액션을 실행하고 업데이트된 HTML 페이지를 반환합니다. 이는 1995년부터 웹 양식을 작동시켜 온 것과 동일한 메커니즘이며, 리액트의 서버 액션은 설계상 이 방식과 호환됩니다.

JavaScript가 없으면 검증은 서버에서 이루어져야 합니다. 서버 액션이 양식 데이터를 검증하고 검증에 실패하면 오류 상태를 반환합니다. 서버는 오류 메시지가 HTML에 포함된 페이지를 다시 렌더링합니다. 사용자는 클라이언트 측 JavaScript가 전혀 실행되지 않아도 오류를 확인할 수 있습니다.

리액트가 페이지를 하이드레이션하면 양식 제출을 가로채 전체 페이지 POST가 아니라 비동기 서버 액션 호출로 처리합니다. 페이지를 다시 불러오지 않고 제자리에서 업데이트되며, 사용자에게는 눈에 보이는 대기 상태와 낙관적 사용자 인터페이스가 제공됩니다. 이 모든 작업은 기존 액션이나 양식 구조를 변경하지 않고 이루어집니다.

서버는 HTML에 초기 상태를 포함한 양식을 렌더링합니다. 리액트가 하이드레이션할 때 깜박임이나 불일치를 일으키지 않고 해당 초기 상태를 이어받습니다. useActionState 훅은 서버에서 렌더링된 초기 상태와 클라이언트 하이드레이션을 깔끔하게 조정하도록 설계되었습니다.

리액트 전환을 사용하면 서버 액션 호출 중에도 사용자 인터페이스를 계속 조작할 수 있습니다. 양식 제출을 전환으로 감싸면 리액트가 서버 왕복 통신의 우선순위를 낮추고 페이지의 응답성을 유지할 수 있습니다. 덕분에 JavaScript로 향상된 경험이 전체 페이지를 다시 불러오는 것보다 훨씬 빠르게 느껴집니다.

JavaScript가 없으면 사용자가 제출을 클릭하고, 브라우저가 전체 POST 요청을 보내며, 서버가 새 HTML 페이지로 응답합니다. 이때 잠시 흰 화면이 나타나고 스크롤 위치가 초기화됩니다. JavaScript가 있으면 리액트가 요청을 가로채고 액션이 비동기적으로 실행되며, 페이지에서 변경된 부분만 제자리에서 업데이트됩니다. 흰 화면과 스크롤 위치 초기화가 모두 없습니다.

점진적 향상은 JavaScript를 실행하지 않을 수도 있는 검색 엔진 크롤러에 도움이 됩니다. 전체 페이지 HTML 양식으로 작동하는 양식 기반 검색 또는 필터 페이지는 색인하고 크롤링할 수 있습니다. 서버에서 렌더링된 결과를 사용하면 크롤러가 JavaScript를 기다리는 빈 요소가 아니라 실제 콘텐츠를 확인할 수 있습니다.

스크린 리더와 보조 기술은 의미가 명확한 HTML에서 가장 잘 작동합니다. 점진적으로 향상된 양식은 보조 기술이 본래 이해할 수 있는 실제 <form>, <input>, <button> 요소를 사용합니다. JavaScript는 오류를 알리기 위한 ARIA 라이브 영역을 추가하여 접근성 있는 기본 동작을 대체하지 않고 향상합니다.

신뢰할 수 없는 네트워크에서는 JavaScript 묶음이 로드되지 않을 수 있습니다. 점진적으로 향상된 페이지는 기본 사용 사례에 대해 계속 작동합니다. 이러한 복원력은 통신 범위가 좋지 않은 지역에서 모바일 연결을 사용하는 사용자나 네트워크 상태가 크게 달라지는 지역의 사용자에게 특히 중요합니다.

점진적 향상은 회원가입, 연락처, 검색, 결제처럼 외부 사용자에게 제공되는 양식에 가장 큰 가치를 제공합니다. 복잡한 상호작용이 필요한 내부 대시보드에는 필요하지 않을 수 있습니다. 마케팅 페이지, 전자 상거래, 사용자 온보딩 과정처럼 최대한 많은 사용자에게 도달하고 안정적으로 작동하는 것이 중요한 곳에 의도적으로 적용하시기 바랍니다.

점진적 향상의 핵심 원칙은 무엇입니까?

점진적 향상이란 JavaScript 없이도 양식이 일반 HTML POST로 작동한다는 뜻입니다. 서버 액션은 이를 기본적으로 지원합니다. action={serverAction}을 사용하면 전체 페이지 POST 제출이 활성화됩니다. 이후 리액트의 하이드레이션이 양식을 대기 상태를 포함한 비동기 제자리 업데이트 방식으로 향상합니다. 이 접근 방식은 풍부한 JavaScript 경험을 제공하면서도 접근성, 검색 엔진 최적화, 불안정한 연결을 사용하는 사용자에게 이점을 줍니다.