Next.js App vs Pages Router

Episode Sponsor!

Thanks to Clio Websites for sponsoring this episode!

Clio Websites specialize in: 

• Web design
• WordPress development
• SEO

Your business deserves a great performing website.

Scrimba Discount!

• Learn to code using Scrimba with their interactive follow along code editor
• Join their exclusive discord communities and network to find your first job!
• Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Topics

What are Server Components?

• React is a client side UI framework
• In React 18 they introduced the concept of server components
• These are React components that are meant to be run/generated only on the server
• Meant to decrease the amount of JavaScript that a client browser would need to run
• Imagine if a site has a static hero that doesn’t change based on the interactions of frequent api data changes
  - This can be rendered as a server component so it just serves HTML and CSS to the client for that one component
• If on the other hand you have a button that adds a todo element to a page, then the button and todo element section would be better served as regular React client side components
• Static content - server side
• Dynamic Content - client side
• That’s the concept behind server components, the ability to mix and match the two

Next.js App Router

• In Next.js 13 the app router was introduced as a beta feature (13.4 as stable)
  - The app router essentially integrates react server components as the default rendering feature of Next.js
• When creating a new page/layout using the app router you are by default creating a server side component that will be rendered on teh server and served as pure HTML and CSS and JS to the client
• You can mix and match server and client components but only in one direction.
  - When creating a new component or page you can add the string ‘use client’ at the top of the component to indicate that it’s a client side react/next component
  - These components behave the same as the old react components
  - You can use all hooks, classes and query methods you were already using in these
  - Any child component of a client side (‘use client’) component will inherit the ‘use client’. 
  - You CANNOT add a server component inside a client component
  - You can add a client component inside a server component tho
  - When to use client vs when to use server

The Drama

• Next.js is using an unstable/canary version of React under the hood of the ‘stable’ app router build
  - Not necessarily as bad as it sounds because Next has done many changes to make the api stable 
  - The API that might change with a stable version of React will not change on the Next.js side as they can just backport and adapt the changes to work with the current model
• IF you don’t know what you’re doing with server-side rendering, you can get some really vague and bad error messages
  - Debugging app router can be kind of a hit and miss as the error messages that you’re used to seeing in React are no longer there
  - This requires you to really learn what the app router is because if you try to use regular react statement (like hooks or classes) it won’t give you very useful errors as it does not suppor them inherently. 
• As Next.js is owned by Vercel, people think they are pushing server components to make they’re users use their servers more therefore charge them more
  - It’s been shown from developers that have adopted app router heavily (like Theo) that this is kind of the opposite
  - Due to the different caching behavior you can even have less server usage using this pattern vs /pages routing
• React libraries don’t work with server components
  - UI libraries have to do quite a bit of work to support server components because they don’t support css-in-js
  - Libraries that rely on hooks have a hard time because again hooks are not supported in server components
  - So Reacts thriving library ecosystem takes a massive hit as soon as you adopt the app router as you’ll either have to adapt them yourself or wait for the libraries to catch up