Cách tắt chức năng SSR của Next.js

Bạn sẽ muốn tắt SSR nếu trang nào đó trong project không cần yêu cầu SEO hoặc phải đăng nhập mới vào xem được. Mẹo của bài này sẽ giúp bạn thực hiện nhanh thông qua việc viết thêm 1 component nhỏ.

Đầu tiên, tạo 1 file JS mới (ví dụ là NoSSR.js) với nội dung như sau:

import dynamic from 'next/dynamic'

const withNoSSR = (Component) => dynamic(
  () => Promise.resolve(Component),
  { ssr: false }
)

export default withNoSSR

Khi nào cần "ép" một trang chỉ cho phép client-side rendering thì làm như sau:

import withNoSSR from '../components/NoSSR'

function MyComp () {
    return <div>hello</div>
}

export default withNoSSR(MyComp)

BONUS: Trong Next.js 13 trở đi, xuất hiện thư mục app, lúc này bạn có thể thêm một dòng 'use client' ở trên cùng của 1 file JS để Next hiểu là chúng ta có sử dụng các thành phần thao tác phía client như là useEffect hoặc đón các sự kiện trong window của trình duyệt.

Tham khảo thêm tại đây: https://blog.appsignal.com/2022/11/02/whats-new-in-nextjs-13.html