Remix.Run용 동적 링크

면책 조항으로 이것을 열고 싶습니다. 이것이 모범 사례인지 또는 우리가 할 수 있는 일인지는 모르겠지만 저와 제 유스 케이스에 효과가 있었고 정말 멋지다고 생각했습니다.

자, 이제 좋은 부분입니다. 내가 지금까지 정말 좋아했던 Remix에는 많은 작업을 수행하기 위해 내보낼 수 있는 몇 가지 기능이 있습니다. LoaderFunction 페이지를 로드하기 전에 서버측 가져오기를 수행합니다. ActionFunction 주로 양식 제출에 사용되는 게시물 요청을 처리합니다. MetaFunction는 메타 데이터를 처리하고 마지막으로 LinkFunction는 스타일시트, 스크립트 태그, 미리 로드 등을 추가합니다. 자세한 내용은 here을 참조하십시오.

내가 생각하는 문제는 내가 언급한 처음 세 개가 Remix 컨텍스트에 액세스할 수 있다는 것입니다. 따라서 이러한 기능에서 노드 요청, URL의 모든 매개변수 등에 액세스할 수 있습니다. 마지막 항목에서는 LinkFunction 액세스할 수 없습니다. 이제 그것은 나에게 의미가 있습니다. 해당 컨텍스트를 포함하면 전체 페이지 흐름이 느려지거나 스타일 깜박임이 발생할 수 있습니다. 확실하지 않습니다. LinkFunction에 Remix 컨텍스트가 포함되지 않은 이유에 대해 자세히 알아보기 위해 Github에서 토론을 시작할 수 있습니다.

그렇다면 데이터베이스 쿼리나 쿠키 값을 기반으로 하는 스타일시트를 포함해야 한다면 어떻게 될까요? 다행스럽게도 이 기사에서 그 방법을 알려드립니다.

Remix에서 모든 경로가 반응 구성 요소 및/또는 웹 사이트의 실제 페이지일 필요는 없습니다. 기본 내보내기 없이 로더 또는 작업(또는 둘 다)을 내보낼 수 있으며 API 끝점이 있습니다. 내 링크 함수 딜레마와 함께 이것을 시도해 봅시다...
root.tsx 파일에서 links라는 함수를 내보냅니다. 이를 통해 전체 응용 프로그램에 전역적으로 링크를 포함할 수 있습니다. 내 사용 사례에서는 사용자가 생성하고 해당 스타일도 로드해야 하는 내 데이터베이스에 저장된 테마가 있습니다.

// root.tsx
export function links() {
  return [
    { rel: "stylesheet", href: styles },
    { rel: "stylesheet", href: "/user-theme.css" },
  ];
}

user-theme[.]css.tsx라는 새 파일을 만듭니다. 대괄호 구문은 펑키해 보이지만 마침표를 벗어날 수 있는 방법입니다. robots[.]txt.tsx 및 sitemap[.]xml.tsx 파일에 대해 이 구문을 사용했는데 훌륭하게 작동합니다.

//user-theme[.].css
export const loader: LoaderFunction = async ({ request }) => {
  const { data, error } = await supabase.from("themes").select("*").maybeSingle();

  /**
   * data.styles looks like this...
   * {
   *   "--primary-color": "#hexvalue",
   *   "--secondary-color": "#hexvalue",
   *   ...
   * }
   */
  let cssString = "";
  if (data && data.styles) {
    const { styles } = data;
    const cssVars = Object.keys(styles).reduce((acc, key) => {
      return [
        ...acc,
        `${key}: ${styles[key]};`
      ];
    }, []).join("\n");

    cssString = `:root{${cssVars}}`
  }

  return new Response(cssString, {
    headers: {
      "Content-type": "text/css; charset=UTF-8",
    },
  });
};

그래서 그곳에서 많은 일이 일어나는 것처럼 보이지만 아주 간단합니다. 필요한 정보에 대해 데이터베이스를 쿼리한 다음 JSON을 css 문자열로 구문 분석합니다. 나는 css 변수를 사용하고 있으므로 그것들을 :root 선언에 주입하고 text/css 콘텐츠 유형과 함께 제공합니다.

그것은 그! 이제 데이터베이스 쿼리의 동적 CSS가 모든 서버 측 브라우저에서 볼 수 있습니다. 클라이언트 측 요청이 없으며 로드하는 동안 스타일이 이상하게 깜박이지 않습니다.

이 접근법에 대해 어떻게 생각하는지 알려주세요! 내 사용 사례가 데이터베이스 쿼리라는 것을 알고 있지만 요청 쿠키에 액세스하고 다크 모드 스타일시트와 실제로 원하는 모든 것을 반환할 수도 있습니다.