Trả lời một số câu hỏi về Nextjs

Xin chào mọi người lại là Slao đây
Sau đây mình sẽ trả lời một số câu hỏi có liên quan về Nextjs

1. How To Read URL Params in a Client Component?
2. How To Read URL Params in a Page File?
3. Is it Possible to Render a Client Component in a Server Component?
4. How To Read URL Params in a Server Component?
5. Why Doesn't searchParams Exist in Next.js Layout Files?

How To Read URL Params in a Client Component?

Nếu bạn cần đọc pathname hoặc query params từ URL trong Client Component thì bạn có thể sử dụng usePathname hoặc là useSearchParams như sau

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

const ClientComponent({ children, href }) {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const search = searchParams.get('search')

  return (
    <div>Next.js usePathname and useSearchParams example</div>
    <div>{pathname}</div>
    <div>{search}</div>
  )
}

export default ClientComponent

để điều hướng thì có thể dùng useRouter

'use client'

import { useRouter } from 'next/navigation'

const ClientComponent({ children }) {
  const router = useRouter()

  const handleClick = () => {
    router.push('someUrl')
  }

  return (
    <div onClick={handleClick}>Click me</div>
  )
}

export default ClientComponent

How To Read URL Params in a Page File?

Các tham số thường được truyền tự động như là props ở các page component. Bạn có thể đơn giản cung cấp prop cho nó

const PageComponent({ params, searchParams }) {
  const { slug } = params

  return <div>Next.js URL params in page.tsx file</div>
}

export default PageComponent

Is it Possible to Render a Client Component in a Server Component?

Hoàn toàn có thể render Client component trong Server component. Tất cả Props truyền từ Client component phải được xử lí được.Thay vào đó dữ liệu mà không thể xử lí được từ bên trong Client component

How To Read URL Params in a Server Component?

Trong Server Component, không phải là Page Component, bạn có thể lấy URL params bằng cách truyền dới dạng props.

Quan trọng là phải nhớ rằng Server Component không phải là thành phần page file component và không được làm mới trong quá trình điều hướng. Vì lí do đó phải cần thận khi sử dụng thông tin từ URL ở Server Component vì các thông só URL sẽ outdated khi điều hướng

Why Doesn't searchParams Exist in Next.js Layout Files?

SearchParams chỉ có sẵn trong các Page Files. Page Files sẽ luôn re-render khi mà người dùng điều hướng giữa 2 trang. Vì component re-renders khi url thay đổi, chúng ta có thể biết chắc rằng URL Params được truyền đã được cập nhật.

Mục đích của Layout Component là tránh render không cần thiết và chứa các thành phần static của giao điện người dùng không được cập nhật khi mà người dùng điều hướng giữa các trang. Do đó thành phần Layout Component chỉ re-render khi người dùng điều hướng đến một thành phần khác của màn hình nơi nó không hiển thị. Ở trong code thì nó có nghĩa là điều hướng giữa 2 trang không chia sẻ chung Layout File

Thực tế điều này có nghĩa là URl sẽ thay đổi thường xuyên hơn so với Layout File Renders, và nếu chúng ta đọc các thông số URL trong Layout Component thì compoennt sẽ không biết khi nào thông số url được cập nhật. Nhớ rằng Layout File là server component và được renđẻ thành HTML khi nạp lần đầu tiên và sau đó lưu trong bộ nhớ cache trên client nên nó sẽ không bao giờ phải re-render lại