제8장: 복잡성의 갈림길 (2020-2025)

// 이 코드는 서버에서 실행되지만... export async function getServerSideProps() { const data = await db.query(...); // DB 로직 return { props: { data } }; } // 이 컴포넌트는 여전히 클라이언트로 전송됩니다 export default function Page({ data }) { return <div>{data.map(...)}</div> }

// Server Component - 클라이언트로 전송되지 않음 async function BlogPost({ id }) { const post = await db.posts.find(id); // 직접 DB 접근 const author = await db.users.find(post.authorId); return ( <article> <h1>{post.title}</h1> <Comments postId={id} /> {/* Client Component */} </article> ); }

// 이게 서버 컴포넌트인가요? function MyComponent() { return <div>Hello</div> } // 아니면 클라이언트 컴포넌트인가요? 'use client' // <- 이걸 붙여야 하나요? function MyComponent() { return <div>Hello</div> }

// React 방식 function DrumMachine() { const [isPlaying, setIsPlaying] = useState(false); useEffect(() => { // 언제 이게 실행되는지 예측하기 어렵습니다 }, [dependency1, dependency2, ...]); return ... } // Remix v3 방식 function DrumMachine() { playSound() { this.update(); // 명시적으로 업데이트를 제어 } return ... }

<!-- htmx 방식 --> <button hx-post="/clicked" hx-swap="outerHTML"> Click Me </button>

<!-- Turbo Frame --> <turbo-frame id="messages"> <%= render @messages %> </turbo-frame>