# React Server Components (React / Next.js)

> สถาปัตยกรรม RSC, คอมโพเนนต์เซิร์ฟเวอร์ vs ไคลเอนต์, การซีเรียลไลเซชัน, สตรีมมิ่ง, ขอบเขต Suspense

- 26 คำถามสัมภาษณ์
- Senior
- [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md)

## 1. React Server Component คืออะไร?

**คำตอบ**

Server Components คือ React component ที่รันเฉพาะบนเซิร์ฟเวอร์และไม่ถูกส่งไปยัง client เลย ต่างจาก component ทั่วไป ไม่จำเป็นต้อง hydrate ฝั่ง client ซึ่งช่วยลดขนาด JavaScript bundle ได้อย่างมาก สามารถเข้าถึงทรัพยากร backend (ฐานข้อมูล, ระบบไฟล์) โดยตรงโดยไม่เปิดเผย secret หรือ API key

## 2. วิธีประกาศ Client Component ใน React คืออะไร?

**คำตอบ**

directive 'use client' ที่วางไว้ที่ด้านบนของไฟล์ระบุว่า component และ child ที่ import มาทั้งหมดเป็น Client Components directive นี้ทำเครื่องหมายขอบเขตระหว่างโค้ด server และ client หากไม่มี directive นี้ component จะเป็น Server Components โดยค่าเริ่มต้นใน framework ที่รองรับ RSC เช่น Next.js App Router

## 3. ความแตกต่างหลักระหว่าง Server และ Client Components คืออะไร?

**คำตอบ**

Server Components รันบนเซิร์ฟเวอร์และโค้ดไม่เคยถูกส่งไปยัง client ในขณะที่ Client Components ถูกส่งไปยังเบราว์เซอร์และต้องใช้ JavaScript สำหรับการโต้ตอบ ความแตกต่างพื้นฐานนี้ส่งผลต่อการเข้าถึงทรัพยากร ขนาด bundle และความสามารถในการโต้ตอบ Server Components ไม่สามารถใช้ React hook หรือจัดการ event ของผู้ใช้ได้

## มีอีก 23 คำถาม

- React hook ใดที่ใช้ได้ใน Server Component?
- วิธีดึงข้อมูลใน Server Component คืออะไร?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React / Next.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior
- [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior
- [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior
- [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior
- [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูลและ API](https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api.md): 20 คำถาม, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack.md): 20 คำถาม, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level
- [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level
- [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level
- [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level
- [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level
- [API Routes ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 คำถาม, Mid-Level
- [Metadata & SEO ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 คำถาม, Mid-Level
- [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level
- [การทดสอบ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-testing.md): 20 คำถาม, Mid-Level
- [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior
- [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior
- [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior
- [ฟีเจอร์ขั้นสูงของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 คำถาม, Senior
- [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 คำถาม, Senior
- [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior
- [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components