การเขียน search params รับค่าใน client กับ server component

SearchParams คืออะไรสำหรับ nextjs

ในโปรแกรมมิ่งเว็บจะมีอยู่เรื่องหนึ่งที่ทุกคนมักคนเจอไม่ช้าก็เร็วนั้นคือ Search Params หรือแปลเป็นไทยว่า "พารามิเตอร์การค้นหา" โดยมีลักษณะดังนี้

?foo=bar ในตำแหน่ง url ของเว็บ browser มักจะต่อท้าย domain หลัก และตามด้วยเครื่องหมาย "?" หรือเครื่องหมายปรัศนี เช่น

https://samiti.dev/?foo=bar

เราสามารถใช้ประโยชน์ได้สำหรับทำการรับข้อมูลจากช่อง Url โดยตรง เพราะอยู่เก็บอยู่ภายใต้ ค่าพารามิเตอร์ในรูปแบบคีย์-และค่าของข้อมูล (key-value) คีย์ก็ foo และค่าของคีย์นั้นคือ bar

ประโยชน์หลักคือ

1. ส่งค่า key-value ดังนั้นไปไหนก็ได้หน้าผ่าน url
2. ทำระบบแบ่งหน้า หรือ Pagination ช่วยทำให้ระบบแบ่งหน้าสมบูรณ์ คือส่งข้อมูลหน้าผ่านตัวแปล key-value เช่น ?p=12 เป็นต้น ทำให้รับค่าและนำข้อมูลเข้าไปค้นหาในฐานข้อมูล ได้ในขั้นตอนการเขียนโปรแกรม
3. ตัวคัดกรองค้นหา เพราะเมื่อเวลาค้นหาสิ่งต่าง ๆ เมื่อผู้ใช้คลิกปุ่ม ค่า key-value จะเป็นตัวกำหนดการค้นหา เช่น category อะไร ดังตัวอย่าง ?category=food เป็นต้น

searchParams จึงทำหน้าที่สำคัญของเว็บแอปก็คือ การส่งข้อมูลแบบไดนามิค ไปยังส่วนต่าง ๆ ของระบบผ่าน Url ได้โดยตรง

รูปแบบการดึงข้อมูลบน searchParams

1. แบบ Native JavaScript

const params = new URL("https://example.com/?name=Jonathan%20Smith&age=18")
  .searchParams;
const name = params.get("name");
const age = parseInt(params.get("age"));

console.log(`name: ${name}`); // name: Jonathan Smith
console.log(`age: ${age}`); // age: 18

2. แบบ nextjs ในรูปแบบนี้การที่จะดึงได้นั้นจะมีอยู่ 2 ระบบ คือ 1. ดึงภายใน Client Component และ 2. ดึงจาก Server Component

2.1 การดึงด้วย Client Component

// app/search-page/client-component-example/page.tsx
'use client';

import { useSearchParams } from 'next/navigation';

export default function ClientComponentExample() {
  const searchParams = useSearchParams();
  const query = searchParams?.get('query') || '';

  return (
    <div>
      <h1>Client Component</h1>
      <p>Search Query: {query}</p>
    </div>
  );
}

การดึงระบบนี้เป็นที่นิยมเพราะ NextJS มักนิยมใช้ Component ในฝั่ง Client หรือ CSR มากกว่า

2.2 การดึงด้วย Server Component

// app/search-page/server-component-example/page.tsx

interface ServerComponentExampleProps {
  searchParams: URLSearchParams;
}

export default function ServerComponentExample({
  searchParams,
}: ServerComponentExampleProps) {
  const query = searchParams.get('query') || '';

  return (
    <div>
      <h1>Server Component</h1>
      <p>Search Query: {query}</p>
    </div>
  );
}

ดูเหมือนว่าหลายคนอาจจะไม่คาดคิดว่าฝั่ง server ก็ใช้ได้ ซึ่งมีคำอธิบายก็คือแม้ว่า searchParams ใช้ได้เฉพาะ client นั้น ฝั่ง server ก็สามารถอ่านได้ ด้วยอาศัยการอ่านจาก object ที่ชื่อ new Url() นั้นทำให้เรารู้ว่าระหว่าง Render Serve Component object อย่าง URL ก็ถูกผ่านเข้าไปใน page.tsx ด้วยเช่นเดียวกัน ดังนั้นจึงไม่แปลกที่เราสามารถ ดึง ojbect ดังกล่าวเพื่อนำมาใช้งานได้

รายละเอียดเพิ่ม URL Object