Why data fetching differs in Next.js - Quick Recap

Recall & Review

beginner

What is the main reason data fetching differs in Next.js compared to traditional React?

Next.js supports both server-side rendering and static site generation, so data fetching can happen on the server before the page is sent to the browser, unlike traditional React which fetches data only on the client side.

beginner

What are the two main data fetching methods in Next.js for pre-rendering pages?

getStaticProps for static site generation (SSG) and getServerSideProps for server-side rendering (SSR).

intermediate

How does Next.js handle data fetching in Server Components?

Next.js Server Components can fetch data directly on the server during rendering without sending extra JavaScript to the client, improving performance and reducing bundle size.

intermediate

Why is client-side data fetching still used in Next.js even with server-side options?

Client-side fetching is used for dynamic or user-specific data that changes often or depends on user interaction, which cannot be pre-rendered on the server.

advanced

What role does caching play in Next.js data fetching strategies?

Caching helps Next.js serve pre-rendered pages quickly and reduce server load by reusing previously fetched data, especially with static generation and incremental static regeneration.

Which Next.js method fetches data at build time for static pages?

A getStaticProps

B getServerSideProps

C useEffect

D getInitialProps

getStaticProps runs at build time to fetch data for static site generation.

What is a key benefit of server-side rendering (SSR) in Next.js?

A Data is fetched on the client only

B No JavaScript is sent to the client

C Pages are pre-rendered with fresh data on each request

D Pages never update after build

SSR fetches data on each request, so pages have fresh data every time.

Why might you choose client-side data fetching in Next.js?

A To pre-render pages faster

B To fetch data once at build time

C To avoid JavaScript on the client

D To get user-specific or frequently changing data

Client-side fetching is best for data that changes often or depends on the user.

What does Incremental Static Regeneration (ISR) allow in Next.js?

A Server-side rendering on every request

B Static pages to update after build without full rebuild

C Client-side fetching only

D Disabling caching

ISR lets static pages update in the background after the site is built.

How do Next.js Server Components improve data fetching?

A By fetching data on the server during rendering without extra client code

B By sending more JavaScript to the browser

C By fetching data on the client only

D By disabling server rendering

Server Components fetch data on the server and reduce client JavaScript.

Explain why Next.js uses different data fetching methods compared to traditional React.

Think about when and where data is fetched in Next.js versus React.

Describe how getStaticProps and getServerSideProps differ in Next.js data fetching.

Consider when each method runs and what kind of data it fetches.