X2BEE headless Storefront : Next.js & Tailwind CSS

Headless & Composable E-Commerce

Next.js Conf 2023 메인 발표 섹션 중 하나 → BigCommerce

https://youtu.be/EtjQoxNcnc4?list=PLBnKlKpPeagl57K9bCw_IXShWQXePnXjY

 

내용 : BigCommerce에서 Next.js로 headless storefront를 개발 중이다.

Head도 front라는 의미, Storefront도 front라는 의미.

이 의미를 알기 위해서는 headless라는 용어의 유래를 살펴보아야 한다.

---

Headless E-commerce란 무엇인가?

사전적 의미: frontend 없음 →  용어 오해 → front framework에 '상관없는' 뜻이 더 부합

용어의 유래: 약10년전 'Headless CMS(Content Management System)'에서 유래 

통용되는 Headless의 진짜 뜻 : Frontend와 Backend가 분리되어 de-coupling 된 "아키텍쳐" 

 

 

MACH architecture

용어의 유래: 약10년전 Headless e-commerce  →   MSA(모듈화)와 Cloud(Scalability) 서비스 활성화 → 최근에 생김

X2BEE도 MSA 구조

 

 

 

 

 

Composable E-commerce란 무엇인가?

의미: 레고처럼 블록을 합치는 것 

Next.js Conf. 2023 - Sam Selikokff

 

참고: A.I.와 결합해 초개인화까지 Composable E-commerce라고도 함

https://commercetools.com/blog/how-to-implement-hyper-personalization-with-composable-commerce 

 

키워드 :  모듈화(Modularity)를 통한 빠른(Agility) 커스터마이징(Customization)

 

Headless Storefront (BigCommerce)

Shopify도 사용중

---

CSR vs SSR vs SSG vs ISR

Next.js 버전 14 : 3가지 중 하나는 Partial Pre-rendering

공식문서 : Partial Prerendering은 수년간 SSR, SSG, ISR의 연구와 개발의 결과다.

→ CSR vs SSR vs SSG vs ISR 이해부터 필요

 

CSR (Client-side Rendering)

장점: 단점 빼고 다

단점:

   1. SEO 취약

   2. 초기 페이지 로딩 느림

 

SSR (Server-side Rendering)

장점 :

   1. SEO 최적화

   2. 초기 페이지 로딩 빠름

 

단점 : 장점 빼고 다

 

SSG (Static Site Generation)

ISR (Incremental Static Regeneration)

 

BigCommerce 코드 예시

await client.addCartLineItem(cartId, {
  lineItems: [
    {
      productEntityId,
      quantity: 1,
    },
  ]
});

revalidateTag('cart');

return;

 

결론

 

---

1. SEO 최적화의 중요성

 

직접 유입 + 자연 유입 = 86

SEMRush 2020

 

구매 전환율은 자연 유입이 가장 높다

 

 

이유 :  자기 주도적 검색  vs. 광고 클릭

 

---

2. 로딩 시간과 매출

Yahoo가 로딩 시간 0.4초 줄임 →  방문자 9% 증가

출처: https://www.websitebuilderexpert.com/building-websites/website-load-time-statistics/

 

Amazon.com의 로딩 시간이 1초가 느려지면 매출 1조원 감소,

Amazon.com의 로딩 시간이 0.1초 느려질 때마다 매출이 1% 감소할 것.

출처: https://www.webuters.com/the-high-cost-of-slow-load-times-in-e-commerce

 

SEO 점수 포함 웹 사이트 성능 테스트

PageSpeedInsights: https://pagespeed.web.dev/ 

 

 

rstore 반응형 시연

---

Frontend Framework의 종류

현재 3대장이지만 SvelteKit가 3위 위협 중

---

Frontend Framework Trend

SimlarTech.com

전세계 158개국에서 React 기반이 우세

중국, 태국 벨라루스 3개국에서만 Vue가 우세

 

 

StateOfJS

2022년말 기준

 

 

 

Typescript vs. Javascript

 

---

X2BEE Headless Storefront w/ Next.js

---

Tailwind CSS

1. Utility classes : 사전에 정의된 클래스 

 

 

 

px → rem의 중요성

rem으로 코딩시 빠르게 해결 가능

html {
  font-size: 62.5%;    /* 10px에 해당 */
}

@media screen and (max-width:370px) {
  html {
    font-size: 58%;   /* 9.28px에 해당 */
  }
}

 

Tailwind CSS의 utility class → rem을 작성 → CSS best practice 계승

 

2. Mobile First

Statista 2022년 자료

 

@media (max-width:)  vs. (min-width)

Tailwind는 min-width 전략

예시: 

<div class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  Responsive text size
</div>

 

 

 CSS는 퍼블리셔가?  → 외국은 publisher라는 단어(X) → 기능에, component에 녹아내려면 web developer가. 

   개발자 + 퍼블리셔  = 개블리셔

   디자이너 + 개발자 = 개자이너

 

---

[책] Refactoring UI - Adam Wathan & Steve Schoger

 

Adam Wathan : 풀스택 개발자

Steve Schoger : 디자이너

 

주요 내용

1. Layout은 나중에, 기능부터 시작 - web app은 기능(feature)의 집합 → 껍데기부터가 아닌 기능부터 구현하라.

 

2. Detail은 나중에, 선택권을 한정시켜라

 

Utility class 예시:

 

HSL 좌표계에서 같은 hue끼리 11단계:

 

---

X2BEE UI Library

Next.js Conf. 2023의 BigCommerce

 

X2BEE UI Library

npx @x2bee/ui@latest card

 

사용 예제:

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

const Test = () => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <p>Card Footer</p>
      </CardFooter>
    </Card>
  );
};

export default Test;

 

 

---

Conclusion