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

Django Developer
Next.js mặc định sẽ tối ưu mọi component trong dự án với SSR, tuy nhiên thỉnh thoảng ta vẫn cần tương tác với phía client để nâng cao trải nghiệm cho người dùng.

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

Công nghệ được nhắc đến trong bài viết này

Tên Công NghệPhiên BảnPhát Hành
React18--
Next.js13--
1 phút đọc·711 lượt xem·