[Next.js 13] 쿼리 파라미터에 한글을 입력할때 생기는 에러

현재 사이드 프로젝트로 Next.js13 / Typescript 프로젝트를 하고있습니다.

또한 Pirsma Client를 이용해 서버사이드 렌더링을 같이하고 있습니다.

 

검색 기능을 개발하다가 , URL의 쿼리 파라미터로 정보를 전달을 해서 필터처리를 하는데 여기서 URL의 파라미터

값이 영어가 아니라 한글일때 , url이 변경될때마다 페이지가 매번 새로고침이 되면서 , 클라이언트사이드 렌더링이

잘 안되었습니다. 

 

그리고 결정적인 에러는

 "Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point."

 

바로 구글에 검색을 해봤지만 정보가 그렇게 많지 않았습니다.

그치만 바로 빛 처럼 나타난 해결방법을 찾았습니다..ㅋㅋ

 

Refernce:

https://github.com/vercel/next.js/issues/48728

[NEXT-1258] Search parameters with Unicode characters cause the fetching of RSC payload to fail · Issue #48728 · vercel/next.j

 

Vercel의 nextjs 이슈 섹션에도 올라왔던 에러네요.

제가 해결한 코드를 직접보여주면서 설명하겠습니다.

 

'use client' 를 이용하여 클라이언트 사이드 렌더링 하는 코드 인데 , udpateQuery 쪽에서 URL 쿼리 파라미터로 정보를 전달해서

검색 및 필터 기능을 하는 역할입니다. query-string 라이브러리를 이용 했습니다.

 

기존에는 dogName 과 male의 값이 state 값 그대로 전달을 했었고 지금 보는 코드는 encodeURIComponent로 변환을 해서 파라미터를 전달하고있습니다. (처음에는 encodeURI 메소드를 이용했는데 구글링 해보니 encodeURIComponent 추천이 되고있더라구요)

 

 

1. 완전한 URL 인코딩: encodeURIComponent() 함수는 URI 구성 요소를 완전히 인코딩합니다. 즉, URL에 사용되는 모든 특수 문자를 인코딩합니다. 이에 비해 encodeURI() 함수는 일부 문자(예: 알파벳, 숫자, 대시, 언더스코어, 닷 등)는 인코딩하지 않습니다. URL에 특수 문자가 포함된 경우에도 encodeURIComponent() 함수를 사용하면 안전하게 인코딩할 수 있습니다.
2. 파라미터 값 처리: encodeURIComponent() 함수는 파라미터 값에도 적용됩니다. URL의 쿼리 문자열에서 파라미터 값에는 공백, 기호, 특수 문자가 포함될 수 있습니다. 이런 경우 encodeURIComponent() 함수를 사용하면 이러한 문자들이 안전하게 인코딩되어 전달됩니다.
3. URI 구성 요소 단위 인코딩: encodeURIComponent() 함수는 URI의 구성 요소(예: 쿼리 문자열, 해시(fragment) 등) 단위로 인코딩을 수행합니다. 이는 URI 구성 요소 간의 구분을 유지하면서 각 구성 요소를 인코딩할 수 있도록 합니다. encodeURI() 함수는 전체 URI를 인코딩하는 것이 아니기 때문에 URI 구성 요소 간의 구분이 흐트러질 수 있습니다.
   
   이렇다고 합니다 . 참고만 해주세요

 

근데 여기서 이제 Prisma를 이용해서 프론트에서 요청온 파라미터를 처리해줄 로직이 필요한데 , 프론트에서 파라미터를 보낸것이 encode 되어있기때문에 당연히 서버쪽에서는 파라미터를 decode를 해줘야합니다.

변환을 안해주면 encode 된값이 그대로 넘어오기 떄문에 에러를 발생시킵니다.

 

아래는 Prisma를 이용한 코드 입니다.

 

요약하자면

요청할 파라미터를 변환을 잘해주고 , 반면에 백엔드는 요청온 파라미터를 변환을 잘해주면 정상적으로 데이터 출력이 잘됩니다.

 

사실 이건 Next.js의 에러가 아니라 브라우저가 URL을 해석을 어떻게 하는지 잘 파악하고있었으면 에러해결이 수월했을거같습니다

아래는 브라우저가 URL의 파라미터 값으로 영어 의외의 문자가 들어왔을때의 경우 입니다.

 

브라우저는 일반적으로 URL의 파라미터 값으로 영어 이외의 문자(한글, 특수문자 등)가 포함되어 있을 때에도 정상적으로 해석할 수 있습니다.

 

URL은 ASCII 문자 집합을 기반으로 설계되어 있으며, URL의 다른 부분(프로토콜, 호스트, 경로 등)은 ASCII 이외의 문자를 포함할 수 있습니다.

 

URL에서 파라미터 값으로 한글이나 특수문자를 사용하는 경우, 일반적으로 브라우저는 해당 문자들을 URL 인코딩(encoding)하여 전송합니다. URL 인코딩은 URL에 사용할 수 없는 문자들을 특정 형식으로 인코딩하여 안전하게 전송할 수 있도록 하는 방법입니다. 인코딩된 문자는 웹 서버나 백엔드 애플리케이션이 수신하여 디코딩(decoding)하여 정상적으로 처리할 수 있습니다.

위에서 사용했던 encodeURIComponent() 함수를 사용하여 URL의 파라미터 값을 인코딩하면, 한글이나 특수문자는 URL에서 허용되는 형식으로 변환됩니다. 백엔드에서는 이 인코딩된 값을 디코딩하여 사용할 수 있습니다.

 

따라서 브라우저는 URL의 파라미터 값으로 영어 이외의 문자를 포함해도 해당 문자들을 인코딩하여 전송하고, 서버나 백엔드에서는 이를 디코딩하여 처리할 수 있습니다.