Các câu hỏi phỏng vấn Next.js

Các câu hỏi cơ bản và khái niệm

Khi tham gia phỏng vấn liên quan đến Next.js, nhà tuyển dụng thường quan tâm đến sự hiểu biết của bạn về các khái niệm cơ bản của framework này. Một trong những điểm cần nắm rõ là sự khác biệt giữa SSR (Server-Side Rendering), SSG (Static Site Generation), và CSR (Client-Side Rendering).

• SSR: Render tại server, giúp tải trang nhanh hơn và cải thiện SEO. Ví dụ, khi bạn gọi đến một trang chủ, server sẽ xử lý và gửi HTML đã được render đến client.
• SSG: Tạo ra các trang tĩnh trong thời gian build, lý tưởng cho các trang không thay đổi thường xuyên.
• CSR: Render tại client, tức là HTML chỉ được tạo ra trên trình duyệt sau khi tải JavaScript.

Trong các cuộc phỏng vấn, có thể bạn sẽ được hỏi về Hydration, quá trình mà React gắn các kết nối JavaScript vào HTML tĩnh đã được render từ server để thêm tương tác cho trang. Cùng với đó, những hiểu biết về React Server Component cũng là điểm cộng quan trọng, vì nó cho phép chạy logic chỉ ở phía server và giảm tải cho client.

Phần này thường tập trung vào cách bạn sẽ giải quyết các vấn đề thực tế khi làm việc với Next.js. Một câu hỏi phổ biến là: "Bạn có thể mô tả cách bạn sử dụng getStaticProps và getServerSideProps không?". Cần giải thích rằng:

• getStaticProps: dùng để lấy dữ liệu trước khi render cho các trang tĩnh, trong khi getServerSideProps: thu thập dữ liệu mỗi khi có một yêu cầu tới trang, giúp đảm bảo dữ liệu luôn được cập nhật mới nhất.

Ví dụ về cách sử dụng getStaticProps: Trong một ứng dụng blog, bạn có thể cần tải danh sách các bài viết từ một API. Điều này có thể được thực hiện như sau:

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

Khi bạn sử dụng getServerSideProps, có thể là trong một trang đăng nhập, nơi bạn cần xác thực người dùng trước khi hiển thị nội dung:

export async function getServerSideProps(context) {
  const { req } = context;
  // Logic xác thực ở đây
  return { props: { user: userData } };
}

Các tình huống thực tế cũng có thể gợi ý về những thách thức liên quan đến routing, ví dụ như cách bạn sẽ định tuyến một ứng dụng có breadcrumb hoặc dynamic routes. Việc trình bày cách thiết lập đường dẫn động trong Next.js và sử dụng useRouter() có thể được minh họa qua một ứng dụng thương mại điện tử mà bạn cần hiển thị thông tin sản phẩm dựa theo ID sản phẩm trong URL. Điều này không chỉ cho thấy kỹ năng routing của bạn mà còn thể hiện khả năng làm việc với dữ liệu động một cách hiệu quả.

Câu hỏi về hiệu suất và tối ưu hóa

Trong các cuộc phỏng vấn về Next.js, quản lý hiệu suất là một phần không thể thiếu. Bạn có thể sẽ được yêu cầu mô tả một số cách tối ưu hóa hiệu suất trong ứng dụng Next.js:

• Tối ưu hóa hình ảnh: Sử dụng thẻ <next/image> để tự động tối ưu hóa và lazy load hình ảnh, điều này giúp cải thiện tốc độ tải trang.
• Lazy loading: Chỉ tải các phần tử khi chúng cần hiển thị, giúp giảm thời gian tải ban đầu.
• Core Web Vitals: Chú ý đến các chỉ số như Largest Contentful Paint (LCP) và First Input Delay (FID) để hiểu rõ hơn về hiệu suất trang web.

Ví dụ, bạn có thể giải thích việc sử dụng tối ưu hóa cho hình ảnh như sau:

<Image src="/path/to/image.jpg" alt="Description" width={500} height={300} priority />

Thời gian tải của ứng dụng có thể xem xét dựa trên việc sử dụng suspense và quản lý trạng thái thông minh để cải thiện sẽ giúp bạn nổi bật hơn trong mắt nhà tuyển dụng.

Công nghệ luôn thay đổi và những cái mới liên tục xuất hiện. Ví dụ, một câu hỏi có thể được đặt ra là: "Bạn có biết cách trước đây bạn phải refresh trang để cập nhật dữ liệu, tại sao giờ đây ISR lại cải thiện điều này không?". Khi được hỏi, bạn có thể giải thích rằng incremental static regeneration (ISR) cho phép bạn cập nhật các trang tĩnh mà không phải rebuild toàn bộ ứng dụng, giảm thiểu thời gian và công sức. Bạn nên kể thêm rằng trong một số trường hợp, ISR có thể được sử dụng để tự động cập nhật thông tin trên trang một cách nhanh chóng và hiệu quả, giúp tránh sự gián đoạn trải nghiệm người dùng.

Ví dụ về việc áp dụng ISR có thể là trong một trang sản phẩm e-commerce, nơi mà có thể có hàng trăm sản phẩm với thông tin giá cả thay đổi thường xuyên. Bằng cách sử dụng ISR, bạn có thể đảm bảo rằng thông tin vẫn luôn cập nhật mà không cần phải dừng lại để rebuild toàn bộ trang web. Điều này không chỉ tiết kiệm thời gian phát triển mà còn đảm bảo rằng khách hàng luôn thấy thông tin mới nhất khi duyệt trang bằng cách tối ưu hóa quy trình xử lý.

Bên cạnh đó, nhà tuyển dụng cũng có thể hỏi về các Edge Functions và Middleware, những khái niệm mới mà Next.js đã đưa vào để tăng cường khả năng xử lý các yêu cầu gần với người dùng hơn. Sự hiểu biết về cách vận hành cũng như lợi ích của chúng khi kết hợp với API là cần thiết. Bạn có thể giải thích cách mà Edge Functions giúp giảm độ trễ trong việc phản hồi, cải thiện trải nghiệm người dùng và tình huống cụ thể nơi mà Middleware có thể được áp dụng để thực hiện các tác vụ như xác thực người dùng trước khi truy cập vào trang nội dung.