React Server Component의 Isomorphism에 대한 설명

Next.js+React Server Component 참조 설치가 나타나 손바닥으로 이동하면서 이해하는 노트입니다.
vercel/next-server-components: Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel.
이 글을 쓴 동기로 트위터만 봐도 React Server Component는 "서버 측으로 돌아가기", "SSR 결과에 대해dangerously SetInnerHtml만 진행하는 거지?"이런 반응이 있어서 오해를 풀고 싶었어요.
Introducing Zero-Bundle-Size React Server Components – React Blog

tl;dr

JSON Serial화된 서버의 결과 렌더링을 통해 고객에게 요청할 수 있습니다.서버 측 React Element은 조립하는 동안 서버(Node.js)의 API를 사용할 수 있기 때문에 매번 API를 설치할 필요가 없고 RPC에서 숨길 수 있다.클라이언트 서버 매핑
이것은 서버에서 실행되고 업데이트되는 비동기식 구성 요소이며 비교 대상은 Rails Hotwire, Phoenix LiveView와 같은 비동기식 View일 수 있습니다.

React Server Component의 목적

원래 수단은 하나인데 목적이 두 개나 섞여서 정리해야 한다.

서버 측에서 구축 사이즈를 무겁게 하는 라이브러리를 실행하고 결과만 되돌려줍니다.예를 들어markeed,prettier,babel 등

RPC를 통해 클라이언트 및 서버의 API 호출을 자연스럽게 숨기는 Isomorpish

기존에 리액트 엘리먼트는 함수 참조 등을 처리하기 위해 JSON이 직렬화할 수 없는 구조체였지만, 리액트 서버 Component는 고객에게 리액트 엘리먼트의 엄숙함을 요청할 수 있는 구조였다.그러나 JSON Serial화된 함수 등은 커밋할 수 없습니다.이벤트 처리 프로그램을 처리하려면 Server Component에 Center Component를 포함하여 재현하고 클라이언트에서 Hydration합니다.
next.js에서 확장된 전체 겹쳐진 프레임의blitz 등에서 유사한 실현이 있습니다.
blitz-js가 어떻게 서버의 함수 클라이언트에서 호출되었는지 조사했습니다

SSR 결과만 받는 HTML과 다름

*.server.js는 서버 측에 나타나지만 클라이언트 측의 구성 요소도 포함될 수 있다.클라이언트는 순수한 HTML이 아니라 React Element으로 수신하기 때문에 Hydration은 수신할 때 실행되고 JS의 논리 주입에서 React Component로 클라이언트에서 동적으로 진행된다.
Server Component*.client.js에서 확인할 수 있습니다.components/App.server.js 마운트App.server.js.

import React, { Suspense } from 'react'
import SearchField from './SearchField.client'
import Note from './Note.server'
import NoteList from './NoteList.server'
import AuthButton from './AuthButton.server'
import NoteSkeleton from './NoteSkeleton'
import NoteListSkeleton from './NoteListSkeleton'

export default function App({ selectedId, isEditing, searchText, login }) {
  return (
    <div className="container">
      <!-- 中略 -->
          <section className="sidebar-menu" role="menubar">
            <SearchField />
            <AuthButton login={login} noteId={null}>
              Add
            </AuthButton>
          </section>
          <nav>
            <Suspense fallback={<NoteListSkeleton />}>
              <NoteList searchText={searchText} />
            </Suspense>
          </nav>
        </section>
        <section className="col note-viewer">
          <Suspense fallback={<NoteSkeleton isEditing={isEditing} />}>
            <Note login={login} selectedId={selectedId} isEditing={isEditing} />
          </Suspense>
        </section>
      </div>
    </div>
  )
}

입력으로 JSON을 보내고 함수 프로세서 등을 처리하지 않는 React Element을 반환합니다.

구현된 isomorphism

예를 들어 RailsSearchField.client를 가져올 때 View에는 Active Record를 두드려서 SQL을 실행한 결과도 포함되어 있다.마찬가지로 React Server Component의 Element 어셈블리 프로세스는 노드입니다.js에서 진행되었기 때문에 서버 측의 기능을 충분히 사용할 수 있습니다.
얼마 전 넥스트.jsapp/views/index.erb에는Prism ORM을 두드리는 샘플이 적혀 있지만 Server Component에서hooks 패키지로 싸면 비슷한 글쓰기 스타일이 있습니다.

import type { GetServerSideProps } from "next";
import prisma from "../lib/prisma";

type Props = {
  count: number;
};

export const getServerSideProps: GetServerSideProps<Props> = async (ctx) => {
  const count = await prisma.user.count();
  return {
    props: {
      count,
    },
  };
};

export default function Index(props: Props) {
  return <div>user count: {props.count}</div>;
}

Next.js에서Preisma ORM 활용
첫 번째 시연getServerSideProps의 단점/react에서next-server-component는 실현되었지만 RPC 하나만 실현하면 참고 시스템의 API를 실현할 필요가 없다.참조 시스템의 리소스 참조는 Server Component 조립 프로세스에 결합되므로 클라이언트에 API로 노출될 필요가 없습니다.
그럼에도 불구하고 갱신 시스템은 별도로 실시해야 하고 갱신이 발생하면 서버 Component를 다시 가져와 그 결과를 React로 차분 갱신해야 한다.
읽기next-server-components/NoteEditor.client.js at master · vercel/next-server-components 후에는 Mardown이 업데이트되었을 때 캐시를 버리고 다시 가져와서 다시 미리 볼 수 있습니다.
이것은 서버의 state를 사용하여 클라이언트를 업데이트하는 비동기식 View입니다. 처음에 말했듯이 이 비교 대상은 Rails Hotwire 또는 그 출처인 Phoenix LiveView입니다.
hotwired/hotwire-rails: Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.
Phoenix.LiveView — Phoenix LiveView v0.15.3
Hotwire와 LiveView가 JS를 부정해 이뤄진 반면, React Server Component는 JS를 적극적으로 활용해 최적화와 워크플로우 개선을 한 결과 그렇게 이뤄졌다.Hotwire는 모든 접속을 웹소스켓으로 변경하는 광야의 시행을 추진하는 것으로, 운용에 어려움을 느껴 리액트 서버 Component 스스로 신장을 느꼈기 때문이다.클라이언트 서버에서 같은 언어의 장점이 매우 강하다.

앞으로 어떻게 될까

현재의 코드를 읽기만 하면 웹 플러그인의 사용 방법이 어려워지고 서버 설치부터 전용 선언의 생성을 참조해야 하기 때문에 익숙하지 않다.대부분 보일러판일 수 있어 앞으로 노드를 설정하지 않았다.js의 http-server의 단점으로 이동하는 코드를 만들 수 있죠.
이건 완전히 엉터리야, 넥스트.js에서 보여준 것은 React인 SSR 서버의 설치에 Next가 가장 많이 사용된다는 것이다.js이기 때문에 PHP보다 주류 페이스북 회사에서 개발한 넥스트.이것은 js 개발자 Vercel과 합작하여 개발한 정보라고 생각합니다.여기에 더해 페이스북 사내에서도 Server Component로 전환하려고 하지 않겠습니까?이런 느낌.experimental 창고에/api와 같은postgres의react-pg 잠금장치가 준비돼 있는데, 시위 행진에서 외부 서버로 향하는 isomorphic fetch는 외부 자원을 참고하는 것처럼 보이며 회사 내부에서 PHP 포트를 두드리는 정보다.
하지만 현재는 넥스트다.js에 설치되어 있지만 API Route, 특히 Next만 사용합니다.js로 편입되지 않았습니다.Next.js에서 설정 없이 사용할 수 있고 pg를Server Component로 간단하게 변환할 수 있습니다. 이것은 앞으로 가장 가능성이 있는 시나리오라고 생각합니다.
Next.js를 제외하고 웹 페이지 구축의 결과는 Node입니다.js 컨테이너로 마운트해서 디버깅하는 거 아니에요?