ASP.NET Core : asp-append-version 기능

 

ASP.NET Core : asp-append-version 기능

일반적으로 웹사이트를 인터랙티브하고 동적으로 만들기 위해 CSS, 이미지, JS 파일과 같은 정적 파일을 사용합니다.

하지만 CSS, JS 또는 이미지와 같은 파일을 업데이트할 때 브라우저에 가장 오래된 파일이 아닌 최신 파일을 가져오도록 지시해야 합니다.

그리고 사용자가 css, js 또는 이미지 파일을 변경/업데이트할 때마다 매번 전체 새로고침을 수행하지 않기를 원합니다.

이전에는 아래와 같이 사용자가 전체 새로 고침을 하거나 정말 귀찮은 Ctrl + F5 또는 Ctrl + R을 사용하지 않고도 가능한 옵션이 많이 있었습니다.

 

• 브라우저에서 이미지가 업데이트되도록 이미지 파일 이름 변경하기
• js, css 또는 이미지 URL 뒤에 임의의 문자열을 추가합니다.

좋은 소식은 ASP.NET Core에 이 문제를 해결할 수 있는 기능이 내장되어 있다는 것입니다. ASP.NET Core는 각 정적 파일의 버전이 변경될 때마다 URL에 새로운 버전 매개 변수를 추가합니다. 브라우저는 URL이 변경되었기 때문에 이전 캐시를 사용하지 않고 새 파일을 다운로드하게 됩니다.

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

<script src="~/js/site.js" asp-append-version="true"></script>

이제 궁금한 것은 실제로 어떤 기능을 하느냐는 것입니다. 한 번 살펴봅시다.
 
브라우저에서 페이지를 렌더링하거나 실행할 때 검사 요소를 사용하거나 특정 브라우저의 소스 코드 기능을 확인하면 아래 HTML 코드를 볼 수 있습니다. 

 

<link rel="stylesheet" href="/css/site.css?v=AAs5qCYR2ja7e8QIduN1jQ8eMcls-cPxNYUozN3TJE0" />    
<script src="/js/site.js?v=NO2z9yI9csNxHrDHIeTBBfyARw3PX_xnFa0bz3RgnE4"></script>

 

여기에서는 site.css 및 site.js 파일 뒤에 임의의 문자열에 불과한 추가 텍스트가 추가되어 있음을 분명히 알 수 있습니다. 이제 위 파일에서 무언가를 변경하고 페이지를 다시 실행해 보겠습니다. 이 페이지의 View 소스를 살펴봅시다.

 

<link rel="stylesheet" href="/css/site.css?v=rwgRWCjxemznsx7wgNx5PbMO1EictA4Dd0SjiW0S90g" />

<script src="/js/site.js?v=SlFeIBqpCcjHTZMNxHJQvKTA9jUK8WF4c7cbl-LwYoE"></script>

 

이제 위 파일의 내용을 변경하거나 업데이트하고 페이지를 다시 실행하면 각 파일 이름 뒤에 완전히 다른 임의의 문자열이 추가되어 브라우저에 이전 파일이 아닌 업데이트된 파일을 사용하도록 지시하는 마법을 볼 수 있습니다. 

 

 
따라서 이제 더 이상 전체 새로 고침을 위해 Ctrl + F5 또는 Ctrl + R 을 사용할 필요가 없습니다. 이 추가 속성을 사용하면 브라우저에서 CSS, JS 또는 이미지 파일에 관계없이 항상 업데이트된 콘텐츠를 사용하도록 지시할 수 있습니다. 

 

asp-append-version 은 ASP.NET Core에서 사용되는 Razor 페이지 또는 뷰 파일에서 정적 파일의 캐싱을 관리하는 데 도움을 주는 기능입니다. 버전 매개 변수를 정적 파일 URL에 추가하여 브라우저가 파일 버전이 변경되었는지 확인하고 필요한 경우 캐시를 업데이트할 수 있게 합니다.