What is the differences between Nextjs App router and Pages router?

300===Dev Framework/NextJS

What is the differences between Nextjs App router and Pages router?

블로글러 2024. 6. 10. 22:37

Next.js provides two routing systems: the App Router and the Pages Router. The App Router leverages the newer React Server Components and offers more granular data fetching and layout control, while the Pages Router follows a more traditional, file-based routing system.

The Big Picture

Think of the Pages Router as a straightforward roadmap where each destination (page) is clearly marked and follows a direct path. The App Router, on the other hand, is like a dynamic GPS that adapts to new routes, offers real-time updates, and integrates more seamlessly with modern web technologies like React Server Components.

Core Concepts

Pages Router: Traditional file-based routing.
App Router: Newer, feature-rich routing with React Server Components.
Data Fetching: Differences in how data is fetched and managed.
Layouts and Nested Routes: Handling layouts and nested routes.
Performance and Optimization: Variations in performance features and optimizations.

Detailed Walkthrough

Pages Router

The Pages Router follows a traditional file-based approach where the file structure in the pages directory defines the routes:

File-based Routing:
- Each file in the pages directory corresponds to a route.
- For example, pages/index.js maps to the home route (/), and pages/about.js maps to /about.
Data Fetching Methods:
- getStaticProps: Fetches data at build time.
- getServerSideProps: Fetches data on each request.
- getStaticPaths: Generates paths for dynamic routes at build time.
Simple Layouts:
- Layouts are typically implemented using custom _app.js and wrapping components within it.

Example:

// pages/index.js
function HomePage() {
    return <h1>Home Page</h1>;
}

export async function getStaticProps() {
    // Fetch data at build time
    return { props: { data: 'some data' } };
}

export default HomePage;

App Router

The App Router offers more advanced routing capabilities using React Server Components and the app directory:

File and Folder-based Routing:
- The app directory is used instead of pages.
- Supports colocated components, layouts, and templates.
React Server Components:
- Introduces support for React Server Components, allowing for better server-side rendering and data fetching.
- Components can be designated as client or server components.
Enhanced Layouts and Nested Routes:
- Layouts are more flexible and can be nested, allowing for better organization and reusability.
- The layout.js file can define layouts for nested routes.
Data Fetching:
- Uses fetch or other async data fetching mechanisms directly in server components.
- Data fetching is more granular and can be colocated with components.

Example:

// app/page.js
export default function HomePage() {
    return <h1>Home Page</h1>;
}

// app/layout.js
export default function RootLayout({ children }) {
    return (
        <html>
            <body>{children}</body>
        </html>
    );
}

Key Differences

Routing System:
- Pages Router: File-based, conventional routing.
- App Router: Flexible, component-based routing with nested routes.
Data Fetching:
- Pages Router: Uses getStaticProps, getServerSideProps, and getStaticPaths.
- App Router: Uses React Server Components and colocated fetch calls.
Layouts:
- Pages Router: Simple, with a single _app.js.
- App Router: Advanced, with nested and colocated layout.js files.
Performance and Optimization:
- Pages Router: Good for straightforward use cases and smaller projects.
- App Router: Better for complex applications with enhanced performance due to server-side rendering and React Server Components.

Understanding Through an Example

Pages Router Example

// pages/about.js
function AboutPage() {
    return <h1>About Page</h1>;
}

export async function getServerSideProps() {
    // Fetch data on each request
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();
    return { props: { data } };
}

export default AboutPage;

App Router Example

// app/page.js
export default function HomePage() {
    return <h1>Home Page</h1>;
}

// app/layout.js
export default function RootLayout({ children }) {
    return (
        <html>
            <body>{children}</body>
        </html>
    );
}

Conclusion and Summary

Next.js provides two routing systems: the Pages Router and the App Router. The Pages Router is traditional and file-based, suitable for straightforward routing needs. The App Router, on the other hand, is more flexible and modern, leveraging React Server Components and offering better data fetching and layout control. Choosing between them depends on the complexity and requirements of your application.

Test Your Understanding

What are the primary differences between the Pages Router and the App Router in Next.js?
How does data fetching differ between the two routing systems?
Write a simple example using the App Router that includes a nested layout.

Reference

728x90

저작자표시 비영리 변경금지

'300===Dev Framework > NextJS' 카테고리의 다른 글

Provide an example of when you would use an API route in Next.js. (0)	2024.06.11
Host Nextjs application in AWS (0)	2024.06.11
Nextjs App routing (0)	2024.06.10
NextJS vs ExpressJS (0)	2024.06.07
NextJS Introduced (0)	2024.06.07

현재글What is the differences between Nextjs App router and Pages router?

메모리허브