Please enable JavaScript.

Coggle requires JavaScript to display documents.

Next.js Fundamentals - Coggle Diagram

- - - - SSR
      - SSG
    - - SSG
    - - SSG
    - - SSR
      - incremental SSG
  - - - https://nextjs.org/
    - - https://stackoverflow.blog/2020/10/07/qa-with-the-creators-of-next-js-on-version-9-5/
- - - - enables client-side navigation
        
        seamless loading
      - use it to navigate between the same app
    - - uses normal refresh loading
- - - - generated on the "build" time
        i.e npm run build
        
        better performance
        
        "can I pre-render this page ahead of user request?"
        
        user request -> client-side fetching
      - incremental static-side generation
    - - generated on each request
        i.e changing page / refreshing page
        
        good for dynamic data (change over time)
        
        "I cannot pre-render this page ahead of user request"
        "this page changes content too often"
        
        use server side rendering
        
        try incremental static side generation
        
        try client-side fetching
        
        pass static side generation, do fetching on client later
  - - - static-side generation
        
        getStaticProps
    - - server-side rendering
        
        getServerSideProps
      - incremental static-side generation
        
        docs: https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration
        
        getStaticProps
        
        revalidate
        to update existing pages
        
        getStaticPaths
        
        fallback: true
        to create new pages
        
        https://www.youtube.com/watch?v=yGuN_9rng6o
    - - client-side rendering
        
        SWR
        docs: https://swr.vercel.app/
- - - - return 404 if param inputted is not listed
    - - helps you with a hell lot of data, so you don't build for a long - long time
        
        fetch 100 top microphones first
        
        then BUILD the rest at RUN TIME when the user go past the 100 top microphones
        
        creates the data automatically
      - https://www.youtube.com/watch?v=yGuN_9rng6o