Logic은 Jamstack 사이트에서 어디로 갈까요?

Jamstack 아키텍처에서 논리 코드에 가장 적합한 선택입니다

Jamstack 웹 사이트를 구축 할 때의 주요 문제는 논리 코드의 최상의 배치를 결정하는 것입니다. 이 기사는 음악 장소 웹 사이트의 예를 통해 4 가지 논리적 처리 방법을 탐색하고 각각의 장점과 단점을 분석합니다.

웹 사이트의 핵심 기능은 날짜별로 구별 해야하는 종료 및 다가오는 이벤트를 포함한 콘서트 목록을 제시하는 것이라고 가정하십시오.

해결책 1 : HTML을 직접 작성하십시오

가장 직접적인 방법은 모든 활동 정보를 HTML 파일에 직접 작성하는 것입니다. 이 방법은 간단하고 이해하기 쉽지만 불이익은 활동 정보를 업데이트 할 때마다 HTML 파일을 수동으로 수정하고 비효율적이고 오류가 발생하기 쉬운 재배치가 필요하다는 것입니다.

<h1 id="곧-출시-예정-Bill-s-Banjo-Night"> 곧 출시 예정 : Bill 's Banjo Night</h1>
<h1 id="종료-질의-년대-클래식-콘서트">종료 : 질의 70 년대 클래식 콘서트</h1>

솔루션 2 : 구성 중 구조화 된 데이터

보다 효율적인 방법은 구조화 된 데이터 (예 : Markdown 파일 또는 헤드리스 CMS)를 사용하여 활동 정보를 저장 한 다음 정적 웹 사이트 생성기 (예 : Eleventy)를 사용하여 빌드 프로세스 중 논리를 처리하는 것입니다. 이 방법을 사용하면 날짜 비교, API 호출 등과 같은 복잡한 논리 작업을 빌드 시간에 수행 할 수 있습니다.

예를 들어, 마크 다운 파일을 사용하여 활동을 나타냅니다.

 ---
제목 : Bill 's Banjo Night Date : 2020-09-02
---

활동 설명 ...

템플릿을 사용하여 건설 중 날짜를 판단합니다.

 { % if event.date> now %} %}
<h1 id="곧-출시-예정-event-title">곧 출시 예정 : {{event.title}}</h1>
{% 또 다른 %}
<h1 id="종료-event-title">종료 : {{event.title}}</h1>
{ % endif %}

그러나이 방법의 날짜 비교는 빌드 시간에 한 번만 수행됩니다. 이는 이벤트 후에 정보를 업데이트하기 위해 웹 사이트를 재건해야 함을 의미합니다. 빌드 프로세스를 자동화 할 수 있지만 자주 빌드는 비용을 증가시킬 수 있으며 여전히 데이터 지연의 위험이 있습니다.

솔루션 3 : 에지 컴퓨팅 처리 로직

Edge Computing Technology가 성숙함에 따라 CDN 계층에서 코드 처리 로직을 실행할 수 있습니다. 이를 통해 최신 데이터가 모든 요청을 가져오고 매우 높은 성능을 제공합니다. 그러나 Edge Computing Technology는 아직 인기가 없습니다.

 //이 코드 예제는 불완전합니다.
onrequest (요청) {
 const now = 새 날짜 ();
 eventList.foreach (event => {
  if (event.date> now) {
   event.upecome = true;
  }
 })
 const props = {
  이벤트 : 이벤트,
 }
 request.respondwith (200, render (props), {})
}

솔루션 4 : 런타임 처리 로직

마지막으로, 구조화 된 데이터를 프론트 엔드로 직접 전달한 다음 JavaScript를 사용하여 사용자 장치에서 논리 작업을 수행하여 DOM을 동적으로 업데이트 할 수 있습니다. 이 방법은 사용자의 언어 및 시간대에 따라 날짜가 표시되는 방법을 조정하고 정보가 항상 최신 상태인지 확인합니다.

예를 들어, 데이터 속성을 사용하여 날짜 정보를 저장합니다.

<h1 id="event-title"> {{event.title}}</h1>

그런 다음 날짜 비교에 JavaScript를 사용하십시오.

 함수 processEvents () {
 const now = 새로운 날짜 ()
 events.foreach (event => {
  const eventDate = 새 날짜 (event.getAttribute ( 'data-date'))
  if (eventDate> now) {
    event.classlist.add ( '곧')
  } 또 다른 {
    event.classlist.add ( 'past')
  }
 })
}

결론 : 논리적 위치 선택은 특정 요구 사항에 따라 다릅니다

선택할 논리적 처리 방법은 특정 요구 사항에 따라 다릅니다. 정적 컨텐츠의 경우 HTML을 직접 작성하거나 빌드 타임 처리 만 할 수 있습니다. 자주 변경되는 콘텐츠의 경우 CMS 및 빌드 타임 처리를 사용하는 것이 좋습니다. 높은 실시간 성능이 필요한 컨텐츠의 경우 에지 컴퓨팅 또는 런타임 처리를 고려해야합니다. 가장 적절한 솔루션을 선택하기 위해 효율성, 비용 및 데이터 실질 정상과 같은 요소를 평가해야합니다.

위 내용은 Logic은 Jamstack 사이트에서 어디로 갈까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!